How to Set Up a Ribbon

William Harper Updated by William Harper

Leverage a Friendbuy Ribbon placement across your site to bring visibility to your Referral program and allow customers to easily start sharing. A Ribbon is a small button that contains a few words of promotional text placed along the border of a web page. When a customer clicks on a Ribbon, they will be shown an Overlay widget that acts as an introduction to your program.

Follow the steps below to design and set up targeting rules for a Ribbon to include in your Referral campaign.

Instructions

  1. A Ribbon can be set up in a Referral Campaign > Widgets tab as either an Advocate Sitewide Overlay or an Additional Widget. Within either section, choose the Use a Ribbon option.

If you set it up in the Advocate Sitewide Overlay section, the Ribbon will be displayed across all web pages by default. You will also have the ability to add URLs or Page Names to ignore so the Ribbon does not show up on specific pages you would like to exclude. Follow steps 2-6 below.

If you set it up in the Additional Widgets section (click the right arrow in the carousel at the top of the screen to see this option), there are additional targeting controls to only show the Ribbon on a select page(s), instead of sitewide. Be sure to include the URLs or Page Names you'd like to show the Widget and Ribbon on.

  1. Select a Ribbon template, which will then open the Ribbon Editor. In the editor, you can see an example design of your Ribbon as well as have the ability to customize the positioning, size, text, and color of the Ribbon. You also have the option to add a Close Button so customers can dismiss the ribbon from your web page. Enter a descriptive Name for your Ribbon template and then click Save.
Note: The Ribbon design can be further customized in the CSS tab within the editor.

  1. (Optional) If there are any web pages you do not want the Ribbon to be displayed on, enter the URL(s) or Page Name(s) in the Ribbon targeting ignore settings. Otherwise, the Ribbon will be displayed across your site.
  1. (Optional) If your Referral program requires customers to be logged into their merchant account before having the ability to share, we can include Ribbon logic to detect if the web visitor is already logged into their merchant account before they click on the Ribbon. If the web visitor is not logged into a merchant account and they click on the Ribbon, we can redirect them to your site's login page.

Select Yes if you only want logged in customers to be able to see the share widget after clicking on the Ribbon.

  • Enter your site's login page URL to redirect customers if they are not logged in when clicking on the Ribbon. This will prompt the customer to login or create an account before they can start sharing.
  • Important: Be sure to include a custom query parameter in the URL, like source=ribbon, so the share widget is only shown to customers that clicked on the ribbon. If you do not include a custom query paramater, all customers that go through your login flow will see the share widget, even if they were not redirected from the Ribbon.
  • After a customer logs in, the share Overlay widget will automatically be displayed on the next page, if your login process is contained within a single web page. For example: if customer clicks on Ribbon from acme.com > is redirected to login on acme.com/account/login > logs into account > lands on acme.com/account then the Overlay widget will appear automatically.
  • However, if your login process has an intermediate page (like a bot detection challenge), the Overlay will not auto-display. In this case, the customer will simply need to click on the Ribbon one more time after logging in to start sharing. Similarly, if the customer needs to create an account before they can log in or the customer goes through a forgotten password flow, then the Overlay widget will not auto-display post-login.

  1. Click Select Widget or View/Edit an existing Overlay widget template to set up what a customer will be shown after they click on the Ribbon. Use the Widget builder to customize the design and content.
  1. Click Save if your campaign is not yet running, or Publish Changes if your campaign is running, in the top right-hand corner of your screen. Be sure to double-check each input is correct before pushing your changes live to the Referral program.

How did we do?

How to update a Widget or Theme to the latest version

How to Set Up an Advocate Landing Page

Contact