Integrating Your User Interface

Referral Rock offers four integration options for your referral programs. 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.
  • Widget Link (Embedded Button). The widget option allows you to add an HTML snippet to any button, text, or other linkable object on your site. When clicked, your Referral Rock program will pop over the current page in a beautiful overlay. 
  • Widget Script (Overlay Button). If you want your Referral Rock program to be front and center, add our widget overlay script to your site to get an always-visible referral button on the right side or bottom right corner of your page that launches your referral program when clicked.  
  • iFrame. The Referral Rock iFrame code allows you to easily embed your Referral Rock program 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

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.
  2. Select your program.
  3. Copy the Registration Page link under Program Details. You can also select the Integrate Site button from the Integrations section of the Program page.
  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. 

You can also integrate your referral program within your existing architecture using a website Widget. There are two styles of widget. The simplest is a link that can 

  1. Click on the Programs tab on the Dashboard.
  2. Select your program.
  3. Copy the Widget Link under Program Details. You can also select the Integrate Widget button from the Integrations section of the Program page.
  4. Paste the link to 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.

When a user clicks on the link, a pop-up will display over your website containing your program.

Integrating a Widget Script (Overlay Button)

Similar to the link or button widget above, the Widget Script is a great way to add a "Refer a Friend" button to your website. The difference is that the Widget Script places the button as an overlay.

You can find the onsite widget script in Integrations > Member Access > On-Site Widget Script. Or you can just clickhere. Add the entire script after your closing </body> tag. You can change the button color and text using the widgetcolor and widgettext settings respectively. In addition, you can toggle the widget position to the bottom right of the screen using the "alternate" for the widgetposition setting. The default position is the middle right of the page.

You can optionally add parameters if they are available on your page so that members can be automatically registered/logged-in. If you use the email and firstname parameter, you will be able to register users automatically, without them needing to fill in a registration form. This can provide a nearly friction-less experience for new members of your referral program.

RequiredDescription
programidentifierThe script works for a single program so you must select the program that you want members to be able to access. You can use the program's name, title, or the Referral Rock programID.
RecommendedDescription
emailIf you have the users' email address of the user accessible on the page already you can include the reference to that string here. This will allow users to be registered and logged in automatically instead of needing to enter their email address to sign up for your program.
firstnameIf you want to sign members up right as they click the button and only have their email, you can substitute the email for first name with that setting in the script. That said, having members' first names is very important for future personalization of communication through the Referral Rock platform. 

Integrating with an iFrame with Manual Access/Login (Basic)

iFrames allows you to integrate your live Referral Rock program on your own site. This 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, share your site and track their referrals as well, all from Referral Rock member registration and member dashboard pages that are embedded directly on 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 is a great way to make your referral program reflect your branding. In addition, if you already have user information available (via a login area, form or sale confirmation page, or 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 Link Script. You can find this script in Integrations > Setup > Access Script or by clicking the link here. The script works by replacing an iFrame or anchor link targeted by it's id with an automatically generated Referral Rock iFrame that contains the member parameters you pass in.

RequiredDescription
targetidThe iFrame or anchor link that you want to replace with the automatic access iFrame.
programidentifierThe program you want to display. This field can reference a program's name, title, or the internal Referral Rock Program ID.
emailThe user's email address from your system to allow member creation.
firstnameThe 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. You can do this by modifying the URL of the page your iFrame is in by replacing the {FULLNAME} token with the person’s name and the {EMAIL} token with the person’s email address.

One Click Access

One click access gives you the ability to integrate a Referral Rock program right into your website or application through a single URL. In one click, you are able to register new members and allow existing members to access 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 http://www.url-encode-decode.com/. If you are using javascript for your coding environment, visit W3 School's page on encoding URLs for more information.

How did we do?