> For the complete documentation index, see [llms.txt](https://help.dollarlabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.dollarlabs.io/dollarback-store-credit/widgets-and-storefront/the-floating-cashback-widget.md).

# The floating cashback widget

{% embed url="<https://dollarlabs.neetorecord.com/watch/c8d6c712c04f95c6091c>" %}

*This article's section starts at 5:32 in the video.*

The floating widget is DollarBack's home base on your storefront: a launcher button in the page corner that opens a tabbed panel where customers check their balance, earn credit, track tiers, share referrals, redeem rewards, and read their history. This page covers activating it and customizing every label and color.

## At a glance

| Touchpoint               | Surface               | What it shows                                                                                                                                                                                   | You can customize                                                                                                                        |
| ------------------------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| Floating cashback widget | App embed (site-wide) | Launcher opening a tabbed panel: balance and summary cards, ways to earn (signup / newsletter / birthday / social forms), tiers and progress, referral link, a Redeem view for rewards, history | Launcher label and icon, all labels and tab names, login prompts, Home card order, panel width, 5 color roles, border radius, custom CSS |

## Prerequisites

* At least one live cashback program; the widget shows earning actions only for programs that exist.
* The app embed enabled; see [Activate widgets in your theme](/dollarback-store-credit/getting-started/activate-widgets-in-your-theme.md).

## Step 1. Turn on the app embed

The widget is an app embed, not a section block: it renders on every page.

1. In the Shopify theme editor, open the app embeds panel.
2. Enable the **Cashback Widget** embed and save.
3. Visit your storefront. The launcher appears in the corner.

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-601723340d97b85e76e4897275a4445d708588e5%2Fdb-theme-editor-app-embeds-annotated.png?alt=media" alt="The Shopify theme editor with the App embeds panel filtered to Cashback, showing the Cashback Widget and Cashback Window Variable embeds switched on, and the storefront preview with a Rewards button in the bottom-right corner."><figcaption><p>Turn on the Cashback Widget app embed in the theme editor and save. The launcher then shows in the corner of every page.</p></figcaption></figure>

## What customers see in the panel

The panel has up to three tabs: **Home**, **Offers**, and **Referral** (all three names are customizable). **Home** is always there. **Offers** shows only when there is something to earn (tiers or at least one program the customer can see), and **Referral** shows only when your referral program is on. With one tab left, the panel shows just that tab.

* **Home**: the customer's balance in the header, then a stack of summary cards: **Tier** (current tier and the next one), **Cashback** (the number of offers available, shown when you don't run tiers), **Referral**, **Redeem**, and an optional **Loyalty page** card (see below). Each card shows only when it has something to show, and tapping a card opens its detail.
* **Offers**: the ways to earn. Your tiers and progress (when you run tiers), cashback offers, discount-code rewards, and the earn cards: **Signup Bonus** (with a **Sign up** button for guests), **Newsletter** (**Subscribe**), **Birthday** (**Add Your Birthday** form), and **Social** (**Follow** buttons with trackable links). Guests see a **Login** button on the Birthday and Social cards instead, because those rewards need a customer account. Cards appear only for programs you actually run. If you run a [review reward program](/dollarback-store-credit/integrations/store-credit-for-submitting-review.md), a **Reviews** section here tells customers what a review earns ("Write a {review} to earn {amount}"). It has no button: the reward is paid when the review comes in.
* **Referral**: the customer's referral code and share options.

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-b08cecfb57ed82ad04e9b62aad66585684865702%2Fdb-cx-widget-home.png?alt=media" alt="The floating panel on the storefront for a signed-in customer: Your Credit $22.33 with a history icon in the header, a Bronze tier card marked Current with Next: Silver, Spend $250.00, a Referral Program card that says You get $5.00, They get $5.00, a Redeem rewards card, and Home, Offers and Referral tabs." width="380"><figcaption><p>A signed-in customer sees their balance at the top of Home, then a card for each program you run.</p></figcaption></figure>

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-2bc8ced122fe0c2d5cb471ad2f638dc27044f2b7%2Fdb-cx-widget-offers-earn.png?alt=media" alt="The lower part of the Offers tab for a signed-in customer: the Bronze tier marked Current, a Birthday card with an Add button, a Social card to follow on LinkedIn with a Follow button, and a Reviews line, Write a product review to earn $5.00, with no button." width="380"><figcaption><p>Signed-in customers get Add and Follow buttons on the earn cards, and the Reviews line has no button.</p></figcaption></figure>

The reward marketplace is not a tab. A signed-in customer opens it from the **Redeem** card on Home (titled **Redeem rewards** by default), which shows only when you have marketplace rewards. The **Redeem** view lists each reward with its cost and a **Redeem** button. A reward the customer can't afford yet shows a note with the credit still needed (by default "Add {amount} more to redeem"), instead of being hidden. The customer's reward history opens from the history icon in the panel header.

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-4de0d0b5862f197e32dfd53b226b168aef8d3072%2Fdb-cx-widget-redeem.png?alt=media" alt="The Redeem rewards view of the floating panel with a Back link and a My codes link, and reward cards for 15% off your next order up to $50.00 and 10% off Cleanse &#x26; Prep on up to 3 items, each with Redeem terms, how long the code is valid, Cost $20.00 and a Redeem button." width="380"><figcaption><p>The Redeem rewards card on Home opens this view, with the cost and a Redeem button on each reward.</p></figcaption></figure>

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-5994b9d9cbca9bf6763341d09b07e16af26caed4%2Fdb-storefront-widget-panel-annotated.png?alt=media" alt="The DollarBack floating panel open on the storefront for a signed-out visitor, showing the Unlock your rewards prompt with a Login button, a Cashback card, and Home and Offers tabs along the bottom." width="560"><figcaption><p>A signed-out visitor sees a sign-in prompt and cards for the programs you run.</p></figcaption></figure>

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-464e923998e7542a1749636c8a5af139fe8067cd%2Fdb-p2-wi-storefront-offers-annotated.png?alt=media" alt="The Offers tab of the floating panel for a signed-out visitor, with a Cashback offer, and Birthday and Social cards that each have a Login button." width="560"><figcaption><p>On the Offers tab, a signed-out visitor sees each way to earn. Cards that need an account show a Login button.</p></figcaption></figure>

Logged-out visitors see login prompts instead of personal data; those prompts are customizable too.

{% hint style="info" %}
**Custom (API)** programs never show in the panel, on the loyalty page, or in the sign-in prompt for guests. Your server decides when they pay, so there's nothing for a customer to act on. See [Custom rewards via API](/dollarback-store-credit/earning-cashback-programs/custom-rewards-via-api.md).
{% endhint %}

## Step 2. Customize labels and content

Go to **DollarBack admin → Customize → Cashback widget**. The editor has five tabs:

| Tab                 | What it controls                                                                                                                                |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **Floating Button** | The launcher's **Button label**, **Position** (**Bottom right** or **Bottom left**), and **Icon** (**Wallet**, **Gift**, **Star**, or **Coin**) |
| **Home**            | The **Card Order** of the Home tab, and the **Show loyalty page card** checkbox                                                                 |
| **Appearance**      | Colors, border radius, and panel width (see Step 4)                                                                                             |
| **Content**         | Every text label in the panel, grouped into sections (table below)                                                                              |
| **Advanced**        | **Custom CSS**                                                                                                                                  |

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-f075ba3c36eedd973031bcb2129d8b5ed529a56e%2Fdb-widget-editor-overview-annotated.png?alt=media" alt="The Cashback widget editor with the Content tab open, showing the Header and Login sections, and a Preview card with tabs Widget Panel, Floating Button, Logged Out, No Tiers, Redeem rewards and Membership."><figcaption><p>The Cashback widget editor splits its settings into tabs. Home, Appearance, Content and Advanced are under More views, and the preview on the right updates as you type.</p></figcaption></figure>

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-62bdc90ffa395a70f6380c4bdd993599421a392a%2Fdb-p2-wi-widget-floating-button-annotated.png?alt=media" alt="The Floating Button tab of the Cashback widget editor with the Button label, Position and Icon fields, and the More views menu next to the tab." width="560"><figcaption><p>The editor opens on the Floating Button tab. Set the launcher text, its corner and its icon here.</p></figcaption></figure>

The **Content** tab is grouped into sections, each mapping to part of the panel:

| Section                                                                             | What it controls                                                                                                                                                                                                                                                                                                                                                                                                         |
| ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Header                                                                              | The **Credit label** shown above the balance                                                                                                                                                                                                                                                                                                                                                                             |
| Login / Logged out                                                                  | Prompts and buttons shown to guests                                                                                                                                                                                                                                                                                                                                                                                      |
| Navigation tabs                                                                     | The names of the Home / Offers / Referral tabs                                                                                                                                                                                                                                                                                                                                                                           |
| Cashback                                                                            | The cashback offers section title, offer descriptions, and the applies-to toggle                                                                                                                                                                                                                                                                                                                                         |
| Earn credit descriptions                                                            | The copy on the birthday, social and review cards                                                                                                                                                                                                                                                                                                                                                                        |
| Discount rewards                                                                    | The heading and wording of discount-code reward offers. The reward itself is worded by the shared [Reward marketplace text](/dollarback-store-credit/spending-store-credit-and-rewards/set-up-the-reward-marketplace.md#word-your-rewards-reward-marketplace-text)                                                                                                                                                       |
| Signup labels / Newsletter labels / Birthday labels / Social labels / Review labels | Each earn card's heading and button text                                                                                                                                                                                                                                                                                                                                                                                 |
| Tiers / Tier labels / Tier unlock requirements                                      | Tier reset text, badges, progress text, and requirement strings (for example the spend requirement supports `{amount}`)                                                                                                                                                                                                                                                                                                  |
| Referral                                                                            | Referral tab headings and share copy                                                                                                                                                                                                                                                                                                                                                                                     |
| Offers count                                                                        | The "offer available" / "offers available" text on the Home **Cashback** card                                                                                                                                                                                                                                                                                                                                            |
| Redeem rewards                                                                      | The Home **Redeem** card, and the Redeem view: title, cost label, **Redeem** button, **Insufficient-balance note** (`{amount}` is the credit still needed), success and empty states. The reward descriptions and their conditions come from the shared [Reward marketplace text](/dollarback-store-credit/spending-store-credit-and-rewards/set-up-the-reward-marketplace.md#word-your-rewards-reward-marketplace-text) |
| Reward history                                                                      | The history view: title, filters, and detail labels                                                                                                                                                                                                                                                                                                                                                                      |
| Loyalty page card                                                                   | The wording of the Home card that links to your loyalty page                                                                                                                                                                                                                                                                                                                                                             |

Every string in these sections is translatable per language; see [Translate your widgets](/dollarback-store-credit/widgets-and-storefront/translate-your-widgets.md).

### Credit history filters

The **Reward history** section names the filters on the history popup. There are four: **All**, **Store credit**, **Discount codes**, and **Referral**. The last of these separates referral earnings out of the general store-credit list, so a customer can see what their referrals have actually paid them. Each filter's label is yours to change, along with the popup title, the empty and error states, and the labels on each detail row (program, reason, order, order total, expiry, code).

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-80654e1659ba11e84182cbd06e43ab7f6e903d29%2Fdb-cx-widget-history.png?alt=media" alt="The Reward History view of the floating panel with the filters All, Store credit, Discount codes and Referral, and rows for a referral reward, a review reward, cashback from an order, credit redeemed at checkout, bonus credit and a redeemed reward, each marked Credit or Debit." width="380"><figcaption><p>The history icon in the panel header opens Reward History, where your customers filter by type.</p></figcaption></figure>

### Link to your loyalty page

If you run a [loyalty page](/dollarback-store-credit/widgets-and-storefront/set-up-the-loyalty-page.md) as well as the widget, the widget can point at it rather than competing with it. On the **Home** tab of the editor, tick **Show loyalty page card**. Then set the wording in the **Loyalty page card** section of the **Content** tab: a **Home card label** and a **Home card detail** line. The card appears on the Home tab for signed-in customers and opens the loyalty page.

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-52c9ed9297fb73c43437a9980d39419f72e51417%2Fdb-p2-wi-widget-loyalty-card-annotated.png?alt=media" alt="The Loyalty page section of the Home tab with the Show loyalty page card checkbox, which is not ticked." width="560"><figcaption><p>Tick Show loyalty page card on the Home tab, then write the card text in the Content tab.</p></figcaption></figure>

{% hint style="warning" %}
**Show loyalty page card** is off by default. Until you tick it, the widget does not link to your loyalty page.
{% endhint %}

This is worth doing if your loyalty page carries content the widget doesn't — a rich program explainer, tier benefits laid out in full, or membership. It keeps the widget as the quick check on a balance, and gives customers who want the whole story somewhere to go.

## Step 3. Reorder the Home cards

On the editor's **Home** tab, **Card Order** lists the Home tab's cards, such as **Tier**, **Cashback**, **Referral**, **Redeem**, and **Loyalty page**. Drag them to reorder how they appear on the Home tab. Put the card you most want customers to open first.

## Step 4. Style it

The **Appearance** tab has five color roles plus shape controls. Position is on the **Floating Button** tab.

| Control          | Effect                                      |
| ---------------- | ------------------------------------------- |
| Primary color    | Launcher button, header background, accents |
| Secondary color  | Subtle backgrounds                          |
| Panel background | The panel's background                      |
| Text color       | Body text throughout the panel              |
| Accent color     | Active nav items and highlights             |
| Border radius    | Corner rounding, 0–30                       |
| Panel width      | Panel width, 280–440 px                     |

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-cd6654021d3f294112420fb7af8e1ac700a84d74%2Fdb-p2-wi-widget-appearance-annotated.png?alt=media" alt="The Appearance tab of the Cashback widget editor with five color fields, a Border radius slider set to 12px and a Panel width slider set to 380px." width="560"><figcaption><p>The Appearance tab holds the five colors and the two shape sliders.</p></figcaption></figure>

For anything beyond these, use the **Custom CSS** field on the **Advanced** tab. Its CSS is added inside a `<style>` tag on the storefront, so your rules load with the widget on every page.

To replace the launcher button's icon, or any of the illustrations inside the panel, see [Icons & images](/dollarback-store-credit/widgets-and-storefront/icons-and-images.md).

## Working with the preview

The preview beside the settings form is live, and two things make it faster to work with than it looks.

**Click any text in the preview** to jump straight to the field that controls it. Faster than scanning a long settings form for the one string you want to change, particularly for labels deep in the tier or history sections. The editor switches to the tab that holds the field.

**Switch the preview to a guest** to see what signed-out visitors get. A dropdown offers seven scenarios — **Everything**, **Sign-in only**, **Cashback**, **Referral**, **Cashback + Referral**, **Tiers**, and **Membership** — so you can check the signed-out panel against each combination of programs without opening a private window or signing out. **Sign-in only** is the strictest case: nothing but the login prompt, which is what a guest sees when no program is visible to them.

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-b2e9411dd7a51d6fd6251d44db6ca47d140aaffd%2Fdb-widget-preview-guest-annotated.png?alt=media" alt="The widget preview set to Logged Out with the scenario chips Sign-in only, Everything, Cashback, Referral, Cashback + Referral, Tiers and Membership, above a panel that asks the guest to log in."><figcaption><p>Click Logged Out, then a scenario, to check the signed-out panel for each mix of programs without leaving the admin.</p></figcaption></figure>

## Prefer a menu item to the floating button?

If the floating launcher clashes with your navigation, a chat bubble, or a cookie banner, you can hide it and open the same panel from a header menu item or your own button instead. See [Open the widget from a menu link](/dollarback-store-credit/widgets-and-storefront/open-the-widget-from-a-menu-link.md).

## Verify it works

1. Open your storefront in a private window: the launcher should show, and the panel should show logged-out prompts.
2. Sign in as a test customer: the Home tab should show the balance, and the Offers tab only the earn cards for programs you run.
3. Change a color and the card order in the admin, save, and refresh the storefront to confirm both apply.
4. Earn a referral reward on the test account and open the history popup: the **Referral** filter should isolate it.

## Common issues

* The launcher doesn't appear: the **Cashback Widget** app embed is off, or the theme was switched. See [A widget isn't showing on my store](/dollarback-store-credit/troubleshooting-and-faq/widget-isnt-showing.md).
* An earn card, or the whole Offers tab, is missing: the matching program is paused, outside its date window, or doesn't exist. See [Cashback program types at a glance](/dollarback-store-credit/earning-cashback-programs/cashback-program-types-at-a-glance.md).
* The balance looks stale after an order: check the trigger and holding period. See [When credit is issued](/dollarback-store-credit/earning-cashback-programs/when-credit-is-issued.md).

## Related articles

* [Activate widgets in your theme](/dollarback-store-credit/getting-started/activate-widgets-in-your-theme.md)
* [Open the widget from a menu link](/dollarback-store-credit/widgets-and-storefront/open-the-widget-from-a-menu-link.md)
* [Set up the loyalty page](/dollarback-store-credit/widgets-and-storefront/set-up-the-loyalty-page.md)
* [Set up the reward marketplace](/dollarback-store-credit/spending-store-credit-and-rewards/set-up-the-reward-marketplace.md)
* [Translate your widgets](/dollarback-store-credit/widgets-and-storefront/translate-your-widgets.md)