Ready to set up Wisp on your Shopify store? Let's get started.

Step 1: Choose your implementation type

Wisp can be implemented in two ways.

Floating button

This is what a floating button can look like (once customized).

The widget is added on top of your website's content in the lower part of your page.
If you've installed a live chat for example, this is the same kind of setup.

It's the easiest way to implement Wisp as it doesn't require any coding skills. But it's less visible and could compete with your live chat or any other floating widget you have.

Custom setup

You can also use our custom setup option. The "custom setup" allows you to integrate Wisp directly into your website. For example in your store's header:

This kind of implementation usually generates higher engagement rates but it will require the help of a developer (we can help!)

If you want to use this setup, you will have to add the bell to your header and associate it with a wisp CSS class

Example

<div class="wisp">
<svg width="16" height="16">
<path
fill="#000"
d="M10 14H6c0 1.1.9 2 2 2s2-.9 2-2zM15 11h-.5c-.7-.7-1.5-1.7-1.5-3V5c0-2.8-2.2-5-5-5S3 2.2 3 5v3c0 1.3-.8 2.3-1.5 3H1c-.6 0-1 .4-1 1s.4 1 1 1h14c.6 0 1-.4 1-1s-.4-1-1-1z"
/>
</svg>
</div>

Once you've chosen the setup that works for you, head over to the settings page and select one of the two options

Step 2: Set up our Shopify app (This is not required if you've installed Wisp from Shopify App Store)

Back in the settings of your account, click on "Setup" in the left menu:

And then click on "Log in with Shopify".
Then click on "Install unlisted app".

You're done!

Did this answer your question?