Widgets
Thought for 4s
Customer Portal Widgets Settings
The Widgets section lets you add custom content blocks to the Customer Portal. Widgets can be used to display promotions, announcements, loyalty messages, instructions, or personalized content for customers.
Open the Widgets Settings
From the Customer Portal Builder, select Widgets from the left-side menu.
The Widgets section includes tabs for:
Top
Widgets displayed near the top of the portal.
Bottom
Widgets displayed near the bottom of the portal.
Menu
Widgets displayed in or near the portal menu area.
Tokens
Available personalization tokens that can be used in widget content.
Add or Edit a Widget
Use Add Widget to create a new widget.
Each widget can be opened, edited, saved, cancelled, or reordered. Widgets can also be dragged into a different order using the drag handle on the left side of the widget card.
Widget Status
Each widget has an on/off toggle.
On
The widget is enabled and can appear in the portal.
Off
The widget is disabled and will not appear to customers.
The widget card also shows a status label, such as Disabled, so you can quickly see whether the widget is active.
Subscription Status Display
Turn on Subscription Status to show the widget only when a customer’s subscription status matches the configured condition.
This is useful when you want to display different messages to different customer groups.
Examples:
Placement
Use Placement to choose where the widget appears in the portal.
Top
Displays the widget near the top of the portal.
Bottom
Displays the widget near the bottom of the portal.
Menu
Displays the widget in the menu area.
Widget Type
Use Type to choose the widget size and layout style.
Available widget types include:
Hero Widget - Large
Hero Widget - Medium
Hero Widget - Small
Secondary Widget - Large
Secondary Widget - Medium
Secondary Widget - Small
Use a Hero Widget for primary messages or promotions. Use a Secondary Widget for supporting content or smaller announcements.
Widget Colors
Each widget includes color controls.
Background Color
The background color of the widget.
Border Color
The border color around the widget.
Colors display as hex values, such as:
A value ending in 00 usually indicates transparency.
Content Type
Use Content Type to choose what kind of content the widget displays.
Text
Displays text-only content.
Image
Displays image-based content.
Mixed
Displays a combination of text and image content.
Desktop Text
Use Desktop Text to customize the message shown to customers on desktop devices.
Select the edit icon to open the text editor.
Example desktop widget message:
You can use personalization tokens, such as:
This allows the widget to display customer-specific content.
Desktop Text Alignment
Use the alignment options below Desktop Text to control where the message appears vertically inside the widget.
Top
Aligns the text near the top of the widget.
Center
Centers the text vertically.
Bottom
Aligns the text near the bottom of the widget.
Mobile Text
Use Mobile Text to customize the message shown to customers on mobile devices.
This allows you to write shorter or more mobile-friendly content without changing the desktop message.
Example mobile widget message:
Mobile Text Alignment
Use the alignment options below Mobile Text to control where the mobile message appears inside the widget.
Top
Aligns the text near the top of the widget.
Center
Centers the text vertically.
Bottom
Aligns the text near the bottom of the widget.
Click URL
Use Click URL to make the widget clickable.
When a URL is entered, customers who click the widget will be taken to that page in a new browser tab.
This field is optional.
Example uses:
Preview
The widget preview shows how the widget will look on both desktop and mobile.
Use the preview to confirm that:
Desktop content
The desktop message looks correct.
Mobile content
The mobile message is easy to read.
Colors
Background and border colors match your brand.
Alignment
Text appears in the correct position.
Personalization
Tokens are placed correctly.
Last updated