logo
Solution
How it works
Features
Use Cases
InfluencerCandy
Pricing
Partners
Agencies
Affiliates
Become a Partner
Resources
Blog
Case Studies
Guides
The Ultimate Referral Playbook
Referral Program Checklist
Directory of Referral Programs
Help Articles
Contact Us

Latest from blog

See all posts

How To Plan Your 2023 Budget For Influencer Marketing

Read more

Ecommerce Brands and Experts Share Their Biggest Pet Peeves in the Industry

Read more

How To Retain Customers After Holiday Sales: Shopify Agency Experts Roundup

Read more
  • Login
  • Sign Up
Product
How it works
Features
Use Cases
Influencer Candy
Pricing
Partners
Agencies
Affiliates
Become a Partner
Resources
Blog
Case Studies
Guides
The Ultimate Referral Playbook
Help Articles
Contact Us

Latest from blog

How To Plan Your 2023 Budget For Influencer Marketing

Read more

Ecommerce Brands and Experts Share Their Biggest Pet Peeves in the Industry

Read more

How To Retain Customers After Holiday Sales: Shopify Agency Experts Roundup

Read more
← Back to blog

3 Referral Program Widgets (To Gain More Customer Referrals)

2019 marketing dates
Referral Marketing
Tools
July 6, 2015
Visakan Veerasamy
3 Referral Program Widgets (To Gain More Customer Referrals)

In this article

Example H2
Example H3

In this article

Example H2
Example H3

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 link to their friends via referral 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

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!)

Share this article on
Visakan Veerasamy

Visa is ReferralCandy's former Blog Editor [2013–2018]. He also co-founded Statement.sg, a fashion ecommerce label selling witty t-shirts. He's mildly Internet-famous for his elaborate Twitter threads. He hopes to enjoy a glass of scotch onboard a commercial space flight someday.

Share this article on
  • View all posts
You may also like

How To Plan Your 2023 Budget For Influencer Marketing

Ecommerce Brands and Experts Share Their Biggest Pet Peeves in the Industry

How To Retain Customers After Holiday Sales: Shopify Agency Experts Roundup

© 2022 All rights reserved.
ReferralCandy is a product of Anafore Pte. Ltd
(Reg. no: 200903073C).

Follow Us

  • Facebook
  • Instagram
  • Twitter
  • Bytes of Candy

ReferralCandy

  • How It Works
  • Pricing
  • Blog
  • Setup Guide
  • Case Study

Partners

  • ReferralCandy for Agencies
  • Partner with Us
  • Affiliates

Resources

  • Ultimate Referral Playbook
  • Best Practices and Guides
  • Support Center
  • API

Company

  • About Us
  • Jobs
  • Contact Us
  • InfluencerCandy

Most Popular Posts

  • How to Build a Referral Program That Works in 2022 (With 80+ Examples)
  • How to Choose Referral Program Incentives (With Examples)
  • 22 Successful Shopify Referral Program Examples
  • The Ultimate Referral Widget Guide to Improve Referrals
  • 45 Best Shopify Apps That Increase Sales
  • Here’s What Great Referral Email Campaigns Look Like
  • 20 Examples of Beautiful Referral Email Design
  • 10 Small Business Referral Program Examples
  • How to Set Up a Referral Program for Your Ecommerce Store in 6 Steps
Cookies with the candy
By clicking “Accept”, you agree to the use of cookies to enhance your browsing experience and to analyze the site traffic.
AcceptDecline