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.

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.

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

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

Login to your Retainful dashboard
Go to Referrals
Click on the "Branding" button to get started

1. Launcher

The Launcher lets you choose the overall theme color, 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. You may also 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.

It also helps you to set the placement of the widget (left or right) and choose in which devices the widget should appear.

Panel Settings:

In the Panel settings, 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

Visitor

You may consider editing the text appearing the the Visitor Widget here.

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

Member

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

You may consider editing the text appearing the the Member Widget here.

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

Launcher Settings:

In mobile devices, only the icon will be shown.

Launcher Icon Appearance: Under the Launcher Settings 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 particular locations

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

To set up display conditions, click on 'Add Condition' and add the conditions.

That’s it! Your Referral Launcher is now fully customized and is ready for launch.

Reward Popups:

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

The Reward Claim popup asks the friend to enter his/her email address to claim the Friend reward.

The Reward Display reveals the reward after the friend enters his/her email address.

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

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

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

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

For WooCommerce: You can embed the referral link in the "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.

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

This is useful when allowing guest customers to participate in the referral program.