Skip to content

Install with a script tag#

Load the SDK from the Storyteller CDN when your site has no JavaScript build step.

Add the SDK#

Add the versioned script before the closing </body> tag, after the container, so the container exists when your code creates the view. A fixed version keeps the deployed SDK the same until you choose to update it.

<div id="storyteller-stories-row" style="height: 200px"></div>

<script src="https://content.usestoryteller.com/javascript-sdk/11.0.0/dist/storyteller.min.js"></script>
<script>
  async function startStoryteller() {
    await Storyteller.sharedInstance.initialize('demo-api-key');

    new Storyteller.StorytellerStoriesRowView(
      'storyteller-stories-row'
    );
  }

  startStoryteller().catch((error) => {
    console.error('Storyteller could not start.', error);
  });
</script>

The script adds its styles to the page. Storyteller becomes available on window after the script loads.

Replace demo-api-key with your API key. To show Stories from specific Categories, pass their IDs as the second argument:

new Storyteller.StorytellerStoriesRowView('storyteller-stories-row', [
  'category-id',
]);

Note

Earlier guides used a /javascript-sdk/latest/ URL. That path does not serve production releases. Use a fixed version URL, such as the 11.0.0 URL above.

Host the SDK files#

The script downloads the Story player, Clips player, Poll, Quiz, and caption code the first time a page needs it. These files load from the same directory as storyteller.min.js, for example https://content.usestoryteller.com/javascript-sdk/11.0.0/dist/. Their names look like storyteller.story-player.<hash>.min.js.

The Storyteller CDN serves all of these files. To host the SDK on your own server:

  • Copy every file in the version's dist directory to one directory.
  • Keep the file names.
  • Load storyteller.min.js from its own <script> tag. Don't bundle, rename, or inline it.

Content Security Policy#

If your site uses a Content Security Policy (CSP), allow scripts from the SDK directory in script-src, for example https://content.usestoryteller.com/javascript-sdk/11.0.0/dist/. The SDK adds its files to the page as <script> elements without a nonce. If your policy allows scripts only by nonce or hash, also add 'strict-dynamic' or the SDK directory.

The Story player also loads the AMP Story player script from https://stories.usestoryteller.com/amp/.

Check the result#

A horizontal row of Story tiles appears. If the container stays empty, open the browser console and look for a failed script request or an initialization error. See Troubleshoot an integration.

The Storyteller Web Showcase builds the same versioned CDN URL in buildVersionedDemoSdkScriptUrl.

Next steps#