To embed Wisp in your header, you need to:

  • Create the element you want to become the feed. This means adding a bell icon or text where you want the user to click.

  • Add Wisp functionality by giving it the css class 'wisp'.

  • Switch the feed settings from 'floating' to 'custom' in the Wisp admin.

We wish we could offer a step by step guide, but every website is different. Even Shopify themes can be quite different from each other.

Instead, we'll explain what to do in a general way and we'll always be available if you need help.

If you want us to take care of this for you, just ask. We're happy to help!

Here are more detailed instructions.

Getting Started

Adding the custom feed to your site is a 3 phase project:

  1. Customize your site: You're going to need to create the element that you want to become the feed. For instance, if you want a bell in the header, you have to add a bell in your code. You can find bell icons here.

  2. Add Wisp Functionality to the elements: once your elements are created and in place, you need to tell Wisp where to do its thing. If you added a bell to your header, this is the step that makes it so that when you click the bell the tray opens.

  3. Turn it On: Make sure you switch from 'Floating' to 'Custom' Feed in the Wisp Admin.

Customizing your Site

Step 1 - Plan what you want

Start by understanding exactly what you're hoping to achieve. Here are some helpful prompts to make sure you think of everything.

  • What do I want the custom feed to be? Do you want people to click on an image or an icon, or should they click text on your site instead?

  • What differences should there be on mobile versus desktop? Does your navigation turn into a menu on mobile? Do you switch from icons on one to text on the other?

  • What elements on my site have styles that should be copied? If your feed is going to be added to an area on your site, do you want your feed to be the same colour, size, respond hovering the same way as adjacent elements?

It's important to have a sense of what you're going for. This helps you know where to look in your code and ensures you're completing the job to your satisfaction.

Step 2 - Locate the lines of code

Find the parts of your code where your changes are going to take place. If you're unsure, just search for close by elements. For instance, if you're using a Shopify theme, and you identified that you want to place a bell beside or near your cart, search in your header.liquid file for 'cart'.

Step 3 - Create or mimic elements

Try to understand the structure of the section of code where you want your feed to go. Are there other icons or text used as links there? If so, does each icon have its own <div> or are they a list of items, indicated by <li>?

If it's obvious, or if you know what to do, add the element you need to create the space for the widget. Make sure you repeat this for mobile/responsive conditions.

If you don't know what to do to achieve this, please let us help!

Adding the Wisp functionality to your Elements.

All you have to do is add the CSS class wisp to the elements.

<div class="wisp">

Make sure every instance has that class assigned to it and you're good.

If you want the red badge to appear over the hamburger menu all you have to do it add the class wisp_extra_count.

<div id="hamburger" class="wisp_extra_count">

This will allow that element to display the red badge without turning that element into your feed.

If you kept reading and you still want help, reach out! We're here for it. :)

Turn it on.

In your Wisp admin, navigate to Settings > Widget and switch from 'Floating' to 'Custom'. Give it a little time to propagate and as long as you have published notifications, you should see your feed!

Did this answer your question?