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, use 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. Understanding CMS pages, grids, and widgets explains how these elements relate. To set up grids and carousels, use Add CMS grids and carousels. |
Widget availability
The following table shows which widget types are available in each portal type.
| Widget | Dashboard | Content | Adaptations | Collaborate | Brand Portal | Assets | Projects | Analytics | Help |
|---|---|---|---|---|---|---|---|---|---|
Asset Grid (Assets) |
✓ |
✓ |
x |
x |
✓ |
✓ |
x |
x |
x |
Asset Grid (Print T) |
✓ |
✓ |
✓ |
x |
✓ |
✓ |
x |
x |
x |
Asset Grid (Digital T) |
✓ |
✓ |
✓ |
x |
✓ |
✓ |
x |
x |
x |
Asset Search (Assets) |
✓ |
✓ |
x |
x |
✓ |
✓ |
x |
x |
x |
Asset Search (Print T) |
✓ |
✓ |
✓ |
x |
✓ |
✓ |
x |
x |
x |
Asset Search (Digital T) |
✓ |
✓ |
✓ |
x |
✓ |
✓ |
x |
x |
x |
Project Search |
✓ |
x |
x |
✓ |
x |
x |
✓ |
x |
x |
Typography |
✓ |
✓ |
x |
x |
✓ |
x |
x |
x |
x |
Colour Palette |
✓ |
✓ |
x |
x |
✓ |
x |
x |
x |
x |
Text |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
Button |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
Image |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
Video |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
Grid |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
Carousel |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
Tabset Section |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
Project Listing Counter |
✓ |
x |
x |
✓ |
x |
x |
✓ |
x |
x |
Gallery |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
✓ |
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.
Styles 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.
- Border Radius
-
The corner radius of the widget in px.
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 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 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 |
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.
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.
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.
-
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.
-
Project search widget
Project search widgets display a search field that returns projects from specified project types and states.
| The project search widget is available in dashboard, collaborate, and project portals only. |
General tab
- Search Fields
-
The fields users can search by. Name/ID, Keywords, Types, and States are selected by default and can be deselected individually. One or more of:
| Field | Description |
|---|---|
Name/ID |
Searches by project name or ID. |
Keywords |
Searches by taxonomy keywords. |
Types |
Filters by project type. |
States |
Filters by project state. |
- Search Operator
-
The logical operator applied between search terms. One or both of And, Or. Both are selected by default and can be unchecked.
- Link Type
-
Determines where users are directed when they perform a search. One of:
- Project Listing Link
-
Users are directed to a dynamically created project list page, with results filtered by the search term and the configured project types and states.
-
Page Title: an optional title for the linked project list page.
-
Project Type (required): one or more project types that determine which projects are available in the search.
-
Include Subtypes: includes subtypes of the selected project type(s). Unchecked by default.
-
Include Subprojects: includes subprojects of the selected project type(s). Unchecked by default.
-
Project State (required): one or more project states that determine which projects are available in the search.
-
Sort By: the order in which projects display.
-
- Internal Listing Link
-
Users are directed to the selected page where matching results display.
-
Destination Page: the portal page to direct users to.
-
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.
Styles 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.
-
- Border Radius
-
The corner radius of the widget in px.
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. To create a palette, use the Create colour palettes section of Configure portal styling.
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.
Project listing counter widget
Project listing counter widgets display a count of projects or reviews matching configured filters, linking through to a project list or review listing page.
| The project listing counter widget is available in dashboard, collaborate, and project portals only. |
General tab
- Link Type
-
The type of listing launched when a user interacts with the published widget. One of:
- Project Listing
-
Launches a dynamically created project list page filtered by the search term and the configured project type, states, and role.
-
Search Fields: the fields the search matches against (Name/ID, Keywords, Types, and States). All are selected by default and can be deselected individually.
-
Search Operator: the logical operator applied between search terms. One or both of And, Or. Both are selected by default and can be unchecked.
-
- Review Listing
-
Launches a dynamic review listing filtered by the configured settings.
-
Review Type: the types of review included in the count. Multi-select. Projects and Adaptations are both selected by default.
-
Review State: the review states included in the count. Multi-select. One or more of: Active, Aborted, Completed, and Draft.
-
Review Filters: optional filters to narrow the review count. One or more of: Requires my attention and Created by me. None are selected by default.
-
Sort By: the field used to sort results in the review listing. One of: Title, Created, Modified, Deadline, Started, and Completed.
-
Styles tab
- Button Style
-
One of: Primary, Secondary, Tertiary.
- Counter Colour, Heading Colour, Icon Colour
-
The colours applied to the counter value, heading text, and icon. Select from the portal’s theme colours.
- 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.
- Border Radius
-
The corner radius of the widget in px.
Gallery widget
Gallery widgets display a rotating set of images or videos in a compact, resizable format.
| The gallery widget is available in all portal types. |
General tab
- Autoplay Delay
-
The time in seconds each asset displays before the gallery cycles to the next.
- Navigation
-
Controls which navigation controls display in the published widget. One or more of:
| Option | Description |
|---|---|
Arrows |
Displays previous/next arrows for manually cycling through assets. |
Dots |
Displays a set of dots indicating position within the gallery, used for manually cycling through assets. |
Assets tab
- Assets
-
The images or videos to display, added using Add Assets to open the DAM asset picker. Added assets are listed individually, for example
Asset 1andAsset 2. - Image Size
-
Controls how each asset fills the widget. One of:
-
Cover (default): the asset is enlarged to fill the widget entirely.
-
Contain: the asset is scaled to fit within the widget.
-