Passing variables to a webstory using a widget can be a useful way to customize the content of the webstory for different users or to provide dynamic information to the webstory.

Here is a guide on how to pass variables to a webstory using the Snackeet widget.

1) Embed the widget

First, you need to include the Snackeet widget script in your HTML code.

You can refer to this article to embed the Bubble widget and this one to embed the Banner.

For example, the script to embed the Bubble widget looks like this:

<script>
    var currentScript = document.currentScript;
    var widgetScript = document.createElement('script');
    widgetScript.src = "https://widget.snackeet.com/script.js";
    widgetScript.defer = true;
    widgetScript.dataset.snktBubbleId = "<storyId>";
</script>

2) Set the variables

Once the script is loaded, you can specify at any time the variables your stories will use. So there is no problem if you first must retrieve the user's information via an API call for example.

First, use the SnackeetWidget.getInstance() method to get a reference to the widget object. This method takes the storyId as an argument and returns a widget object that you can use to set the config for the webstory. If only one widget is present, you can also call it without the argument.

Then, use the setConfig() method of the widget object to set the variables for the webstory. It takes an object as an argument, and you can use the variables property of this object to pass variables to the webstory. The variables property should be an object that maps variable names to values.

Here is an example of how you can pass variables to a webstory using the Snackeet widget:

SnackeetWidget.getInstance("<storyId>").setConfig({
    variables: {
        variableName: "value"
    }
})

In this case, the variable variableName is being set to the value "value" for the webstory with the storyId specified.

Bonus

If you already know the values of the variables when the script is added to the page, you can use the onload event of the script tag to set the variables using the setConfig() method.

Here is an example of how you can do this:

<script>
   var currentScript = document.currentScript;
   var widgetScript = document.createElement('script');
   widgetScript.src = "https://widget.snackeet.com/script.js";
   widgetScript.defer = true;
   widgetScript.dataset.snktBubbleId = "<storyId>";
   widgetScript.onload = () => {
     const widget = SnackeetWidget.getInstance("<storyId>")
     setTimeout(() => {
       widget.setConfig({
         variables: {
           variableName: "value"
         }
       })
    }, 100)
  }
  currentScript.insertAdjacentElement('afterend', widgetScript);
</script>