The Intractive Player allows you to embed your story directly on your website or web app with minimal configuration. This allows you to keep visitors on your web page without redirecting them.

Follow the directions outlined in this article to get started. 🚀

Embedding the Intractive player script

The embed script should be added to each web page where you want to enable the Intractive Player. Copy the code below and make sure it is added right before the end of the body tag. 

<script>(function(w,d){
  w.IntractivePlayer=function(){w.IntractivePlayer.q.push(arguments)};w.IntractivePlayer.q=[];
  function r(){var s=document.createElement('script');s.async=1;s.type='text/javascript';s.src='https://embed.intractive.app/v1';(d.body||d.head).appendChild(s);}
  if(w.attachEvent){w.attachEvent('onload',r)}else{w.addEventListener('load',r,false)}
})(window, document)</script>

After you have included this script on your web page, you have two options to launch stories.

Option 1: Launching stories using data attributes

To start an story from any button or HTML element, simply add the data-intractive-id="YOUR-ID" attribute to any HTML element. When the visitor clicks on the element, the corresponding story will automatically start. For example:

<button class="my-button" data-intractive-id="YOUR-ID" />

Note that this element should be added to the page before the embed script loads. This may not work for Singe Page Applications (React, Vue), or websites built using SSG/SSR frameworks (such as Gatsby or Next). See option below for an alternative method

Option 2: Launching stories programmatically via JavaScript

If you want more control over when your story launches, or have a more complex use case, you can use this option.

It's possible to open or close an story by directly invoking these events on the global Intractive Player object. For example:

document.getElementById("open-button").addEventListener("click", () => {
    // Open a player instance (replace YOUR-ID with the actual ID)
    window.IntractivePlayer("open", "YOUR-ID")
});

document.getElementById("close-button").addEventListener("click", () => {
    // Close the currently opened instance of the player
    window.IntractivePlayer("close")
});

Finding YOUR-ID

To link the correct story to the script, you need to find the ID. 

This ID will show up after creating a QR Code. Check out this article to learn more.