Theme

Web Story

Overview

Web Story brings the stories format from social apps to your site. Readers see a row of round covers with titles. A click on a cover opens the story player.

In the player, each story plays its slides one after another, with a progress bar for each slide at the top. A slide can be:

an image, shown for the number of seconds you choose,
a video, shown for as long as it plays,
a quiz, from one of your Quiz experiences.

Any slide can have a button that links to a page, such as the full article. When a story ends, the next one starts.

Your stories show first, then recommended articles. Each recommended article becomes a one-slide story with a Read more button.

The ring around a cover changes colour once the reader has watched that story, so they can see what is new. This is remembered in their browser.

Before you start

Recommended articles come from Transfon Studio. Turn it on for the site in Connect > Transfon Studio to show them. Without it, the row shows your own stories only.

To use quiz slides, create a Quiz experience in the same project first.

Set up

Go to Audience Operation > Experience and click New Experience.
Pick Web Story, then click Next Step.
Enter a Name, choose the Project and turn on Enable.
Set the settings for the whole row:

Setting	What it does
Recommended articles	How many recommended articles to add after your stories, up to 20. 5 if you leave it empty. Set 0 for none.
Ad slot	Optional. Adds an ad between stories at this place, see below.

Click + Add story for each story, and fill in:

Setting	What it does
Title	The text under the cover and at the top of the player.
Cover image URL	The picture in the round cover.
Position	Optional. Places the story at this spot in the row, where 1 is the first. Leave it on Auto to keep it in your list order.

Add the slides of each story. Click + Add slide for more, and fill in:

Setting	What it does
Slide	Image, Video or Quiz.
Image URL / Video URL	The picture or video for the slide.
Quiz	For a quiz slide, the Quiz experience to show.
Seconds	For an image slide, how long it shows, from 1 to 60. 5 if you leave it empty.
Button text	Optional. Shows a button at the bottom of the slide.
Button link	Where the button goes. Needed when you set Button text. The page opens in a new tab.

Use the arrows to change the order of stories and slides, or the cross to remove one.
Click Save Changes. The preview shows how the row looks.

A story shows only when it has a cover image and at least one slide.

How readers use the player

Tap the right side of a slide to go on, or the left side to go back. A quiz slide waits for the reader, who uses the arrow on the right to go on.
Swipe left or right to move between stories, or swipe down to close.
On larger screens, use the arrows beside the player to move between stories, and click outside it to close.
Use the pause and close buttons at the top. Videos start muted, with a button to turn the sound on.
On a keyboard, use the arrow keys, Space to pause and Escape to close.

On phones, the player fills the screen.

Set Ad slot to add an ad slide between stories, where 1 is before the first story. The slide is labelled "Advertisement" and is filled by the ads on your site. Readers can skip it after a few seconds.

The ad shows only in the player, not in the row of covers. Readers with an ad-free experience don't see it.

Put it on your pages

Place the placeholder where the row should appear. Copy it from the experience, which fills in its ID, or replace EXPERIENCE_ID yourself:

<div data-exp="unis-webstory" data-exp-id="EXPERIENCE_ID" data-theme="light"></div>

Set data-theme to dark on a dark background.

Without data-exp-id, the page shows the Web Story experience that an Orchestration delivers to it.

See the Web Story experience, Set up experiences on your website and the Monetization experiences.