Marketing Tools

This walkthrough shows how to add Storyly to your marketing tool and show your first story in it.

Before you begin

Please login into Storyly Dashboard (opens new window) and get your instance token. You can get your token from the Storyly Dashboard -> Settings -> App Settings (opens new window)

Google Tag Manager

You can import and init Storyly by copying below lines to Google Tag Manager, please remember to replace <YOUR_TOKEN_HERE> with your own.

<script>
  (function (targetClass) {
    var storylyScript = document.createElement("script");
    storylyScript.setAttribute("custom-element", "storyly-web");
    storylyScript.setAttribute(
      "src",
      "https://web-story.storyly.io/v2/storyly-web.js"
    );
    document.body.appendChild(storylyScript);

    var storylyTag = document.createElement("storyly-web");
    var heading = document.querySelector("." + targetClass);

    if (heading) {
      heading.parentElement.insertBefore(
        storylyTag,
        heading.previousSibling
      );
    }

    storylyScript.onload = function () {
      storylyTag.init({
        token: "<YOUR_TOKEN_HERE>",
      });
    };
  })("CLASS_NAME");
</script>

TIP

Storyly will be positioned before the section named CLASS_NAME. Please do not forget to put correct class name into this field.

WARNING

If you can't see Storyly in your website, please check that your token is correct. For more details please check console logs.