Table of Contents

Adding the notification feed to your website

Lisa Fockens Updated by Lisa Fockens

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

  • Floating feed
  • Custom 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 Appearance".
  3. Scroll down and toggle the option to "Display floating bell".

Option 2: Embedded feed (advanced)

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.

If you're a Shopify merchant, you're in luck. We have instructions specifically for your theme, or we'd happily install the feed for you. Check here for your theme, and if you can't find it, feel free to reach out for some extra help.

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

If you're a Shopify merchant, you're in luck. We have instructions specifically for your theme, or we'd happily install the feed for you. Check here for your theme, and if you can't find it, feel free to reach out for some extra help.
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