Refer Friends Module

The Refer Friends Module Editor allows you to quickly build a customized and intuitive user experience for your referring customers, without the need for any development. Throughout this article, we'll navigate you through accessing, customizing, and embedding the Refer Friends Module on your site.

Before you start

Before going live with your Refer Friends Module make sure to complete these two important steps:

• Set up your Referrals Program settings
• Prepare and configure your Referral Program related emails
  1. If you use Yotpo Triggered Emails, use this guide to help
  2. If you use one of our Email Marketing Integrations, select the guide relevant to you here

Accessing the Editor

Customizing the module

General

Before we get started, let's familiarize you with the module editor at a high level. Please click the dots to learn more about each element:

Layout

In this section, you'll be able to choose which Refer Friends Module layout you'd like to use: Centered, Left, Right, or 'Show as popup'

You must turn on Show as popup if you plan on deploying your module on your post-purchase checkout page. Post-purchase is a great time to convert customers. If you don't turn on "show as popup" you won't be able to display it post-purchase. 

Text & Share Options

In this section, you'll be able to configure the text elements for each of the three referral screens as well as the referral share configurations you'd like to set on your module.

Text

Select the referral screen you'd like to configure from the drop-down to see the content you can make changes to.

In Step 1, you can configure the module header, title, and description. They will all change dynamically in the preview screen to the right.

By default, this step only asks for the referring customer’s email, however, you can also choose to add another field where customers can provide their first name. The name will then be added to the Marketing email share option to make it more personal.

Share Settings

In Step 2, you'll be able to configure the Share Settings present on the Desktop and Mobile versions of your module, as well as customize the messages sent via those different sharing methods.

Referral share methods

With Yotpo Referrals, you can enable your referring customers to share their links via the listed methods. You can even determine which share methods are visible on mobile vs desktop

• Copy Link
• Facebook Post & Messenger
• Twitter
• SMS Text Message
• WhatsApp Text Message
• Email
  • Marketing (default) - this will send the Referral Share Email through either your Yotpo Triggered Emails or through your third-party ESP Integration if you have integrated it with Yotpo
  • Personal - this will enable the referring customer to send the Referral Share Email via their own Gmail, Yahoo, or Outlook account. 

Choose a main share method

You can choose what will be the main share method that your customers will see in this module. You can also have a different method per device (desktop vs. mobile) For desktop users, your main method can be either email or copy link. For mobile users, your main method can be either email, SMS, WhatsApp, or copy link. Here's where you set this up:

Referred customer share message

As you select each sharing method, you'll see the options to customize the message your loyal referring customers can share with their friends.

To help you visualize how this text will look within each sharing method, we've provided sample text and screenshots below:

The only dynamic loyalty properties we support in the Module Editor share messages are:

General Look & Feel

In this section, you'll be able to edit several different aesthetic elements of your Refer Friends Module. Some of the customization options available are:

• Background image
  • We recommend 1920 x 1080 image dimensions and compress your image to optimize load speed. Images must be smaller than 2MB. We support JPG, PNG, SVG, and GIF.
• Background color
• Popup Configuration (only displays if "Show as Pop-Up" is selected in Layout)
  • Show Pop-Up - select how long after the page load you'd like the Referral module Pop-up to appear
  • Show on Exit Intent - toggle this option to trigger the pop-up when we detect the user leaving the browser
• Font Style
  • Add Your Own Font - our module editor supports adding your own custom font to render onto the preview in the editor. To learn more, go to Adding a Custom Font to a Module

• CSS Editor
  • If you'd like to make further customizations to the module, use our embedded CSS editor.
  • If you'd like to make any overriding changes to the referral module CSS, use this class name before the class you want to override:

.yotpo-widget-referral-widget.yotpo-widget-override-css {
}

If you are using the CSS Editor, you may see a notification asking you to update your Module version from time to time. Read more about Module Versions.

Referral History

Let your referring customers track their email referrals by activating your referral History in your module with the click of a button!

Your customers will be able to keep tabs on which friends they've referred, the status of those specific referrals, and the rewards they've earned for completing these referrals!

Once you've activated your Referral History, head into the Text & Design sections to bring your brand voice & look into the module. 

Publishing via  Rewards Page

If you are building your Refer Friends Section with the Rewards Page Builder, follow the steps for publishing your Rewards page.

Publishing as a Module

To publish your Module onsite, you need to embed some code. For embedding a Module on any page other than Checkout, see this guide for embedding modules on your store.

Deploying a module at checkout

Post-purchase is a great time to convert customers. You can display a post-purchase referral request by deploying an instance of the Refer Friends Module to your checkout page. 

For this to work, you must select "show as popup" in the layout section. For this reason, it isn't possible to embed a Rewards Page Builder Section at checkout, you must create a Refer Friends Module to embed it at checkout. 

See below an example of a Refer a Friend module deployed at checkout.

To prepare for embedding Modules at checkout, do the following:

1. Copy & paste this snippet once, and it will serve all the Modules you may want to embed on your checkout page.

<script src="https://cdn-
widgetsrepository.yotpo.com/v1/loader/_5ByCnrcrJV9Ktgfhw_LXQ" async></script>

2. Go to On-site Modules > Refer Friends Module
3. Click Edit the instance you want to publish4. Make sure "show as popup" is turned on in the layout section
4. Click the Publish button
5. Copy the second code snippet and embed it in your site code on your checkout page.

Inactive/Active

If your module is active (green dot), this means that any changes you publish will be reflected on your store if the module snippet is embedded

If your module is inactive (yellow dot), this means that any changes you publish/save will not be reflected on your store. This also means if you had the module snippet embedded and active on your store before, it will not be visible when inactive.

Creating another module

You're all set!

You've just successfully built and deployed your first Refer Friends Module, congratulations! 

You can now go back and create another Module if you'd like to offer a different look & feel between the Refer Friends Module you embed on your customer account page and referrals page, or if you'd like to prepare a special promotional or holiday Module for the future.

Advanced customizations

Some additional customizations can be made to the module if you are savvy with code. See below the advanced options.

The following attributes can be added to your module's code snippet, just after your instance ID.

For example, if your module's code snippet looks like this:

<div class="yotpo-widget-instance" data-yotpo-instance-id="0000"></div>

Then add the attribute here:<div class="yotpo-widget-instance" data-yotpo-instance-id="0000" add-attribute-name=value> </div>If you want to add multiple attributes, add them one after the other, separated by spaces.