Skip to main content
All CollectionsIntegrations & Tech SetupEditor IntegrationsIntegration Tutorials
How do I create a Refer-a-Friend (RAF) module?
How do I create a Refer-a-Friend (RAF) module?
Ambassador Team avatar
Written by Ambassador Team
Updated over 3 years ago

Overview

Creating a Refer-a-Friend (RAF) module 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 module?

Once you’ve added the code snippet to your website, creating a RAF module 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 to add your RAF module, 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 module and select the campaign, then click “Continue.”
​
​TIP: We recommend creating a naming convention that allows you to easily distinguish between your RAF modules, conversions and identifiers (ex. RAF - Homepage). 

Step 6: Next, you’ll be prompted to choose when the RAF module 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 module 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 module. 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 module 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 module 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 module 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 module 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 module is located.

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

Step 9: Lastly, you can select to show ambassadors statistics in the RAF module so they can track their performance in your program directly from your module. For more information about RAF module stats, check out our support article: How do I enable statistics in my RAF module?

Step 10: After choosing where the RAF module 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 module. 

Step 11: Your last step will be customizing your RAF module. There are four 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 module 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 module update in real time.

TIP: Want to display a terms checkbox as shown below? Head to the "Body" section and toggle on "Confirmation Checkbox." From there, you can customize the copy and add a hyperlink!

  • 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.

TIP: We recommend enabling the copy share link button as shown below to provide your ambassadors with another way to share. Navigate to the "Header" section and toggle on "Copy Button." From there, you can choose to display the ambassador's share link or share code and customize the button styling! Please note, you should only select to display the share code if you have configured tracking based on codes rather than referral links.

  • Variables: This section is optional; it can be used to pass through additional information contained on the page via JavaScript variables, URL parameters or static text. Options include details such as the ambassador's first name, company or a unique ID. 

Step 12: Once you’re done modifying the copy, design and share functionality, click to “Save” your RAF module. 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 module live. 


​

Other support articles you may be interested in: 

Did this answer your question?