How to Enable Referral QR Codes for your Referral Program

Samantha Brown Updated by Samantha Brown

Overview

Friendbuy's Referral QR Codes make it easier than ever for customers to share their referral links. With QR codes, users can share their referral links instantly without needing to share personal details. QR codes can be embedded into referral widgets, customer account pages, and mobile apps. Customers can then download and store their QR codes in Apple Wallet and Google Pay, ensuring easy access when they want to refer friends in person.

Benefits

  • Seamless Sharing: Customers can share their referral links with a quick scan, eliminating the need to manually copy and paste links.
  • Mobile Wallet Support: Customers can store their QR codes in Apple Wallet or Google Pay for quick access.
  • Enhanced Tracking: Track QR code performance, including clicks, sign-ups, and conversions.
  • Custom Branding:Customize the appearance of QR codes in mobile wallets with logos, colors, and branding elements.

How Referral QR Codes Work

  • A unique QR code is automatically generated when an advocate is created and assigned a PURL (Personalized URL).
Standalone QR Codes, Apple Wallet QR Codes and Google Wallet QR codes are different referral link for separate tracking purposes.
  • The QR code links to the destination URL set by the merchant in the Friendbuy platform (i.e. where a referred friend will land after clicking the QR code link on their phones)

Design Your QR Codes for Apple and Google Wallet

  1. Log in to your Friendbuy account
  2. Navigate to Referral > QR Codes
  3. Select Google Wallet to design the interface that your customers will see if they have an Android phone and then select Apple Wallet to design the wallet interface that your customers will see if they are using an iPhone.

Add QR Codes to Referral Widgets & Customer Account Pages

  1. Navigate to Referral > Select a Campaign (or create a new campaign) > Widgets
  2. Select a widget you would like to add the QR code to:
  1. Select View / Edit Widget
Note: Ensure you have the latest widget builder version installed

  1. On the left-hand menu hover over the blue people icon and select Add Friendbuy Component. From here, select the Add to Apple Wallet, Add to Google Wallet, and QR Code components. These will add them to your widget.

We recommend removing the text on the default view of the QR code and adding a text component above that says “Add your unique QR share code to your Wallet”

  1. Adjust each element’s size and position using the X and Y position and height and width tools in the top tool bar.

Below is code you can paste into each component to get it to display like our example:

-----Text CSS------
          
          {
            "fontFamily": "Poppins Regular",
            "top": "339px",
            "color": "rgba(12,12,12,1)",
            "left": "0px",
            "flexDirection": "row",
            "display": null,
            "width": "100%",
            "fontSize": "12px",
            "position": "absolute",
            "height": "16px",
            "visibility": "visible",
            "alignItems": "center",
            "textAlign": "center",
            "paddingRight": "10px",
            "letterSpacing": "0px",
            "justifyContent": "center",
            "lineHeight": "17px",
            "paddingTop": "0px",
            "paddingLeft": "10px",
            "fontWeight": null,
            "zIndex": 2
          }
          
          
          -----QR Code CSS------
          
          {
            "top": "378px",
            "left": "15%",
            "flexDirection": "column",
            "display": null,
            "width": "25%",
            "position": "absolute",
            "height": "80null",
            "borderTopLeftRadius": "0px",
            "fontFamily": "Mackinac Medium",
            "borderBottomLeftRadius": "0px",
            "borderBottomRightRadius": "0px",
            "fontSize": "12px",
            "lineHeight": "16px",
            "borderTopRightRadius": "0px",
            "paddingTop": "0px",
            "zIndex": 2
          }
          
          
          
          -----Apple Wallet Button CSS------
          
          {
            "width": "40%",
            "position": "absolute",
            "top": "376px",
            "left": "45%",
            "height": "45px",
            "display": null,
            "zIndex": 2
          }
          
          
          
          -----Google Wallet Button CSS------
          
          {
            "width": "40%",
            "position": "absolute",
            "top": "434px",
            "left": "45%",
            "height": "45px",
            "display": null,
            "backgroundSize": "contain",
            "zIndex": 2
          }
  1. Check the desktop view and hide all QR elements that are displaying in the desktop view. You can do this by changing their X and Y positioning to 0,0. Their height and width to 0,0 and then clicking the eye icon to hide them on this desktop view. 

Navigate back to the mobile view to make sure the components are still visible on mobile. If not, find the component in the left hand component list. Click on it in the list and then click the eye icon on the top toolbar.

  1. Click Save > then, make sure to click Publish Campaign for the changes to take effect.

How did we do?

Contact