Skip to main content
Adding a referral campaign pop-up

Enhance the impact of your referral campaigns through timely and relevant pop-ups

Ana Rincon avatar
Written by Ana Rincon
Updated this week

Introduction

Strategically position your referral campaign pop-up to streamline the referral process and engage customers at the optimal moment. Whether integrated into buttons or set to appear for returning customers, these pop-ups make it easy for users to sign up with a single click!

✨ Referral campaigns are available on the Scale and Plus plans. See pricing β†’


Trigger referral pop-ups from buttons and links

By clicking buttons and links, customers can seamlessly access the referral campaign through a pop-up, without being redirected to another page.

Referral pop-up

These HTML elements will serve as gateways for customers to sign up as advocates of your brand. You can either edit existing elements or add new ones to your theme code.

  1. From your Shopify admin, go to Online Store > Themes

  2. Click on the ... button > Edit code

  3. Decide where you want the referral pop-up to be triggered (e.g. the /account page) and search for the file

  4. Locate the element and add open-rivo-advocate-campaign to its class. If you want to create a new button, use the following code as a reference:

    <button type="button" class="button button--primary open-rivo-advocate-campaign">
    Refer Friends
    </button>
  5. Optional: If you have multiple referral campaigns enabled, add the attribute data-referral-campaign-id="{{referral campaign ID}} after the class for specifying the campaign

    <button type="button" class="button button--primary open-rivo-advocate-campaign" data-referral-campaign-id="5578">
    Refer Friends
    </button>
  6. Save changes.

Visit your storefront and navigate to the page where you added the element. Here's an example of our new button on the /account page.

Account page


Display referral pop-ups to returning customers

✨ Available on the Plus plan only

When a customer re-visits your store after purchasing, they will be greeted with a targeted pop-up that encourages them to enroll in your referral campaign. This approach helps to engage loyal customers, reminding them of the opportunity to refer friends and earn rewards.

Referral pop-up
  1. From your Shopify admin, go to Settings > Checkout

  2. Scroll down to Order status page

  3. Copy the following code and paste it into the Additional scripts box

    <script type="text/javascript">
    var time = parseInt(new Date().getTime());
    localStorage.setItem("ba_msg_active", time);
    try {
    const checkout = window.Shopify.checkout;
    if (checkout) {
    const checkoutTime = new Date(checkout.created_at).getTime();
    const checkoutData = {
    email: checkout.email,
    first_name: checkout.credit_card?.first_name || checkout.billing_address?.first_name || checkout.shipping_address?.first_name,
    customer_id: checkout.customer_id,
    created_at: checkoutTime,
    recorded_at: time
    }
    localStorage.setItem("rivo_recent_order", JSON.stringify(checkoutData));

    let orderTimestamps = JSON.parse(localStorage.getItem("rivo_order_timestamps")) || [];
    if (!orderTimestamps.includes(checkoutTime)) {
    orderTimestamps.push(checkoutTime);
    localStorage.setItem("rivo_order_timestamps", JSON.stringify(orderTimestamps));
    }
    }
    } catch (e) {
    console.log(e);
    }
    </script>
  4. Save changes

  5. From your Rivo Dashboard, go to Referrals > Campaigns

  6. Edit your preferred referral campaign

  7. Within the campaign editor, go to Advanced > Post Purchase Advocate Signup

  8. Check the option Customer return visit advocate signup

    Post Purchase Advocate Signup settings
  9. Under Delay, enter the wait time in minutes before showing the advocate sign-up modal

  10. Under Frequency, enter the number of minutes between showing the advocate sign-up modal again. Set to 0 to display the modal only once

  11. Save changes.

Going forward, Rivo will track your customers' sessions after they place an order, ensuring that the referral campaign pop-up is displayed when they return to your store. To provide a smooth experience, we recommend enabling the post-purchase advocate sign-up modal within a single campaign.

Did this answer your question?