To integrate your web story, open it in the builder. Then, click on SHARE, at the top right of the interface.
Select Share with a widget on the left side.
1. Select the desired position of the widget.
You can place it:
At the bottom left.
At the bottom right.
2. Add a text in the bubble
Write a few words to catch your public's attention.
3. Set up the icon of your widget
You can choose our icon or
You can click on Customize to upload an image or video (from your gallery, Instagram, Pexels, link, etc).
From the widget Icon settings, you can:
Change the size of the widget in the desktop version or the mobile version;
Adjust the border and its color;
Add a caption that will appear over the widget
4. Choose how it appears and when
In this section you can choose if the widget should open in fullscreen or not.
You also have a few options on when the widget automatically opens:
When the user lands on the page
After a certain period of time
When the user scrolls down the page
When the user leaves the page
5. Choose where the widget appears
You can specify here in which pages the widget can be displayed, by either allowing it on all pages or on some specific pages. In both cases, exceptions can be added, and the pages added to the blacklist won't have the widget.
When adding a page to the list, there are 2 possible operators on how a URL is matched:
Includes - this operator partially matches the URL. It is useful is you want to ban some specific parts of your website, for example /about.
Is equal - this operator expects a valid URL and matches it exactly. This is great if the widget script is present in multiple pages but you just want to allow the widget in a specific page.
6. Integrate your web story
Copy the code and paste it into the <body> section of the page to display your web story on the chosen page.
You can also integrate your web story into an email. For that, select Share with a Link on the left side of the interface.
7. Widget Commands
Whenever a Snackeet Widget is embedded on your website, you have access to commands to automatically trigger actions.
You can use these commands:
Here is an example of how you could use the minimizeWidget() method to minimize the widget when the website is loaded:
⚠️ Don’t forget to replace YOUR_STORY_ID (x2)
Include the SnackeetWidget Script in your website’s HTML code by adding the following line to the <head> element of your HTML document: <!-- Snackeet -->
<!-- Snackeet -->
<script> var currentScript = document.currentScript; var widgetScript = document.createElement('script');
widgetScript.src = "https://widget.snackeet.com/script.js"; widgetScript.defer = true;
widgetScript.dataset.snktBubbleId = "YOUR_STORY_ID";
widgetScript.onload = () => { SnackeetWidget.getInstance("YOUR_STORY_ID").minimizeWidget() } currentScript.insertAdjacentElement('afterend', widgetScript); </script>
<!-- End Snackeet -->
Use it in a button.
You can also use a button to open a Story using the commands. For example :
<button class="open" onclick="SnackeetWidget.getInstance("YOUR_STORY_ID").openWidget()" spellcheck="false">Open</button>
PS: you can go to our Website to see an example of what your widget can look like.
You might find it useful:
How can I...
Still have a question?
Don't hesitate to reach us using the chat!
