iFrame

An iFrame, short for inline frame, uses an HTML code that allows an external website, such as your Referral Program, to be embedded in a designated area within another website. This allows your referral program to be easily viewed on your own website.

iFrame Benefits and Use Cases

If you have a website in place where you would like to showcase your referral program, but would prefer the program to be shown directly in your site rather than through a pop-up such as our widget, then the iFrame option is a great choice. This gives you the freedom to style and brand the area surrounding the iFrame on your site.

With this method you can do a basic installation which would require your members to log in to the program through the iFrame to access their dashboard, statistics, and sharing method. If you already have user information available through a login portal, confirmation page, or perhaps through URL parameters, then you can pass the information using JavaScript to automatically log in (or register, if they have not already) a member within the iFrame. Using the advanced method would allow members to view the page with your iFrame and have it automatically show their individual member sharing dashboard for easy access.

Installation

Basic Installation - Manual Access iFrame

  1. Determine the Program you would like to install the iFrame for here
  2. Select View Details
  3. Scroll down to the Integration section of the page, located in the bottom portion on the right-hand side.
  4. Select Integrate iFrame
  5. Here you can copy the iFrame HTML code for this program and insert it in your website wherever you would like.

Advanced Installation - Automatic Access iFrame

Automatic login to the member's sharing dashboard is made possible by using the Access Script which replaces the source URL of the iFrame with a special access URL. This URL is similar to a One-Click Access link, but the URL created by the Access script is created in a way that is much cleaner and less error prone than trying to create the link directly. Therefore we recommend this method for iFrames over One-Click Access when possible. An example of a member's dashboard automatically accessed through our Access Script is shown below, along with instructions.

  1. Locate the script by navigating to Integrations > Setup > Access Script or by clicking the link here.
  2. Copy the code and replace the following required information:
    1. The {{ELEMENTID}} must be replaced with the ID of the iFrame. This ID of an element is found in the coding on your website.
    2. In this case, we want view: "iframe"
    3. programidentifier: "". To find the Program ID, navigate to the Program and View Details. The ID will be listed under Name.
    4. email or externalidentifier. We recommend the use of email. If email is not used, externalidentifier is required.
Using the HTML code for your iFrame, you can add an ID and use that for the Access Script's reference. For example, <iframe src="UNIQUE URLid="NAME" style="background-color: white; height:800px; width:100%;"></iframe> Using the Access Script and this example, the {{ELEMENTID}} would be NAME.

One-Click Access

If you have the user's name and email address you can automatically register them for your program or automatically log them in if they are already registered. To do this you need to modify the href of the iFrame. The Access Script automatically creates a One-Click Access link, and encodes the link itself. The following method will achieve the same results of automatically logging in the user as the Access Script, but has a higher chance of being prone to errors. We recommend using the Access Script when possible.

To access your One-Click Access code for your iFrame, simply select the code for One-Click Access from the iFrame page as shown below. This code here already inserts the One-Click Access link into the iFrame href for you to automatically log the user in using their first name, last name, and email address.

View our One-Click Access Article for further information.

Autocomplete Name and Email

If you have the users' name and email address you can automatically fill it in for them on the 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.

Each field needs to be individually encoded for links to work optimally. Special characters sent over URL (One Click Access, Autocomplete) may break the URL if it has not been encoded. 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?