Word-of-Mouth and Referral Marketing Blog

Referral Program Widgets – 3 Tools To Get You More Customer Referrals

Each ReferralCandy account comes with a variety of widgets that you can add to your online store to improve your advocates’ user experience and increase the effectiveness of your referral program.

Widgets are optional and you can implement only the widgets that are useful to you. You can view them from within your ReferralCandy app (my.referralcandy.com/widgets). These widgets are free to use.

An outline of the various widgets is below:

  1. Embedded Sharing Panel: A social sharing panel that can be embedded in your customers’ user account page in your online store. This allows your customers to directly send the referral link to their friends via email, Twitter or Facebook, without logging out of their user account in your store.
  2. Front Page Signup Widget: A widget that can be embedded on your front page (or any page you choose) that shows a popup widget in the corner of the page. This allows individuals to click through to the ReferralCandy Portal Access Page where they can sign up for your referral program, enrolling them as advocates.
  3. Post-Purchase Popup Widget: A widget that shows a social sharing panel popup immediately after your customers make a purchase at your store. This allows your customers to directly send the referral link to their friends via email, Twitter or Facebook.

NOTE: Using these widgets will require some additional technical experience to set them up and not all ecommerce platforms will be able to support them. 

1. Embedded Sharing Panel

The ReferralCandy Embedded Sharing Panel allows you to:

  • Embed a signup widget on your website for your referral program, or
  • Embed a personal sharing widget for each customer on his / her own user account page in your store  (To do this, in the ‘Customization’ section below, add a data-email attribute with the customer’s email address)


An example of what a logged in customer (who is logged into his user account at Acme store) sees when he goes to his account’s Refer-a-Friend page (which shows him the Embedded Sharing Panel) is below:

widget-embedded-sharing-panel-example

​Note: Your referral campaign must be active in order for the Embedded Sharing Panel widget to appear. When your campaign is stopped, the Embedded Sharing Panel will show a transparent panel instead (i.e nothing will be shown).

If your shopping cart platform allows insertion of an HTML/JavaScript snippet (or if you are self-hosting), you can embed a sharing panel in your store.

  1. Go to your Widgets page.
  2. Go to the ‘Embedded Sharing Panel’ section.
  3. Copy the HTML/JavaScript snippet.
  4. Insert into your store’s page just before the HTML </body> tag.

Embedded_Sharing_Panel_Instructions

Customize your sharing panel by changing / adding attributes of the iframe:

  • data-height: Height of the sharing panel in pixels or percentage
  • data-width: Width of the sharing panel in pixels or percentage
  • data-email: Specify this attribute (e.g. data-email=”john@example.com”) to display the sharing panel for a specific customer. Leave this attribute out to display a view similar to your ReferralCandy Portal Access Page.
  • data-fname: (only if data-email is specified) First name of customer (e.g. data-fname=”John”)
  • data-lname: (only if data-email is specified) Last name of customer (e.g. data-lname=”Doe”)

Note: If you are using the data-email, data-fname, or data-lname attributes, be sure to generate the values dynamically to match the customer logged in to your store.

Shopify store owners can use the following dynamic values:
data-email=”{{order.email}}”
data-fname=”{{order.customer.first_name}}”
data-lname=”{{order.customer.last_name}}”

2. Front Page Signup Widget

The ReferralCandy Front Page Signup Widget can be embedded on your website’s front page (or any page for that matter) to show a widget that pops up and floats at the bottom right corner of the page.

The widget (shown in the example below) invites visitors to sign up for your referral program. It contains a button that when clicked, sends them to your ReferralCandy Portal Access Page.

widgets-page-front-page-signup-widget-example

Notes:

  • Be sure to enable new signups through your ReferralCandy Portal if you choose to use this widget. You can change this setting in the “Portal” tab of the Emails & Pages section of your dashboard.
  • Your referral campaign must be active in order for the Front Page Signup Widget to appear. 

If your shopping cart platform allows insertion of a HTML/JavaScript snippet (or if you are self-hosting), you can embed a Front Page Signup Widget.

  1. Go to your Widgets page.
  2. Go to the ‘Front Page Signup Widget’ section at the bottom of the page
  3. Copy the HTML/JavaScript snippet.
  4. Insert into your store’s front page just before the HTML </body> tag.

Front_Page_Signup_Instructions

3. Post-Purchase Popup Widget

Disambiguation: This article is for the Post-Purchase Popup Widget. If you are looking for the Advanced Integration (JavaScript Only + Post-Purchase Popup), please click here.

NOTE: The Post Purchase Popup Widget works alongside the standard integration while the Advanced Integration (JavaScript-Only + Post-Purchase Popup) works in place of the standard integration.

NOTE: This widget may not work on unsupported platforms or platforms that do not provide you with dynamic checkout variables. Please check with your respective platform provider if the required variables are available.

The Post Purchase Popup Widget allows you to show your customers a ReferralCandy Portal sharing panel popup immediately after they make a purchase at your store, similar to the image below:

widgets-popsicle-example

To enable this, you will need to:

  1. Go to your Widgets page.
  2. Go to the “Post-Purchase Popup Widget’ section.
  3. Copy the HTML/javascript snippet.
  4. Edit the data-attributes in the HTML/Javascript snippet to include dynamic checkout variables for the customer. (The snippet is pre-filled with dummy values and you need to replace them with the dynamic checkout variables)
  5. Insert the updated snippet into the purchase completed page just before the HTML </body> tag. For some platforms there may be a ​box for you to insert scripts that you want to run on the “Thank You” page of the checkout process

​​​Note: Your referral campaign must be active in order for the Post-Purchase Popup to appear. 

Post_Purchase_Popup_Instructions

_____

Read next: How To Set Up Your Referral Program Incentives (With 12+ Examples!)

Avatar

Visakan Veerasamy

Visa is ReferralCandy's Blog Editor. He also co-founded Statement.sg, a fashion ecommerce label selling witty t-shirts. He's been thrice named a Top Writer on Quora. He hopes to enjoy a glass of whiskey onboard a commercial space flight someday.

Add comment