Storyteller Web SDK

Use the Storyteller Web SDK to show Stories and Clips on your website. These guides are for web developers: install the SDK, show your first Story row, then add the views and integrations you need.

Install the SDK

Install with a script tag Load a fixed SDK version from the Storyteller CDN. No build step. Install from npm Import the package and its stylesheet in a bundled app. Use React or Next.js Initialize the SDK in the browser and destroy views on unmount.

Before you install, check what you need. Code examples link to the private Storyteller Web Showcase: get access to the Showcase source.

Show your first Story row Next step: initialize the SDK and show a row of Stories on your page.

Choose what to show

Choose a view

Stories

Show Story tiles in a row or grid. Selecting a tile opens the Story player.

Add a Story row Add a Story grid

Clips

Show Clip tiles in a row or grid, or play Clips in a player on your page.

Add a Clips row Add a Clips player to a page

More guides

Appearance and contentThemes, views, users, and privacy

• Customize themesStyle tiles, players, Polls, and Quizzes.
• Configure viewsSet Categories, collections, and display limits.
• Identify and personalize usersSet user IDs, user attributes, and the Clips locale.
• Control privacy and trackingApply your users' consent choices.

Analytics, callbacks, and adsEvents, delegates, and ad setup

• Integrate analyticsSend Story, Clip, Poll, Quiz, and ad events to your analytics tool.
• Handle delegates and callbacksRespond to loading, sharing, and player events.
• Integrate adsShow Storyteller or Google Ad Manager ads.

Help and referenceTroubleshooting, upgrades, and API details

• Troubleshoot an integrationFind the first step that failed.
• Migrate from version 10 to 11Update and test a 10.13 integration.
• Open a player programmaticallyOpen Stories and Clips from your own buttons and links.
• Use additional SDK methodsCount content, turn on logging, and read SDK state.
• API referenceLook up every public class, method, and type.
• Use docs with AIGive your coding assistant the SDK docs.
• Release notesSee what changed in each version.