Embedding the Wisp Feed

Lisa Fockens Updated by Lisa Fockens

Embedding the Wisp Feed

Once Wisp is installed, it automatically appears as the floating feed. You likely installed Wisp with the intention of having the feed embedded in your header.

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

  1. Add the element that you want to serve as the Wisp feed to your site.
  2. 'Turn on Wisp' 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 Wisp setup without ever leaving this page.

The Bell

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

<a 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>


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 Wisp already installed (the Wisp script can be found on the js tab).

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

<a 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 Wisp feed when the Wisp script is properly installed.

Here's another example, but instead of using 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 Wisp, 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.

Note: Switching from Floating to Custom in the Wisp Admin.

The one-step that we skipped happens in your Wisp admin. As we discussed, the default setting for Wisp is the 'floating widget'. In your settings on the feed tab, you need to select 'Custom'. For the examples above, 'Custom' has already been enabled.

That's all it takes. If you've successfully installed Wisp, 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. Either 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.

One note: 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.

How did we do?

Advanced Feed Customization