Important note: If you are on Shopify, follow this tutorial.

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>”Widget” page and select one of the two options:

Step 2: Set up the Wisp script

In the settings, click on “Setup” in the left panel.

Copy and paste the script. It should look like this:

<script>
(function(w,i,s,p){a=document.createElement("script");a.src=w+"/embed?website_id="+i;a.onload=function(){wisp.start(w,i,s,p);};document.head.appendChild(a);}) ("https://app.getwisp.co", "WEBSITE_ID");
</script>

Once you have copied the script, place it right before the </body> tag of your website.

Step 3: Supercharge the setup

Did this answer your question?