Links

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 Program Widget Launcher
Referral 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
Referral Program Branding

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
Customizing Referral Widget

Visitor

You may consider editing the text appearing the the Visitor Widget here.
Referral Content- For Visitor Widget Confi
Referral Content- For Visitor Widget Confi
When the customer is not logged in, the widget will appear like the following:
Referral Content- For Visitor Widget
Referral Content- For Visitor Widget

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.
Referral Widget - Member Confi
Referral Widget - Member Confi
When the customer is logged in, the widget will appear like the following:
Referral Widget - Member
Referral Widget - Member

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.
Editing Referral Launcher
Editing Referral Launcher
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.
Option to Show the referral launcher on certain pages
Option to Show the referral launcher on certain pages
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.
Referral Widget-Friend
Referral Widget-Friend
The Reward Display reveals the reward after the friend enters his/her email address.
Referral Widget- Coupon Block (Friend Reward)
Referral Widget- Coupon Block (Friend Reward)

2. Embed Widget

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
Embed Widget
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.

3. Thank you Widget

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.
Thankyou Widget
Thank you Widget

Next Steps