Table of Contents

Adding the notification feed to your website

Lisa Fockens Updated by Lisa Fockens

Welcome to our step-by-step guide on setting up the Wisepops Notification Feed feature! In this guide, we cover both the Floating Feed and Custom Feed options, ensuring you have all the tools needed to enhance your website's user engagement.

Once the tracking code is installed on your site, you have 2 options for your feed appearance:

  • Floating feed (no code)
  • Embedded feed (recommended)

Option 1: Floating feed (no code)

To enable the floating feed, follow these steps:

  1. Open your account settings.
  2. Navigate to "Notifications".
  3. Scroll down and in the Implementation section, click on "Change"
  1. In the popup, select "Bell in floating button" then "Continue"
  1. You can now activate the bell by clicking on the toggle

Option 2: Embedded feed

If you're a Shopify merchant, you're in luck as we have a simplified installation method for you for the embedded feed.

This document will help you understand what to do to complete a custom feed implementation. Most of the work required has nothing to do with our app, but with editing the design of your website. The custom setup can be simplified into 2 steps:

  1. Add the element you want to serve as the feed to your site.
  2. 'Turn on feed' on that element.

Since all websites are different, it's impossible to offer a step-by-step guide that gives you the perfect custom setup. You'll have to decide how you want it to appear and edit your code to achieve that. This means adding an icon like a bell or a bit of text to your site where you want to see it.

To show you what we mean, we'll walk you through an interactive demo of a feed setup without ever leaving this page.

The Bell

The most common custom feed setup is a bell. The snippet below has nothing to do with our app - it just creates a bell. You can copy and paste it into any website.


<a tabindex="0" role="button" aria-label="Notifications" href="#" class=" ">
	<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="22" height="22" viewBox="0 0 24 24" stroke="black" xmlns="<http://www.w3.org/2000/svg>">
        <path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
    </svg>
</a>

When we add that snippet to this website, the result is this:

You can see that the code on the left in the following Codepen is the same, except that it's contained within a <div> and <body> tag. On the right, you see the result - the bell. If you click it, you'll notice that nothing happens.

Now, assume the Codepen below is a site with the tracking code already installed (the code script can be found on the js tab).

We want to turn that bell into our feed. To do so, all that's required is to give it the class wisp.  On the third line (where you see <a tabindex="0" role="button" aria-label="Notifications" href="#" class=" ">), add wisp inside the empty quotation marks after class. It should look like this:

<a tabindex="0" role="button" aria-label="Notifications" href="#" class="wisp">Now click 'rerun' in the bottom right corner and in a few seconds a notification badge on the bell will appear. Click on the bell again to open your feed.

Alternative Implementations

The class wisp is all it takes to turn any element into your notification feed when the Wisespops script is properly installed.

Here's another example, but instead of an icon, we'll use a bit of text. This should help you see how versatile this functionality is.

As with the example above, the default HTML on the left has nothing to do with the notification feed and Wisepops, and when you click on the text 'inbox' on the right, you'll see that nothing happens.

Repeat what you did above and add the class wisp in the empty quotation marks. Click 'rerun' and then click 'inbox' again after a few moments.

That's all it takes. If you've successfully installed our app, add the element you want to turn into a notification feed to your site and give it the class wisp

The red notification badges might appear slightly off. If this happens to you, please let us know - that's something we can correct on our side.

Customize your Notifications Feed with Advanced Feed Customization

Contact