Skip to content

Choose a view#

A view is an SDK object that renders Storyteller content into an element on your page. Choose the view that matches the content and layout you need, then follow its guide.

Goal View Content source
Show Stories in a horizontal row StorytellerStoriesRowView Optional Category IDs
Show Stories in a grid StorytellerStoriesGridView Optional Category IDs
Show Clips in a horizontal row StorytellerClipsRowView Collection ID
Show Clips in a grid StorytellerClipsGridView Collection ID
Play Clips in an area of the page set aside for Clips StorytellerClipsPlayerView Collection ID, { clipId }, or { externalId }
Play Clips inside other page content, such as a live blog StorytellerEmbeddedClipsPlayerView Collection ID, { clipId }, or { externalId }

Every view constructor takes these arguments:

  • elementId: the ID of the element the view renders into
  • categories (Stories views, optional): Category IDs. Without them, the view shows the Stories in your Home list.
  • collectionId (Clips rows and grids): the collection ID
  • source (Clips player views): a collection ID, { clipId }, or { externalId }. The constructor throws an Error if you pass no source or more than one.

The API reference lists the full constructor signatures.

Rows#

Use a row for a compact list that users scroll horizontally. Rows can show round or square tiles through cellType. Grids don't use cellType.

Add a Story or Clips row

Grids#

Use a grid when the page should show more tiles at once. Grids use the same settings as the other views.

Add a Story or Clips grid

Open a player from your code#

To open a Story or Clips player from a button, link, or route in your application, call a method on Storyteller.sharedInstance, such as openStory, openCollection, or openClipByExternalId.

Open a player programmatically

Clips players#

Both Clips player views render the Clips player into your container. StorytellerEmbeddedClipsPlayerView shows one Clip at a time, lets the rest of the page scroll, and ignores Storyteller.sharedInstance.dismissPlayer. StorytellerClipsPlayerView uses the full Clips player layout, which can show neighboring Clips on wide screens, and locks page scrolling while it's shown.

Add a Clips player to a page

Polls and Quizzes#

Polls and Quizzes are Story Pages: Pages inside a Story. Show the Story in a Stories row or grid, and the Story player handles the Poll or Quiz.

Show Polls and Quizzes

Settings shared by all views#

All views share settings for content, themes, display limits, preload behavior, analytics context, and delegates.

Configure views