Custom Widgets

A Custom Widget in Bill Explainer is a flexible, self-service content block that telecom clients can place in predefined place on the BE microsite. These widgets are designed to:

Display custom messages, promotions, or alerts without requiring developer involvement.
Contain a combination of text, images, and call-to-action (CTA) links.
Optionally include dynamic placeholders that display personalized customer data. For Example: {due_date}, {account_name}
Target specific billing or account conditions using visibility flags. For Example: Is First Bill, Is Last Bill, Auto Pay, Past Due
Provide engagement analytics (views, clicks, CTR) for tracking performance.

The key benefit is speed and control; marketing and operations teams can create, preview, and publish these widgets instantly, instead of filing tickets and waiting for engineering changes.

Adding a New Custom Widget

Follow these steps to create a new widget in Studio:

Access and click on the Studio icon in the left-hand side menu bar.
From the page list, select Landing Page.
Scroll to the bottom of the Landing Page where the Custom Widget section is located.
If there are existing widgets, you will see them listed above the Add Custom Widget (+) button. To add a New Widget, click on the + icon.
Enter a name for the custom widget, then click the tick mark (✔️) icon.

Define Custom Widget Content

When creating or editing a custom widget, you have two main modes: Edit Mode and Reorder Mode. Created custom widget can be enabled or disabled using the toggle.

To rename or delete a custom widget, click the vertical ellipsis (⋮) icon next to its name.

Visibility Flags

The Visibility flag determines when a custom widget should appear, based on specific billing or account conditions.

Is First Bill - Shows the widget only on a customer’s first bill.
Is Last Bill - Shows the widget only on a customer’s final bill.
Auto Pay - Shows the widget only for customers enrolled in Auto Pay.
Past Due - Shows the widget only for accounts with overdue payments.
No Flag Selected - The widget appears for all customers.

You can also combine multiple flags and define the logic using AND or OR conditions:

OR Condition: The widget appears if any one of the selected flags is true.
For Example: First Bill OR Auto Pay - The widget appears if it’s the customer’s first bill or if the customer uses Auto Pay.
AND Condition: The widget appears only if all selected flags are true.
For Example: First Bill AND Auto Pay - The widget appears only if it’s the customer’s first bill and they use Auto Pay.

Edit Mode

Edit Mode is where you add and configure the widget’s content.

Images

Upload promotional banners, icons, or graphics to visually enhance your message.

Accepted file formats: JPG, PNG
Recommended width: 1024px for optimal display quality
Maximum file size: 2MB

Click on the Browse icon to select and upload a file. Once uploaded, a preview of the image will appear on the right-hand side.

Text Block

Add headlines, descriptions, or call-to-action messages.

Insert variables from the list (For Example: name, due_date) to personalize the text for each customer.
Add hyperlinks to guide customers to external pages or related content.
You can also change the style of the text. Hover over the top of the text block a style panel will appear.
Click on Style to view the four available style options.
Change the style as required: Title, Subtitle, Description, or Footnote. If required, you can also change the style color from the Visual Branding section.

To add a new text block, click on the + icon located in front of the Text Block label.

Button

Include action buttons with text, links, or icons to encourage user interaction. For Example: Pay Now, Learn More. These buttons can also be enabled or disabled at any time using the toggle.

Button: Displays as a clickable button on the widget. Button text and button color can be changed from the Visual Branding section.

Label: Enter the name for the button.
URL: Set the target URL for the button.

Link: Displays only as clickable text (no button background).

Label: Enter the name for the link.
URL: Set the target URL for the link.

Icon: Displays only an icon (no text).

URL: Set the target URL for the icon.

Keep button and link labels concise and action-oriented for better engagement.

Reorder Mode

Select the content item (text, image, or button), then drag and drop it anywhere within the list. The updated sequence will be reflected in the preview.

Reordering is available when two or more text blocks are added to a widget.

Reorder Custom Widgets

Enabled or disabled custom widgets are listed here with their current status. To reorder, select the widget and drag and drop it into the desired position in the list.

Published custom widgets are displayed with a lock (🔒) icon and cannot be reordered.

Key Benefits

Faster Time-to-Market - Create, update, and publish messages instantly without waiting for development cycles.
Full Content Control - Marketing and operations teams can manage messaging directly in Studio.
Targeted Messaging - Use visibility flags to show widgets only to specific customer segments (For Example: first bill, past due, Auto Pay).
Dynamic Personalization - Insert placeholders for customer-specific content.
Brand Alignment - Customize text styles, colors, and imagery to match your brand’s look and feel.
Built-in Analytics - Track impressions, clicks, and CTR to measure widget performance.

Documentation Index