Widget reference

This page specifies all widget types available in Storyteq CMP portals, their configuration options, and their availability by portal type.

To add and configure widgets on a CMS page, see Add widgets to a CMS page.

Widgets are placed inside grids and carousels on CMS pages. Grids and carousels are section containers, not widgets, and are configured separately. See Understanding CMS pages, grids, and widgets for an overview of how these elements relate, and Add CMS grids and carousels for configuration procedures.

Widget availability

The following table shows which widget types are available in each portal type.

Widget Projects portal Assets portal Brand portal Analytics portal Help portal

Text

✓

✓

✓

✓

✓

Button

✓

✓

✓

✓

✓

Image

✓

✓

✓

✓

✓

Video

✗

✓

✓

✗

✓

Asset grid

✗

✓

✗

✗

✗

Asset search

✗

✓

✗

✗

✗

Typography

✓

Colour palette

✓

Widget specifications

Text widget

Text widgets display formatted content including headings, body text, lists, and links. The widget height grows dynamically as content is added.

General tab

Link

Optionally enables a link on the widget. When the published widget is selected, the user navigates to the destination in a new tab. One of:

Internal

Links to a page within the portal.

External

Links to an external URL.

Asset Listing Link

Links to an asset list page.

Background tab

Background Colour

A background colour applied to the widget. Select from the portal’s theme colours.

Opacity

The opacity of the background colour. Adjusted using a slider.

Container tab

Padding

Padding applied to each side of the widget in px: top, right, bottom, and left. Vertical and horizontal values are linked by default. Select the link icon to set each side independently.

Margin

Margin applied outside each side of the widget in px: top, right, bottom, and left.

Text editor

The text editor is opened by selecting the pen icon on the widget. The following formatting options are available:

Option Description

Heading and text styles (TT)

Applies a heading level (Heading 1–6) or text style (Text, Text 1, Text 2) to the selected text. Styles are configured in Theming options reference.

Text colour

Applies a colour from the portal’s theme colours to the selected text.

Bold, Italic, Underline

Applies bold, italic, or underline formatting to the selected text.

Numbered list, Bullet list, Indent

Applies list formatting or indentation.

Vertical alignment

Sets the vertical alignment of text within the widget: top, centre, or bottom.

Link

Adds an inline link to selected text. Paste a URL directly, or highlight text first to use different link text. For mailto links, use the format mailto:emailaddress@example.com. Selecting a URL link in the published widget opens the destination in a new tab. Selecting a mailto link opens the user’s default email application addressed to the specified address.

Button widget

Button widgets display a labelled button that navigates to an internal page, external URL, or asset listing when selected.

General tab

Label

The text displayed on the button.

Colour

The button colour to apply. One of:

  • Primary

  • Secondary

  • Neutral

  • Clear

Link

Optionally enables a link on the button. When the published button is selected, the user navigates to the destination in a new tab. One of:

Internal

Links to a page within the portal.

External

Links to an external URL.

Asset Listing Link

Links to an asset list page.

Container tab

Padding

Padding applied to each side of the button widget in px: top, right, bottom, and left.

Alignment

Controls the position of the button within the widget container. One of:

Option Description

Left, Centre, Right

Horizontal alignment of the button within the container.

Stretch (horizontal)

Button width spans the full width of the widget container.

Top, Bottom

Vertical alignment of the button within the container.

Stretch (vertical)

Button height spans the full height of the widget container.

Image widget

Image widgets display an image selected from the DAM.

General tab

Asset

The image to display, selected from the DAM asset picker. Once set, can be replaced or deleted.

Image Quality

The quality at which the image is rendered. Defaults to High.

Image Size

Controls how the image fills the widget container. One of:

  • Contain (default): the image is scaled to fit within the container.

  • Cover: the image is enlarged to fill the container entirely.

Image Label

An optional text label for the image.

Link

Optionally enables a link on the widget. When the published widget is selected, the user navigates to the destination in a new tab. One of:

Internal

Links to a page within the portal.

External

Links to an external URL.

Asset Listing Link

Links to an asset list page.

Focus Area

Controls which part of the image is displayed within the widget container.

Container tab

Title

The display title of the widget.

Padding

Padding applied to each side of the widget in px: top, right, bottom, and left.

Video widget

Video widgets display a video file selected from the DAM.

General tab

Video Size

Controls how the video fills the widget container. One of:

  • Contain: the video is scaled to fit within the container.

  • Cover: the video is enlarged to fill the container entirely.

Asset

The video file to display, selected from the DAM asset picker. The picker shows video files only. Once set, can be replaced or deleted.

Playback options

One or more of:

Option Description

Show Controls

Displays playback controls to the user in the published widget.

Autoplay

The video plays automatically when the page loads.

Mute

The video plays without sound.

Loop

The video repeats continuously.

Container tab

Title

The display title of the widget. Defaults to Video.

Padding

Padding applied to each side of the widget in px: top, right, bottom, and left.

Asset grid widget

Asset grid widgets display a grid of assets from a specified lens. Selecting an asset in the published widget opens the asset list page filtered to that lens.

The asset grid widget is available in the assets portal only.

General tab

Link Type

Determines how the widget links through to assets. One of:

Asset Listing Link

The widget links to an asset list page filtered by the configured lens.

  • Page Title: an optional title for the linked asset list page.

  • Lens (required): the lens that determines which assets display in the grid.

  • Sort By: the order in which assets display. One of: Name, Type, State, Date Created, Date Modified.

Internal Link

The widget links to an existing portal page.

  • Destination Page: the portal page to link to.

  • Sort By: the order in which assets display.

Layout tab

Columns

The number of columns in the grid.

Rows

The number of rows in the grid.

Gap

The spacing between grid cells in px.

Image Size

Controls how asset thumbnails fill each grid cell. One of:

  • Contain (default): thumbnails are scaled to fit within the cell.

  • Cover: thumbnails are enlarged to fill the cell entirely.

Background tab

Background Colour

A background colour applied to the widget. Select from the portal’s theme colours.

Opacity

The opacity of the background colour. Adjusted using a slider.

Asset search widget

Asset search widgets display a search field that returns assets from a specified lens or directs users to an asset list page.

The asset search widget is available in the assets portal only.

General tab

Search Fields

The fields users can search by. All fields are selected by default and can be deselected individually. One or more of:

Field Description

Name

Searches by asset name.

Keywords

Searches by taxonomy keywords.

States

Filters by asset state.

Types

Filters by asset type.
Link Type

Determines where users are directed when they perform a search. One of:

Asset Listing Link

Users are directed to an asset list page with results filtered by the search term and the configured lens.

  • Page Title: an optional title for the linked asset list page.

  • Lens (required): the lens that determines which assets are available in the search.

Internal Link

Users are directed to the selected page where matching results display.

  • Destination Page: the asset list page to direct users to.

Background tab

Background Colour

A background colour applied to the widget. Select from the portal’s theme colours.

Opacity

The opacity of the background colour. Adjusted using a slider.

Container tab

Title

The display title of the widget.

Padding

Padding applied to each side of the widget in px: top, right, bottom, and left.

Alignment

The vertical alignment of the search bar within the widget. One of: top, centre, bottom.

Typography widget

Typography widgets display font families from typography assets stored in the DAM. Users can preview fonts and optionally download font files from the published widget.

General tab

Assets

The typography zip files to display, selected from the DAM asset picker. Selected fonts display individually in the widget settings. Individual fonts can be removed from the selection.

Enable Download

When enabled, users can download font files from the published widget. A download button displays alongside the font selector in the published widget.

Colours tab

Text Colour

The colour of the font preview text. Select from the portal’s theme colours.

Background Type

Controls the widget background. One of:

  • None (default): no background applied.

  • Colour: select a background colour from the portal’s theme colours.

Container tab

Padding

Padding applied to each side of the widget in px: top, right, bottom, and left.

Margin

Margin applied outside each side of the widget in px: top, right, bottom, and left.

Colour palette widget

Colour palette widgets display a named brand colour palette on a CMS page. Palettes must be created in portal styling before they can be selected here. See Create colour palettes.

General tab

Layout

Controls the arrangement of colour swatches in the published widget. One of:

  • Columns: swatches are arranged in columns.

  • Rows: swatches are arranged in rows.

Palette (required)

The colour palette to display. Select from previously created palettes, or select + Add New Palette to create one without leaving the widget settings.

Show Values

When enabled, the hex, RGB, and CMYK values for each colour display in the published widget. Enabled by default.

Background tab

Background Type

Controls the widget background. One of:

  • None (default): no background applied.

  • Colour: select a background colour from the portal’s theme colours.

Container tab

Padding

Padding applied to each side of the widget in px: top, right, bottom, and left.

Margin

Margin applied outside each side of the widget in px: top, right, bottom, and left.

Gap

The spacing between colour swatches in px.

Related pages