Theme

AI Summary

Overview

AI Summary shows a short summary of the article at the top of your article pages. Readers see a box titled "Summary · AI-generated" that they open and close with a click or the keyboard.

The summary is written for each article automatically. You don't have to do anything per article. Until an article has a summary, nothing is shown.

Before you start

AI Summary needs Transfon Studio connected for the site:

Go to Connect > Transfon Studio.
Turn on Enable and Enable AI Summary.

Transfon Studio picks up your articles as readers view them. Your article pages need the usual article meta tags, such as the article type, image and published time. See Transfon Studio.

Set up

Go to Audience Operation > Experience and click New Experience.
Pick AI Summary, then click Next Step.
Enter a Name, choose the Project and turn on Enable.
Set the settings:

Setting	What it does
Title	The heading of the box. "Summary" if you leave it empty.
Show after	A CSS selector, only if you place the summary without changing your site, see below. Otherwise leave it empty.
Open by default	Shows the summary open. Otherwise readers click the title to read it.

Click Save Changes. The preview shows how the box looks.

Put it on your pages

There are two ways to place the summary. Use one of them on a page, not both, or the page shows two boxes.

Add a placeholder to your template

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

<div data-exp="unis-ai-summary" data-exp-id="EXPERIENCE_ID"></div>

Leave Show after empty. Add data-open="true" to show the summary open on this page whatever the experience setting.

Place it without changing your site

Set Show after, for example h1 to show the summary under the headline. The box is added right after each element that matches.
Add the experience to an Orchestration that targets your article pages. See Orchestration.

Match your brand

The box is black and grey by default and keeps its own styles, so your site's CSS doesn't change it. Add data-theme-brand to the placeholder to use your brand colour:

<div
  data-exp="unis-ai-summary"
  data-exp-id="EXPERIENCE_ID"
  data-theme-brand="rgb(37, 99, 235)"
></div>

For finer control, set these on the placeholder: --unis-ai-summary-bg for the background, --unis-ai-summary-text for the summary text and --unis-ai-summary-heading for the title.

The summary is for the page's canonical URL. If the page has no canonical URL, its og:url is used, and then the page address. Make sure the canonical URL of each article points to the article itself.