Get Started with 6 Steps
Samantha avatar
Written by Samantha
Updated over a week ago

[1] Design your Referral + Sharing Widget(s)

The Widget Builder is where you’ll customize the design and copy of your widget, along with some of its functionality. This widget(s) is displayed on your website, from which your visitors will share with their friends. 

To start designing a widget, go to ‘Widgets’ under the Referral & Sharing menu.
We get you started with 3 out-of-the-box templates, named per recommended site placements: 

  1. Refer-a-Friend Landing Page - a dedicated page to drive awareness of your program. Tip: Include this webpage in the footer of your email communications.

  2. Site-Wide Overlay - implement a site-wide call-to-action to trigger an overlay widget to allow users to refer on impulse. Add link to navigation or use a ribbon.

  3. Post-purchase Overlay - encourage referral after your customers purchase. Set  widget to autopop on order confirmation page.

We recommend implementing all 3 widget placements to optimize referral engagement. You can always switch templates, or create a new widget. Check out our Best Practices guide.

And here’s a complete guide to designing your widgets »

[2] Configure Advocate Rewards

You'll also configure Advocate Rewards within the Widget Builder. You'll see Reward Configuration on the editing panel of each widget variant. Set type and amount, plus set reward criteria to control if and when rewards are distributed. For rewarding via Chargebee or Stripe, make sure you select appropriately from Reward Type, and integrate your Friendbuy account with either billing platform. Check out 3rd party Integrations »

Friendbuy also supports automated reward fulfillment with coupon codes or gift card distribution for both Advocate Reward and Friend Offer (see below for Friend Offer). And for advanced use cases, visit our Reward Webhooks developer docs.

More about reward configuration »            
Plus, a guide to Incentives »

[3] Design your Email Capture widget

Including an Email Capture widget as part of your referral flow for referred Friends is not required, but an optimal solution for most merchants.

If using Email Capture as a part of your referral flow, the widget will be placed on the ‘destination URL’ (where a referred Friends are directed after clicking thru a referral link), that you'll define in your Referral & Sharing widget builder. 

Alternatively, an Email Capture widget can be inserted as an automatic overlay for new site visitors to capture emails, and optionally provide a discount.

This allows you to 1. capture emails of prospective customers and 2. distribute offers in the form of coupons to referred friends or visitors, to encourage conversion. You may choose to not use an Email Capture widget as a part of your program, but check out these use cases for more detail.

[4] Customize Reward and Offer Emails

The Shared Email is taken care of as part of designing the final state of your Referral + Sharing Widget. Now on to customize a Reward Email (for Advocate reward), and Offer Email (to send offer to referred Friend). 

For Advocates, go to Reward Emails within the Referral & Sharing menu, and click 'Create New'. We'll start you with a template to customize, or you can drop in custom HTML/CSS (tip: design in Mailchimp or your ESP to generate). For distributing offers to the referred Friends, go to Offer Emails under the Email Capture menu. 

Check out the {{ coupon_code }} merge variables, set by default if you plan to distribute coupon codes. If you are not using coupon codes, remove the tag.

Now back to the Widget Builders. Make sure within the edit panel for each widget variant you plan to publish, to set correct email template and coupon bank under Reward Configuration (for Referral), and edit panel (for Email Capture) for desired distribution.

[5] Configure Email Sender

In order to allow Friendbuy to send emails on your company's behalf, you'll have to configure your Email Sender and domain name settings (DNS) before launching the referral program.

[6] Add Integration Code

There are 2 key code snippets to get Friendbuy integrated to your entire site: Site Identification + Customer Tracking Javascript, placed in the <head> tag of your site (so it applies on every page), and the Conversion Tracker Javascript, added to your purchase confirmation page. 

Next, you'll copy and paste the Widget Installation Code from the tab on each widget overview (/manage) onto the site pages you'd like to include. Before going live, be sure to 'Publish' the widgets you plan to use in your program (top right of overview page), and 'Republish' after making any updates.

Segment? Awesome. We have an integration that will drop these snippets right into your site for you when using as a Destination. Check it » 

Check out the full guide for Installing the Integration Code »

IMPORTANT: The placeholder values we have inserted into these code snippets MUST BE updated with variables that are specific tO your eCommerce platform.     

Shopify users can use this guide.
Woocommerce players, this is for you.
Bigcommerce, we've got you covered, too.

Did this answer your question?