How to brand the widget panel, launcher and referee popup

The widget is the part of your programme most customers actually meet: a launcher button that sits on your storefront, a panel that opens when they click it, and a popup that greets a friend arriving on a referral link. All three belong to a branding theme.

Open Referral program → Campaigns, open the campaign, then Branding. Pick the theme you’re working on and choose Customize. Under Widgets and popups, the Referral widget card edits the launcher (the Widget button) and the panel (the Widget popup) together, and the Friend popup card edits the referee popup.

Best practice

Treat the launcher as advertising and the panel as the product. Keep the launcher quietly visible on high-intent pages (cart, product), and make the panel polished enough that sharing feels worthwhile.

What tends to win

Element	What tends to win
Panel background	A clean, light background
Imagery	Product-focused creative over lifestyle photos
Reward framing	Lead with the referee’s reward first — reads as a favour, not a pitch
Launcher copy	A specific, value-led label (“Give $10, get $10”) over a generic one
Launcher placement	A quiet presence on cart and product pages, not sitewide

These are broad testing patterns, not measured Bloop numbers — confirm them on your own traffic with an A/B test. The underlying rule: simpler and product-led wins.

Turn the widget on or off

The top of the Referral widget editor holds one switch, Referral popup on your storefront. On, visitors can open the referral popup anywhere on your store. Off, the button and the page rules do nothing, and the popup only opens for visitors arriving on a referral discount link. Your popup behavior, appearance and content still apply to those visitors.

If your target audience is a customer segment or has excluded segments, choose Hide the referral program completely under Customers outside the audience to hide the popup and launcher from logged-in customers who don’t qualify. Guests and your referral page are not affected.

Style the widget panel

The Referral widget editor has a live preview you can flip between Desktop and Mobile, and five tabs: Widget button, Popup behavior, Popup appearance, Popup content and Custom code. The first two are covered below.

Popup appearance sets the look:

Setting	Options
Background	A solid colour, an uploaded image, or no image at all
Header text	Colour of the headline
Body text	Colour of the running copy
Button background / Button text	The call to action
Corner style	Square or rounded

Background images accept .jpeg and .png up to 20 MB. No Image is worth trying deliberately: a flat, single-colour panel loads instantly and keeps attention on the reward.

Popup content holds every string a customer reads in the widget panel, grouped by the step they’re at:

Step	What you write
Referral signup	Title, subtitle, the “They get” / “You get” labels and reward values, email placeholder, button text, invalid-email message, and the “Your offers” label
Referral share	Title, subtitle, the “Or share” label, copy-button text, referral code label, track-referrals link, link-sent confirmation
Share by email	Title, the “To” label and hint, message label and hint, referral code label, send-invite button

The Friend popup has its own Content tab with the other two steps: Claim reward (title, subtitle, email placeholder, button text) and Reward ready (title, subtitle, reward value label, copy-button text, button text).

Content saves per language. With automatic translation on for the campaign, each customer sees the text you wrote for their language, or Bloop’s built-in wording if you wrote none, so write every language you care about. With it off, everyone sees your default language. The language selector appears only when automatic translation is on; see campaign language settings.

Custom code takes CSS and JavaScript that run on your live storefront, on both the widget button and the popup, within a size budget the editor shows as you type. Preview runs your snippet in the editor preview only; you still have to save to put it on the storefront. Bloop support can’t debug or fix custom code, and a broken snippet can change how the panel looks or stop it working. Reach for this only when the fields above genuinely can’t express what you need.

If your code shows its own text, keep that text in Custom text slots instead of hard-coding it. Reference a slot from CSS with var(--bloop-slot-my_key) or from JavaScript with BLOOP.t('my_key'), save, and a field for that key appears under Custom text, translated per language like the rest of the content. Keys must be lowercase.

Configure the widget launcher

The Widget button tab sets whether the launcher shows at all, and how it looks:

Section	What you set
Widget button	Show the widget button, or Hide it. Hidden, nothing shows on the storefront until the popup opens by itself or from a link or button of your own
Generals	Button title, colour, and icon: Bloop’s default or your own upload (.jpeg, .png, .ico, under 20 MB)
Placement	Bottom right, Bottom left, or Custom (drag the button on the preview, separately for desktop and mobile). Button rotation turns it into a side tab: none, tab left, or tab right
Display	Per device: Icon and Text, Only icon or Only text, set separately for desktop and mobile
Border	The launcher’s corner style

A value-led title (“Give 10%, get 10%”) earns more clicks than “Rewards”.

If you hide the button, turn on auto-open (below) or add your own link or button, otherwise nothing opens the popup. A visitor who closes an auto-opened popup can’t reopen it without your own link or button. To open the popup from your own link or button, contact support and we’ll set it up with you.

To start a share from a product page, add the Referral Share Button; it opens this same popup.

Open and close the popup by itself

The Popup behavior tab controls what happens without a click:

Setting	What it does
Auto-open popup on page load	Opens the referral popup when the page loads, instead of waiting for a click on the widget button
Wait before opening	Seconds to wait after the page loads before the popup opens (shown when auto-open is on)
Close the popup automatically	Closes the popup by itself after the number of seconds you set, if the visitor hasn’t closed it

Auto-open is the loudest setting on this page. Pair it with a short delay and an auto-close, and limit it to the pages where it earns its place.

Choose which pages show the launcher

Where it appears sits under both tabs and has three modes:

Mode	Use it when
Show on all pages	You want maximum reach and your storefront isn’t crowded
Show only on selected pages	You want the launcher only where intent is high, such as cart and product
Hide on selected pages	You’re happy sitewide except for a few pages (checkout-adjacent, landing pages)

Pick from Home, Cart, Product, Collection and Search pages, or add a specific URL for anything else. With the button hidden, these rules decide where the popup can open at all: on an excluded page, your own link or button won’t open it either.

On the Legacy theme (v1), the widget popup and the widget button are separate cards, and the button’s settings also include a Display duration after which it disappears.

Customize the referee popup

Friend popup is what a friend sees when they land on a referral link: your first impression with someone who has never bought from you. It opens the same editor as the widget, with Appearance, Content and Custom code tabs.

Lead with the reward they’ve just unlocked, name who sent it, and keep it to one button. This is the highest-leverage copy in the whole programme: every referred visitor reads it, and nothing else you write reaches a colder audience.

Common mistakes to avoid

• Editing the applied theme to try something out. Duplicate it, change the duplicate, apply it when you’re happy — see branding themes.
• Over-branding the panel. A crowded, heavily styled popup converts worse than a clean one.
• Burying the reward. Lead with the value in both the launcher title and the panel headline.
• Leaving the launcher sitewide on a busy storefront. Use Where it appears to put it where intent already is.
• Solving layout problems with custom CSS. A snippet that fixes your theme today breaks on the next release.

Next steps

• Manage and apply themes in Branding themes.
• Give customers a permanent destination with the referral page.
• Prompt buyers right after checkout with the post-purchase widget.
• Confirm a design or copy change with A/B testing.