The Notification Feed

Lisa Fockens Updated by Lisa Fockens

The Notification Feed

The notification feed is where you and your site visitors connect. It's the hub for all of your notification campaigns that you create in Wisp.

There are two ways your visitors can experience the notification feed depending on your implementation: The default Floating Feed and the embedded Custom Feed.

Before exploring what makes the floating and custom feeds different, let's consider what makes them the same.

The Red Notification Badge.

When a visitor has a notification waiting, the familiar red badge will appear at the location of the feed to draw them in.  Depending on how many unopened notifications are waiting, the red badge will display the corresponding number.

Another thing to note is that the feed isn't just updated when a page is loaded. Visitors can receive new notifications in real time, based on their activity as they browse. This is covered more in the section on audiences.

Feed Contents

Inside the feed, you'll always see the teaser: a short preview of the full notification campaign. Clicking on a teaser will reveal the next component of the campaign. We call this the message.

Unopened campaigns will be indicated in an obvious way. The feed will become scrollable if there are too many notifications to display in the frame.

There are opportunities for you to style and customize the appearance. THis is accomplished in settings.

The Floating Feed

When Wisp is installed, the default setup for the notification feed is the floating feed.

The floating feed is placed on one of the bottom corners of your page. It's called 'floating' because as you scroll, the feed stays fixed relative to the window instead of moving with the page.

When the feed is opened, it expands up and toward the middle of the page. The floating feed enables a really simple, out of the box setup to get started with Wisp.

The Custom Feed

The custom feed allows you to implement Wisp anyway you envision in. Most commonly, this means embedding an icon in a header. It's a more technical implementation, but there are several benefits that come with it to consider.

  • Full brand integration - your visitors won't feel like they're opening an app.
  • Higher engagement - see 2.5 x the engagement of the floating feed.
  • Customizable to fit design - adopt the style of your site and optimize for mobile.

Below is an example of the custom feed as a fixed part of the site's header. You're free to place it anywhere, but the top right of your site would follow conventional user-experience practices.

There are no limits to styling how the feed button appears. For instance, it doesn't have to be an icon, you can turn text into the home of your feed. Here's a full text navigation with an 'inbox' label for Wisp.

Another important design consideration that we enable accounts for responsiveness. Since their site is responsive, their nav collapses into a hamburger menu (or menu drawer) with a few other icons on smaller displays.

If your site aims to have a minimal header on mobile, you'll likely need to tuck a lot of your nav away in a menu. For this reason, Wisp allows you to display the red notification badge in multiple places, as if to create a click trail for your visitors that leads them to the feed.

This shop uses Wisp inside their menu on mobile. When you open the menu, you can see the the feed through the continuation of the red badge.

It was really important to us that Wisp can fee like a part of your site instead of a widget, if that's what you want. Even though it's a bit more difficult, the custom feed is our most popular implementation of Wisp.

How did we do?

The Wisp Notification