The AI Summary feature provides a short, automatically generated summary of a story, helping readers quickly understand the key points without reading the full article.

The summary appears as a collapsible section on the story page, typically placed below the hero image and above the story content. It includes a title, subtitle, and animated summary text.

This feature can be configured from Page Builder, allowing customisation of appearance and behaviour.

Key Features

• Displays a concise AI-generated summary for faster content consumption
• Fully customizable title, subtitle, icon, and styling
• Collapsible design (expand/collapse interaction)
• Typing animation for better engagement
• Supports desktop, mobile, and all layouts
• Uses default values when no customisation is provided

Where to Configure

Bold: The AI Summary feature must first be enabled via configuration. Once enabled, it becomes available for use.
 

PageBuilder Toggle: 

• Log in to Page Builder
• Open any story page
• Navigate to AI Story Elements
• Access AI Summary Settings

From here, you can configure and preview the summary block.

AI Summary Configuration

Clicking on the AI Summary Settings button opens the configuration panel, where you can customise how the AI Summary appears on the story page.
Title and Subtitle
You can define custom text for:

• Title
• Subtitle

These will be displayed in the AI Summary block on the frontend.

If no values are provided, the system will automatically use the default text:

• Title: Quick Read
• Subtitle: AI-generated summary, newsroom reviewed

The default values ensure that the summary block is always displayed with meaningful context, even if custom inputs are not added.

Styling Options

Border Color
Defines the outline color of the summary block.

Background Color
Sets the background to visually separate the summary from the rest of the content.

Icon Selection
Allows you to choose an icon representing the summary section.

Icon Color
Customizes the color of the selected icon.

Frontend Behaviour

On the live site, the AI Summary appears as a collapsible block that includes:

• Icon
• Title
• Subtitle
• Expandable summary text

Expand & Collapse Functionality

• By default, the summary remains collapsed
• Users can click to expand and view the full summary
• The summary text is displayed with a typing animation
• Clicking again collapses the section

Important Guidelines:

• Enable the AI Summary toggle in Page Builder before using the feature
• Add the Summary element below the hero image in the story
• Use only one summary element per story to avoid display inconsistencies
• You can format summaries (e.g., bullet points) for better readability

Best Practices:

• Review AI-generated summaries before publishing
• Keep summaries clear, concise, and aligned with the story content
• Use consistent subtitle messaging (e.g., AI-generated, newsroom-reviewed)
• Ensure summaries add value and improve reader understanding