Theme

Story

Overview

Story shows a row of tall picture cards on your page. Each card has a title, a Read more button and an image, and opens its link when clicked.

Your links show first, then recommended articles. You can pin a link to a set place in the row, and add a card for an ad.

On phones, readers see one full-width card at a time, with dots for where they are. They swipe or tap the arrows to move, and the row starts again after the last card.
On larger screens, readers see a row of cards and use the arrows to scroll it. Readers can also use the arrow keys.

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 story shows your own links only.

Set up

Go to Audience Operation > Experience and click New Experience.
Pick Story, then click Next Step.
Enter a Name, choose the Project and turn on Enable.
Click + Add link for each link you want in the story, and fill in:

Setting	What it does
Title	The text on the card.
Link URL	Where the card goes when clicked.
Image URL	The picture on the card.
Position	Optional. Pins the card to this place in the row, where 1 is the first card. Leave it on Auto to keep it in your list order.

Use the arrows next to a link to move it up or down, or the cross to remove it.
Set Ad slot if you want an ad card, see below.
Click Save Changes. The preview shows how the cards look.

How the cards are ordered

Your links without a Position come first, in the order you set.
Recommended articles come next. An article you already link to isn't shown twice.
Links with a Position are then placed at that spot. If the row is shorter, the card goes last.

Show an ad

Set Ad slot to the place of the ad card in the row, where 1 is the first card. The card is labelled "Advertisement" and is filled by the ads on your site. Leave it empty for no ad.

Readers with an ad-free experience don't see the ad card.

Put it on your pages

Place the placeholder where the story should appear. Copy it from the experience:

<div data-exp="unis-story" data-height="500" data-theme="light"></div>

data-height sets the height of the cards in pixels. It's 500 if you leave it out.
data-theme is light or dark. Use dark on a dark background.

To show a particular Story experience, add its ID with data-exp-id="EXPERIENCE_ID". Without it, the page shows the Story experience that an Orchestration delivers to it.

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