Refer Friends Module

      Refer Friends Module

        Article Summary


        Loyalty & Referrals
        Supported plans

        Free, Pro, Premium, Enterprise

        eCommerce Platform

        Shopify, Shopify Plus, BigCommerce, Salesforce Commerce Cloud, Adobe Commerce (Magento), Custom

        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

        Accessing Via the Rewards Page Builder

        To access and edit the section via the Rewards Page Builder, do the following:

        1. In your Yotpo Loyalty & Referrals main menu, go to Display On-site Rewards Page Builder.
        2. Click Create rewards page or click the existing page you want to edit.
        3. Click Refer Friends section.
        4. Proceed below to the next step, "Customize settings"
        Accessing as a standalone widget

        To access and edit as a Widget, do the following:

        1. In your Yotpo Loyalty & Referrals main menu, go to Display On-site > Referrals.
        2. Go to the Referral section and click Create referral module.

        Customizing the module


        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:


        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.


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

        Is the reward text correct?

        The text in the module does not directly reflect the rewards you have set up in your referral program settings. Make sure that your reward descriptions are aligned with the referral incentives set up in your referral program.

        You can access your referral program settings by clicking the button at the top right corner of the referral modules home screen

        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.

        Setting up emails:
        • If you’re using Yotpo’s triggered emails as your marketing email platform, you can click here to learn how to personalize your emails. 
        • If you have an ESP integration set up, you can add the name value within the ESP platform.

        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:

        Facebook Post & Messenger
        • Title: 
          Earn A Discount When You Shop Today! 
        • Description:
          You’ll love {{company_name}} as much as I do
        • Image:
          Upload your own image
        • What does it actually look like?


        • Tweet: (Yotpo will append the referral link to the end of the tweet by default):
          These guys are great! Get a discount using my link: 
        • What does it actually look like?

        SMS Text Message
        • Text Message: 
          Shop through my link to get a reward {{referral_link}}
        • What does it actually look like?

        WhatsApp Text Message
        • Text Message: 
          Shop through my link to get a reward {{referral_link}}
        • What does it actually look like?


        MarketingTo edit the "Referral Share Email", head back into your Loyalty & Referrals admin > Programs > Triggered Emails. 

        If you are using one of our Email Marketing Integrations, you'll be able to customize your Referral Share Email from within the email marketing platform.


        If you select this option, the option to customize the Email Subject and Email Body will populate within the module editor:

        The referring customer will also be able to alter the message within the Refer Friends Module or within their email provider if they would like too!

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

        Dynamic Property Description
        {{company_name}}This will pull the Company Name you have defined in the "Settings" section of your Yotpo Loyalty & Referrals admin
        {{referral_link}}This will pull the referral link associated with the referring customer

        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.

        Please note:

        Please make sure to use our embedded CSS editor instead of hardcoding directly onto your storefront

        This allows our development team to recognize if any changes we push in the back end will affect the front end of your module. 

        We will not update a specific Module instance if we detect that it will impact your live Module version. Our team can only detect these issues if the CSS is in our editor.

        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. 

        For those using Shopify, publishing at Checkout is only available for Shopify Plus.
        Shopify Plus users must request access to modify their checkout.liquid code. By default, you won't be able to edit your checkout.liquid code, which is why you need to request special access to make changes.

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


        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.

        Advanced attributes

        The height of the widget element. default: 100vh

        Minimum height of the widget element. default: 100%

        When the module is configured to appear on exit intent, what is the distance in pixels from the edge of the page that will trigger the popup. This should be a number. default: 50

        This is the text of the label above the email input field on the 1st screen. The default is: "Enter your email address:"

        This is the text of the placeholder for email input. The default is: ""

        This is the text of the label above the email input field on 2nd screen.

        This is the text of the placeholder for email input. The default is: ","

        This is the text of the copy link share button. The default is: "Copy Link"

        This is the text of the Facebook share button. The default is: "Facebook"

        This is the text of the Facebook share button. The default is: "Messenger"

        This is the text that is shown after clicking on the copy link button. The default is: "Copied"

        This is the text of the twitter share button. The default is: "Twitter"

        This is the text of the sumup line of the referral history table when it is set to be shown. The default is: "{{points}} POINTS"

        This is the text of the completed referral row in the referral history table

        Was this article helpful?