All Collections
Building Your Referral Program
Referral Widget Design + Reward Configuration
Setting Widget Display + Adding Widget Code
Setting Widget Display + Adding Widget Code

Controlling your widget's behavior and location

Samantha avatar
Written by Samantha
Updated over a week ago

Along with designing your widget’s marketing copy and creative assets, configuring the display settings correctly plays a key role in a well-performing referral program.

⚠️ If you’re using one of the best practice widgets that came with your account, you don’t need to worry about the display settings since those have been preconfigured for you. To learn more about the best practice widgets, click here. (need link)

Understanding the Display Settings

Your display settings will determine the way your widget is displayed once it’s been installed on your website. You can access the display settings of your widget when you’re viewing the widget details.

There are two widget styles to chose from with additional settings that you can configure for each style:

Overlay Widgets

Overlay widgets appear as a pop-up window, on top of your site’s content. When using this setting, you’ll be prompted to select a call to action that will trigger the overlay widget.

These are the different call to actions you can set when using the overlay style:

  • Link or Image - Link the widget to a link or image on your site

  • Button - Button served by Friendbuy that can be customized in the builder

  • Ribbon - Static ribbon served by Friendbuy that can be customized in the builder

  • None - No call to action

Each call to action has specific display behavior that you’ll be able to customize:

  • Autopop - This display behavior is only available for the Link or Image and Button call to action. Set the overlay widget to appear automatically

  • URL Targeting - This behavior is only available for Ribbon or No call to action. Select which pages the widget should appear or should be hidden.

Embedded Widgets

Embedded widgets appear inline with your site’s content. There are no additional settings that need to be configured if the widget style is embedded.

Now that we’ve covered the different styles, go ahead and customize your widget to display anyway you’d like. If you need help getting started, check out our best practice widgets article to see a breakdown of what display settings to use for each widget.

Installing the Widgets

There are two ways of installing your widget. Depending on the display style and call to action, you may need to install widget code onto a page. The SmartPixel must be installed at minimum in order for the widget to appear on your site, if you haven’t done that yet, learn how here.

Here's a table summarizing all the possible Display Settings and how to install the widget:

Did this answer your question?