Skip to main content

Getting started

Script​

To use the standalone player, you need to integrate the standalone script.

<script
    id="join-modal-player-script"
    src="$DOMAIN_NAME$/widgets/globalStandalone/index.js"
></script>

You should change $DOMAIN_NAME$ with your Join domain name. This can differ depending on if you have set a redirection. You should ask the JOIN Team to get your domain name.

Create a Modal​

The script expose a constructor that allow you to create a Modal Player :

const player = new JoinModalPlayer(STORIES, OPTIONS);

STORIES is an array of all the story url you want to add to the modal. OPTIONS is a configuration object.

The constructor is only available once the script has been executed.

Available options​

NameTypeDefault ValueDescription
storiesContainerNodeundefinedA node where the elements used to open the stories are (used for analytics).
loaderOnMobileBooleanfalseIf set to true, the modal will only open when the story is ready. While loading, a loading class is added to the triggeringElement (cf. show method).

storiesContainer is a node used for analytics. It is used to detect if the stories are visible. If the container isn't set, the stories are considered as visible. In case of a widget with a single story, storiesContainer should be the element which will be used to open the story.

Open a Story​

Once the modal has been created, add an onclick event to the triggering element. Use the player method show to open a story.

const button = document.querySelector("#story-button");
button.addEventListener("click", () => {
    player.show(null, button);
});
ParameterTypeRequiredDescription
storyUrlstringNOThe url of the story to open. If not set, the modal will open on the last story opened.
triggeringElementNodeNOThe dom element used to open the story. this element is used as a source position for the opening animation.

Examples​

Here is a codesanbox to see a live integration of the standalone widget.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Integration</title>
    <script
      id="join-modal-player-script"
      src="https://join-test.my.join-stories.com/widgets/globalStandalone/index.js"
    ></script>
  </head>
  <body>
    <button type="button" id="button-player">Open player</button>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const initializeStoryPlayer = () => {
          const button = document.querySelector("#button-player");

          const player = new JoinModalPlayer(
            [
              "https://join-test.my.join-stories.com/story-demo-ouest-france-h8u7n8O/"
            ],
            { storiesContainer: button }
          );

          button.addEventListener("click", () => {
            player.show(null, button);
          });
        };

        if (JoinModalPlayer) initializeStoryPlayer();
        else
          document
            .getElementById("join-modal-player-script")
            .addEventListener("load", initializeStoryPlayer);
      });
    </script>
  </body>
</html>