[1] Designing Referral Widgets

Customize the look and feel of your widgets

Written by Support Updated over a week ago

The Widget Builder is where you can customize the look of your widget, along with some of its functionality. This widget will be displayed on your website and your visitors can share with their friends from this widget. To start designing your widget, navigate to the widget and click Edit:

You’ll notice that the widget has several states that your customers will interact with. Use the numbered progress bar at the top of the Widget Builder to toggle to the different states in order to customize them. Let’s talk about each widget state you can customize.

For this example, we're using the Sunset template. If you're interested in a different template, change the template by clicking Change Template in the top bar of the widget builder.

Widget States

Email Message

This is the state that your site visitors will see when the “Email" share channel tab on the widget is selected. We recommend including the incentive that you’re offering, along with a brief and catchy description of your brand/product in the share field. The Friend will see this content written in the share field when she receives the Shared Email.

Facebook

This is the state that your site visitors will see when the “Facebook" share channel tab on the widget is selected. The picture that you upload here, along with the copy that you adjust will appear in as a Facebook post when users share from this state. We again recommend that you include the incentive that you’re offering along with a description of your product or brand.

Twitter Message

This is the state that your site visitors will see when the “Twitter" share channel tab on the widget is selected. The copy you place here will be the default text that will be posted to Twitter when the user shares.

Email Capture

This is an optional setting and may be toggled on/off. If you are offering a referral incentive, we highly recommend leaving this state "on" so that your customers can be contacted with their reward. If you are not offering a reward, the state can be turned "off".

Here's how the Email Capture Field works when it is "on". Friendbuy detects the presence of a user's email after they've shared. Then the following happens:

If the user's email address is present - email capture field is not displayed to the user because you already have it.

If the user's email address is missing - email capture field is displayed to the user for them to provide their address.

Thanks

This state of the widget will appear after your site visitor has completed a share from the widget. Thank your customer for sharing your product!

Shared Email

This is the email that the Friend will receive in their inbox when a site visitor shares via email (this doesn’t apply to Facebook or Twitter shares). We recommend uploading a product or lifestyle image, and to keep in line with the recurring theme – include the incentive that you’re offering directly on the image. If you’re using the default template, the image you upload will be hyperlinked, so you’ll want to add a prominent CTA button as well as the incentive directly on this image (ex. Shop now!).

Button/Ribbon

The last state will vary depending on your display settings (we’ll cover this in step 4). If you have your widget set to a ribbon, you will have the option to customize the location and design of the ribbon. If you have your widget set to an overlay, you will have the option to upload a custom image that will serve as the button to trigger an overlay displaying the widget.

⚠️ All our templates have a desktop and mobile view. Before going live, remember to design both views. Toggle between the two views by clicking on the Desktop or Mobile button in the right side panel of the builder.

Additional Settings

In addition to the widget states, there are other settings that should be configured:

NameThis is the name of your campaign. Only you will be able to see the campaign name so feel free to name it using the naming convention that works best for your team.

Destination URLThis URL is where the Friend (referred customers/friends) will land after clicking through the Advocate's (customer who refers friends) share.

RewardYou can set the Advocate reward amount, notification, and criteria in the Configuration and Criteria sections. The reward amount is how much the Advocate will receive once a Friend successfully converts. The notification is how the Advocate will be notified of her reward - you can set those options with a Reward Email and/or a Coupon Bank. Learn more about configuring those in this article. The reward criteria are the set of rules that the Friend's conversion must pass in order for the Advocate to receive her reward.

User Message RequireFor each share channel, set whether or not users must create a message of their own before sharing.