Guides

Embed the widget player inline

This allows you to embed a widget player directly into your page.

Suggest Edits

📘

This is just a basic usage of our Standalone Widget

Step 1

Create a standalone player from JOIN Stories (Create widget -> Single page -> Standalone)

Step 2

Paste the standalone script into your website page.

You can get the script to copy directly from the Integration tabs

Step 3

Add the <div/> to the desired section of your page.

<div id="container-story" style="position: relative; width: 375px; min-width: 375px; height: 667px; min-height: 667px; margin:auto"></div>

Step 4

Past the following script into the desired page to inject the player into the div, replacing WIDGET_ALIAS with your widget alias (refer to the Step 2 to obtain your alias) 

 <script>
      document.addEventListener("DOMContentLoaded", () => {
        const container = document.getElementById("container-story");
        const standalonePlayer = new JoinModalPlayer("WIDGET_ALIAS", {
          container: container,
          closable: false,
          autoplay: true,
          useShadowDom: false,
        });
 });
</script>

See the documentation of JoinModalPlayer here

Full code example

Just replace TEAM_ID and WIDGET_ALIAS :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script
      src="https://TEAM_ID.my.join-stories.com/widgets/WIDGET_ALIAS/index.js"
      id="join-modal-player-script"
      type="text/javascript"
    ></script>
  </head>
  <body>
    <div id="container-story" style="position: relative; width: 375px; min-width: 375px; height: 667px; min-height: 667px; margin:auto"></div>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const container = document.getElementById("container-story");
        const standalonePlayer = new JoinModalPlayer("WIDGET_ALIAS", {
          container: container,
          closable: false,
          autoplay: true,
          useShadowDom: false,
        });
      });
    </script>
  </body>
</html>

You can also try directly from your browser (inspect)

Div to put your page using "Inspect" (change the style values etc...)
(For example you can right click on the element, EDIT as HTML and past the div, you could also use the JOIN Extension to inject the div)

<div id="container-story" style="position: relative; width: 375px; min-width: 375px; height: 667px; min-height: 667px; margin:auto"></div>

Then past the following commands in the console 

script  = document.createElement('script'); script.setAttribute('src', 'https://TEAM_ID.my.join-stories.com/widgets/WIDGET_ALIAS/index.js'); document.head.appendChild(script);

const container = document.getElementById("container-story");
	console.log('container found: ', container);
	const standalonePlayer = new JoinModalPlayer("WIDGET_ALIAS", {
    container: container,
    closable false,
    autoplay: true,
});

ℹ️

You can adapt this documentation to integrate it dynamically into a page template (like a product page).

You only need to make the alias dynamic based on a page property like a product ID and use our Product Page Widget (request team authorization if needed).

Updated 1 day ago