Support Center

How do I create a Refer-a-Friend (RAF) widget?

Last Updated: Apr 05, 2017 06:26PM EDT


Creating a Refer-a-Friend (RAF) widget for your campaign is a great way to quickly get ambassadors enrolled in your referral program and sharing your company with their networks. 

How do I create a RAF widget?

Once you’ve added the code snippet to your website, creating a RAF widget is easy! 

Step 1: In the navigation menu on the left, click "Editor." You'll end up here



Step 2: To launch the Visual Editor, enter the URL where you want add your RAF widget, then click the blue “Go to...” button. 


Ambassador will then verify that the snippet code is present on the page before redirecting to your website. 

Step 3: Once your website loads, you’ll notice a navigation bar on the left side of your page. Click the plus button in the top right corner of this navigation bar to add a new integration. 


Step 4: Next, you’ll select “Refer-a-Friend” as the type of integration you want to add. 


Step 5: Enter a name for your RAF widget and select the campaign, then click “Continue.” 

TIP: We recommend creating a naming convention that allows you to easily distinguish between your RAF widgets, conversions and identifiers (ex. RAF - Homepage). 


Step 6: Next, you’ll be prompted to choose when the RAF widget is triggered. 


  • Page Load: This is the most commonly used trigger. After selecting this option, you’ll be taken to Step 7.
  • Click: If you want the RAF widget to load after clicking a particular button on your website, select this option. You’ll then be prompted to choose the button that will trigger it to load.


  • Query Parameter: If you’re storing variables about your user’s sessions in URL parameters, you can utilize query parameters to load the RAF widget. After selecting this option, you’ll enter the query parameter and value. 

  • JavaScript Variable: If you’re storing JavaScript variables about your user’s sessions, you can trigger the RAF widget to load when a variable is set. After selecting this option, you’ll enter the variable name and value. 

Step 7: If you want to create a button that launches your RAF widget as a pop-up, click yes. 


You’ll then choose if you want this button to be embedded in your website or as a tab. For an example of the RAF widget displayed as a button tab, check out the blue “Refer a Friend” button on the right side of our homepage


Your last step if you’re using a button is to select whether the button is displayed as text or an icon. You’ll then be taken to Step 9. 


Step 8: If you do not utilize a button, you’ll be prompted to choose whether your RAF widget is embedded (where it will appear as part of your webpage) or if it will display as a modal pop-up. 


  • Embed: If you select this option, you’ll need to choose where the RAF widget is located. 

  • Modal: If you select this option, you’ll be taken directly to step 9. 

Step 9: After choosing where the RAF widget is located and what will trigger it, you’ll be provided with a summary of your selections. Click “Start Editing” to begin customizing your RAF widget. 


Step 10: Your last step will be customizing your RAF widget. There are three different sections to edit: 
  • Settings: This section will display all of the options you selected in the previous steps. Within the “Advanced Settings” you can select the pages where you want the RAF widget to appear, enable Single Sign-On (SSO) and decide the group ambassadors will be enrolled into. 

  • Prompt: This is where your ambassadors will sign up (or sign in if they’re already enrolled) to refer others. Within this section, you can add your own copy and configure the basic design elements such as adding your brand colors and logo. As you make edits, you’ll see the preview of your RAF widget update in real time. 


  • Widget: The widget section is where you’ll provide default copy for your ambassadors to share their referral link via email and social media channels. As with the “Prompt” section, you can configure basic design elements and copy. 

Step 11: Once you’re done modifying the copy, design and share functionality, click to “Save” your RAF widget. When you click save, you’ll be asked whether or not you want to publish the integration to push it live. 


Please note, you can always return to the Editor to view and edit your integrations by launching the Visual Editor as you did in Steps 1 and 2. When the Editor loads, you will see your available integrations. Simply click the integration you want to edit. 


To publish later, go back into the integration and use the toggle button at the top to push your RAF widget live. 


Other support articles you may be interested in:


Contact Us
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found