Table of Contents

Integrating Your User Interface

Amber Liggett Updated by Amber Liggett

Referral Rock offers three solutions for accessing your referral program. You can use any or all of them together. These options are: 

  • Standalone Site. When you activate a program, you'll get your own Referral Rock link that works out of the box. This link can be placed anywhere on your site if you are looking to send traffic to your programs registration portal!
  • Website Widget. The widget option allows you to add an HTML snippet to any button, text, or another linkable object on your site. When clicked, your referral programs' sharing options will pop over the current page in a beautiful overlay for easy sharing on the go. 
  • iFrameThe Referral Rock iFrame code allows you to easily embed your Referral programs sharing widget directly onto your website.

Website Integration Options

Multiple website integrations can be used per program. For example, embedding an iFrame on your business site, sharing the widget link in your emails, and sharing your standalone site on social media.

> Navigation: Main Admin Page > Program > Select Program > Integration

Member Portal 2.0 embed experiences offer sharing options only and do not support the Member dashboard or statistics. For more information, please reference our Member Portal 2.0 Embed Experience article.

Standalone Site

Once you have created a program, it is now time to start using it! Using our Standalone Site, your program to be viewed on its own site. The site is completely responsive and displays well on all screen sizes. 

  1. Click on the Programs tab on the Dashboard or click here.
  2. Select your program.
  3. Copy the Registration Page link under Program Details.
  4. Paste the link to your personal site anywhere!
Every program has its own URL. When integrating a program using a base URL, it's important to make sure the correct URL is being used. Verify the URL by cross-referencing the program name and its details. 

Integrating a Website Widget (Embedded Button)

You can also integrate your referral programs share options within your existing architecture using a website Widget. There are two styles of widget. The simplest is a link that can trigger a pop-up displaying your program over your website.

  1. Click on the Programs tab on the Dashboard.
  2. Select your program name.
  3. Scroll down to the bottom of the page to find the Integration section. Click on the button labeled 'Integrate Widget' and copy the Base URL or proceed to customize using OCA or Default Fill. Additional instructions for each option are shown below.
  4. Paste the link within your personal site. You can add the link by itself or use it as the href of a button, image, or any other object that can act as a hyperlink.

Integrating an iFrame that provides the user Manual registration/Login (Basic)

iFrames allow you to integrate an active Referral Rock programs share options on your own site. This option will allow you more freedom and control over the style of the surrounding page. Customers will be able to register and become members, and members will be able to log in to access their personal sharing link(s) directly from your own site.

Your personal iFrame code can be found on the Program Details page. Scroll down to the Integrations section of the page and select the Integrate iFrame button. Your program code will be listed under the iFrame HTML Code section of the iFrame Integration page.

Click here for more information on the iframe HTML tag.

Integrating with an iFrame with Automatic Access/Login (Advanced)

Integrating an iFrame into your existing website behind a login portal is another great way to make your referral program reflect your branding. You can use this option if you already have user information available via a login area, form or sale confirmation page, or even a URL with user parameters. Then you can pass this information via JavaScript to automatically register and log in your users in an iFrame embedded on your site. This means that when they land on the page with your iFrame, it will already have their sharing dashboard open and ready to go for them. 

This is made possible via the Access Script. You can find this script in Settings IntegrationsMember Access Access Script or by clicking the link here. The script works by replacing an iFrame or anchor link targeted by its id with an automatically generated Referral Rock iFrame that contains the member parameters you pass in. 




The iFrame or anchor link that you want to replace with the automatic access iFrame.


The program you want to display. This field can reference a program's name, title, or the internal Referral Rock Program ID.


The user's email address from your system to allow member creation.


The user's first name from your system to allow member creation. While this can technically be left blank, it is highly recommended for future personalized communication from the Referral Rock platform.

URL Parameters

Customizing your links by adding URL parameters like {NAME} and {EMAIL} can capture identifying information about the user clicking the link. This information can be used to autocomplete the registration form on the registration page or as a single sign-on link that automatically registers the member when clicked.

Auto-Complete Name and Email

You have the option of customizing the link to your referral page so it will autocomplete a name and email address in the registration form. To do this you will have to modify the href of the iFrame. From the iFrame Integration window, as seen above, the code already does this for you to pull the user's first and last name along with their email address.

One Click Access

One Click Access gives you the ability to link to a Referral Rock program on your website or application through a single URL. In one click, you are able to register new members and drive them directly to their Member Dashboard. 

To get started using the One Click Access feature, follow these steps to retrieve your link:

  1. Log into your account and go to the Program details page.
  2. Under Integrations, select either Standalone Site, Widget, or iFrame.
  3. Scroll down to the One Click Access section and copy the Base URL link
  4. Add any desired Parameters to the link. 
  5. Paste this link into your desired location. 

Base URL and Parameters

To customize your Base URL link so that it will pull the necessary information to sign up or login your members, you will need to add parameters to the link. Here is a template of how to configure your One Click Access link:

One Click Access = [Your Base URL] + ?Parameter = value. 

All subsequent parameters are joined by an “&” symbol.

First Parameter and Value: ?programidentifier=1

All following parameters: &firstname=name

 When adding parameters to a Member's Referral page link, they will be added automatically get added onto the Redirect URL.

Tokens Explained

  • firstname - Passed as customer’s first name
  • lastname - Passed as customer’s last name
  • fullname - Full name can be sent as one field and will try to be parsed into first and last name, it’s preferred to use the separate first and last name fields
  • email - Passed as an email address
  • externalidentifier - Typically something unique to the customer like customer/order number
  • amount- Passed order amount/total
  • referralcode - Can set to a member referral code, you can set to “TESTID” for testing
  • phone - Passed as customer’s phone number
  • note- Passed as any note or other information you want to see tied to the Referral
  • publicnote - Passed as any note that you want to be publicly tied to the Referral
  • preferredcontact - Passed as the customer’s selected preferred contact method
  • customoption1name - Passed as a custom dropdown field
  • customoption1value - Passed as a custom value tied to customoption1name
  • customoption2name - Passed as a custom dropdown field
  • customoption2value - Passed as a custom value tied to customoption2name
  • customtext1name - Passed as a custom text box
  • customtext1value - Passed as a custom value tied to customtext1name
  • customtext2name - Passed as a custom text box
  • customtext2value - Passed as a custom value tied to customtext2name
  • customtext3name - Passed as a custom text box
  • customtext3value - Passed as a custom value tied to customtext3name
Each field needs to be individually encoded for links to work. For a better understanding of URL encoding and what an encoded URL looks like, visit If you are using javascript for your coding environment, visit W3 School's page on encoding URLs for more information.

How did we do?

Pre-Approved Member Registration

One Click Access