Website Builders

This walkthrough shows how to add Storyly to your website builder 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)

Shopify

The Custom HTML section allows you to add additional code to your homepage.

• From your Shopify admin, go to Online Store > Themes.

• Find the theme you want to edit, and then click Actions > Edit code.

• In the Sections directory, click Add a new section with the name section-custom-html.

• You can import and init Storyly by copying below lines to custom html section, please remember to replace <YOUR_TOKEN_HERE> with your own.

<script custom-element="storyly-web" src="https://web-story.storyly.io/v2/storyly-web.js"></script>
<storyly-web></storyly-web>
<script>
    const storylyWeb = document.querySelector('storyly-web');
    storylyWeb.init({    
      token: '<YOUR_TOKEN_HERE>',
    });
</script> 

{% schema %}
  {
    "name": "Storyly Embed",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Title"
      },
      {
        "type":"textarea",
        "id": "custom_html",
        "label": "HTML"
      }
    ],
    "presets": [
      {
        "name": "Custom HTML",
        "category": "Web Stories",
        "settings": {
        }
      }
    ]
  }
{% endschema %}

• Click Save.

WARNING

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