> For the complete documentation index, see [llms.txt](https://help.checkoutchamp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/customer-portal/setting-up-the-customer-portal/widgets.md). # 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: | Tab | What it controls | | ---------- | -------------------------------------------------------------------- | | **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. | Setting | What it does | | ------- | -------------------------------------------------------- | | **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: ``` Show a reactivation offer to customers with cancelled subscriptions. Show a loyalty message to customers with active subscriptions. Show payment instructions to customers with failed subscriptions. ``` *** ## Placement Use **Placement** to choose where the widget appears in the portal. | Option | What it does | | ---------- | -------------------------------------------------- | | **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: | Widget Type | | ------------------------- | | 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. | Setting | What it controls | | -------------------- | ----------------------------------- | | **Background Color** | The background color of the widget. | | **Border Color** | The border color around the widget. | Colors display as hex values, such as: ``` #FFFFFF #FFFFFF00 ``` A value ending in `00` usually indicates transparency. *** ## Content Type Use **Content Type** to choose what kind of content the widget displays. | Option | What it does | | --------- | ------------------------------------------------- | | **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: ``` Thank you for your loyalty {{firstName}}, Exclusive deals just for you! Shop now and save up to 40% on your favorite products. ``` You can use personalization tokens, such as: ``` {{firstName}} ``` 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. | Option | What it does | | ---------- | ---------------------------------------------- | | **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: ``` Thank you for your loyalty {{firstName}}, Flash sale ends tonight! Save 30% sitewide — shop before it's gone. ``` *** ## Mobile Text Alignment Use the alignment options below **Mobile Text** to control where the mobile message appears inside the widget. | Option | What it does | | ---------- | ---------------------------------------------- | | **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: ``` Link to a sale page.Link to a support article. Link to a subscription upgrade page. Link to a product collection. ``` *** ## Preview The widget preview shows how the widget will look on both desktop and mobile. Use the preview to confirm that: | Review Item | What to check | | --------------- | ---------------------------------------------- | | 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. |