How to include the Intractive Player?

Learn how to showcase Intractive stories on your website.

Written by Kim Benjamins

Updated 1 week ago

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

Step 1. Include Intractive Player script

Include the following script right before the </body> tag on your website.

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

💡 This can also be done in Google Tag Manager, as custom HTML.

Step 2. Find your ID

To link the correct story to the script, you need the ID. It is the last part of the QR link in the Share tab of your story.

💡 E.g. create a separate QR link named Website.

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: Every pageview counts as a session for inline embeds, so the analytics data may be cluttered. Therefor, the pop-up method is preferred.

Did this answer your question?