Branding for Referral Widget

Learn how to customize the appearance of the Referral Widget Launcher

Retainful comes with a Referral Widget / Launcher. It helps your customers to discover your Referral program easily in your store.

What is a Referral Widget / launcher?

Think of it like a nice, little chat widget sitting at the bottom of your store. When customers click it, it pops up a neat chat like window, showcasing your rewards, the unique referral code of the customers, and their earned rewards.

Referral Program Widget Launcher

Referral Launcher

The widget is quite handy for your customers to discover your Referral Reward program easily.

Benefits of the Referral Widget / Launcher

The widget serves a number of purposes in your store

  • Displays the Unique Referral link to the existing customers

  • Lists the rewards earned by the customers by referring their friends

  • Showcases your rewards

  • Customers can share to social media

How to Customize the Appearance of the Referral Widget

  • Login to your Retainful dashboard

  • Go to Referrals

  • Click on the "Branding" button to get started

Referral Program Branding

1. Theme

This tab lets you choose the overall theme colour, font, placement, spacing etc of the widget.

You can set the overall theme color and font style (black or white) to your referral widget. This will be used across all the screens of the Referral Widget.

Also choose the placement of the widget (left or right) and choose in which devices the widget should appear.

Referral Widget Customisation

2. Panel

In the Panel tab, you can customize/edit the contents of your Referral widget. The appearance and content of the widget varies depending on the customer's status.

Here is a quick video showing how to customize the panel


When the customer is not logged in, the widget will appear like the following:

Visitor content for Referral widget


If the customer is already a registered user, he can login and view his "Unique referral link" and the rewards he has earned

Reward Popups

There are two popups offered in the Reward widget when a friend lands in your store through a referral link:

The first popup asks the friend to enter his email address to claim the referral reward

The second popup reveals the reward after the friend enters his email address

3. Launcher

Under the launcher tab, you can choose your launcher icon and even edit your Launcher icon appearance. Sometimes you might prefer a text-only icon or sometimes just an icon, all those options are available for you to choose from.

Showing Launcher on Specific pages

You can display the launcher widget in specific pages of your store. Example: Shop pages, My account only.

To control the display, you can "Add page rule conditions".

Here is an example:

This will ensure that the launcher shows only in the shop pages (That is, urls containing the word "shop")

That’s it!

Your Referral Widget is now fully customized and is ready for launch.

4. Embed widget

This tab gives you the ability to embed the referral link in custom page for logged in customers.

If you would like to embed the referral link in the specific page for logged in users, you can follow the below steps.

Step 1: Go to Referrals -> Branding -> Embed Widget

Embed widget

Step 2: Copy the 'Embed script', then paste it in your preferred page.

For WooCommerce: You can embed the referral link in "My account" page for logged in customers. To do that, you don't need to copy paste the Embed script.

Just use the 'Show unique referral link in my account page for logged in customers?' option at WordPress dashboard -> Retainful -> Settings.

5. Thank you

In this tab, you can edit the contents of your referral widget that would be displayed in the order summary/thank you page.

Next Steps

Set up a Next Order Coupon automation to drive repeat purchases from your existing customers. Don't leave money on the table.