How to include the Intractive Player?

Learn how to showcase Intractive stories on your website.
Written by Kim Benjamins
Updated 6 months ago

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. 🚀

Step 1. Include Intractive Player script

Include the following script between right before the </body> tag on your website, if you haven't already done so.

<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/v2';(d.body||d.head).appendChild(s);}
  if(w.attachEvent){w.attachEvent('onload',r)}else{w.addEventListener('load',r,false)}
})(window, document)</script>

Step 2. Find your ID

To link the correct story to the script, you need to find the ID. It is the last part of the link to your story.

Step 3. Launch player

There are two options to launch your story.

As a Pop-up, or as an Embed Inline

 Pop-Up

Method 1. Using a link

To open this story in a pop-up when a user clicks on an anchor tag, you can use the following code:

// Replace YOUR-ID with with the actual ID
<a href="https://links.intractive.app/YOUR-ID?embed=1">Open experience</a>

Method 2. Data attribute

It's also possible to add the data-intractive-open attribute to any HTML element.

// Replace YOUR-ID with with the actual ID
<button data-intractive-open="YOUR-ID"></button>

Method 3. Using the Javascript API

If you need more control, you can use JavaScript to open or close the pop-up.

// Open the pop-up window, replace YOUR-ID with with the actual ID
window.IntractivePlayer("open", "YOUR-ID");


// Close the instance that is currently opened
window.IntractivePlayer("close");

 Embed inline

1. Embed the player directly in your web page

Adjust the options below and paste the HTML code at the location where you want to embed your story.

// Replace YOUR-ID with with the actual ID
<div data-intractive-embed="YOUR-ID"></div>
Note: inline embeds are in experimental phase. The way the inline player looks on your website may change in the future.
Did this answer your question?