---
title: "Embedded Promotions Widget (Cross-Sell and Upsell)"
slug: "cross-sell-widget"
updated: 2025-05-21T11:06:34Z
published: 2025-05-21T11:06:34Z
canonical: "help.csgi.com/cross-sell-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.csgi.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedded Promotions Widget (Cross-Sell and Upsell)

The Cross-Sell and Upsell Widget enables Communication Service Providers (CSPs) to deliver targeted promotional offers directly within the Bill Explainer interface. By leveraging real-time API integration with the CSP’s existing offer management platforms, the widget dynamically retrieves and displays personalized, up-to-date promotions based on customer segmentation.

- The offer API must be owned and managed by the client; CSG does not provide or host this API.
- If the API returns no offer, the widget automatically hides to preserve a clean and distraction-free user experience.

This turns routine billing interactions into meaningful engagement opportunities without duplicating existing offer systems, making Bill Explainer a valuable extension of the CSPs’ promotional channels.

You can create visually distinct promotional areas and customize the widget’s color themes to match specific offers or categories, ensuring a seamless and engaging customer experience.

> ![Note](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Note.png?sv=2026-02-06&spr=https&st=2026-10-26T14%3A17%3A20Z&se=2026-10-26T15%3A17%3A20Z&sr=c&sp=r&sig=iNGioL1mxbup2q0c29SqNhd79Sm%2FAzK5caN6usrKUBw%3D)
> 
> This widget currently supports text-based promotional content only; image-based promotions are not supported at this time.

#### Benefits

- Increases revenue through targeted cross-sell and upsell campaigns
- Enhances customer engagement with timely, personalized offers
- Simplifies offer delivery with real-time API-based content
- Aligns with brand experience via customizable color themes and layout

#### Why It Matters

- **For Consumers**: Offers that feel integrated into the bill, not intrusive.
- **For Businesses**: Revenue uplift with zero manual effort.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/2025-05-14_00-48-05.png?sv=2026-02-06&spr=https&st=2026-10-26T14%3A17%3A20Z&se=2026-10-26T15%3A17%3A20Z&sr=c&sp=r&sig=iNGioL1mxbup2q0c29SqNhd79Sm%2FAzK5caN6usrKUBw%3D)

This widget integrates promotional content into the Bill Explainer through API-based data retrieval, showcasing relevant services or offers tailored to customer profiles. It serves as a non-intrusive, value-adding feature that enhances engagement and opens new revenue channels especially at key moments when users are most engaged with their billing.

#### Default Theme

By default, all cross-sell widgets share the same standard color scheme. This ensures uniformity but may not always align with specific promotions or branding strategies.

#### Adding a Custom Color Theme

Customizing the Cross-Sell Widget allows you to visually differentiate promotions and align them with your brand identity. Follow these steps to create and apply a custom theme to your widgets:

1. **Locate and click** on the “**+**” **icon** in the widget’s settings area. This initiates the process of adding a new custom color theme. where you can define the visual style for your promotional content.
2. **Give your theme a meaningful name** that helps you easily identify it later. For Example: Spring Promo or Holiday Special.
3. **Click on the tickmark to save the theme**, it will be saved as an entry in the widget’s theme list, allowing you to manage multiple themes.
4. **Customize colors** for backgrounds, text, buttons, and borders. Adjust fonts and sizes if supported to ensure consistency with your brand guidelines.
5. **Save your customizations** and preview how the theme looks within the widget. This step ensures your design appears as intended before going live.
6. **After reviewing, publish** the theme to apply it to active cross-sell and upsell promotions. Published themes will be reflected in the live Bill Explainer microsite.

#### Tips for Effective Theme Customization

- Use contrasting colors to ensure promotional text is readable.
- Stick to your brand’s primary color palette for consistency.
- Test your theme on multiple devices (desktop, mobile, tablet) to confirm responsive design.
- Keep the design clean to avoid distracting from the billing content.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/2025-03-25_18-34-54.gif?sv=2026-02-06&spr=https&st=2026-10-26T14%3A17%3A20Z&se=2026-10-26T15%3A17%3A20Z&sr=c&sp=r&sig=iNGioL1mxbup2q0c29SqNhd79Sm%2FAzK5caN6usrKUBw%3D)