Embed the Viral Referral Page on my Site

If you would like to host the Referral Page on your own site — for example, to redirect to a thank you page on your own site after the Signup Form is submitted or to encourage viral referrals elsewhere within your application — then you can do so by following these instructions.

Option 1: Use the Embeddable Widget

1

Ensure the Prefinery JavaScript Snippet is installed on your thank you page.

2

Copy and paste the following code onto your web page where you want the referral page to appear:

<div class="prefinery-viral-referral-embed" data-prefinery-tester-id=""></div>
3

Set the value of data-prefinery-tester-id to the user's unique id.

Note: If you set the value of data-prefinery-tester-id attribute to an empty string, then we will automatically personalize the referral page based on the value of the ref URL parameter, representing the ID of a particular user in your campaign. For this to occur, you need to enable the Include User ID in URL setting when redirecting to your own thank you page, as described in the next step. 

4

Proceed with setting up the redirection from the signup form to this page upon submission

Additional Configuration Settings

Here is a complete reference of all settings you can pass to the referral page embeddable widget. Just add any of these as data attributes to the prefinery-viral-referral-embed div.

Attribute Value Description
data-prefinery-tester-id integer (e.g. 100456) Lookup the user's referral page by their id.
data-prefinery-tester-email string (e.g. "user@host.com") Lookup the user's referral page by email address.

Option 2: Use the JavaScript Web API

1

Ensure the Prefinery JavaScript Snippet is installed on your thank you page.

2

Place an empty div on your web page where you want the referral page to appear:

<div id="referral-page-embed"></div>
3

Call the JavaScript Web API to embed the referral page inside the div.

prefinery('embedReferralPage', {
    dom_id: 'referral-page-embed'
});

As shown below, you can look up the user by email, referral_code, or id. For details, see the JavaScript Web API documentation.

prefinery('embedReferralPage', {
    email: 'bruce@wayneenterprises.com',
    dom_id: 'referral-page-embed'
});

Note: In order to automatically look up the user by their ID when redirecting from the signup form to this page, make the call but only set the dom_id value. Do not set any email, referral_code, or id value. When no user is specified, Prefinery will automatically personalize the Referral Page based on the value of the ref URL parameter, representing the ID of a particular user in your campaign. For this to occur, you need to enable the Include User ID in URL setting when redirecting to your own thank you page, as described in the next step. 

4

Proceed with setting up the redirection from the signup form to this page upon submission

Redirect to your own thank you page when the Signup Form is submitted

You can configure the Signup Form to redirect to your own thank you page after the form is submitted.

1

From your project dashboard, click on the Signup Form link in the left-hand sidebar.

2

Navigate to the Settings tab.

3

Change the answer to " After the form is submitted, what do you want to do?" to "Redirect to a URL".

4

Enter the URL to the thank you page on your site (e.g. https://yourdomain.com/thank-you/).

5

Turn ON the option to include the user ID in the the redirect URL.

If you're redirecting to this page from another integration (your own non-Prefinery form, Zapier, etc.) then just make sure that the user's ID or email address is passed in as a URL parameter so that you can read the value and set either: (a) the data-prefinery-tester-id or data-prefinery-tester-email attribute if using Option 1, or (b) the email, referral_code, or id if using Option 2. You or your developer should be able to help set this up. 

When editing an email message, you have the option to personalize it by making use of variables. One such variable is {{user.referral_status_link}} which tells the Prefinery JS to display the referral page in a popup for the user with that ID (value of ref-check parameter).

If you're looking to direct the user to the embedded referral page (e.g. https://yoursite.com/thank-you/) - not the page set as Referral URL - and make that page display the user's referral stats directly and not in a popup modal, you can utilize the {{user.id}} variable instead and append it as the value of the ref URL parameter (e.g. https://yoursite.com/thank-you/?ref={{user.id}}, not using ref-check this time) like as shown below:

In other words, if you for example have https://yoursite.com/thank-you/ as the page where your referral page is embedded at, you need to link the user to https://yoursite.com/thank-you/?ref={{user.id}}. That variable will automatically be replaced with the user's Prefinery ID (e.g. b0d5cd54-694e-4f79-8ce5-e100c6ec137e).

If you used the data-prefinery-tester-email attribute for Embeddable Widget in Option 1 above instead of data-prefinery-tester-id you can use the variable {{user.email}} (user's email address) in place of {{user.id}}. This also allows you to link the user to the embedded referral page from anywhere besides the Prefinery emails since it only requires their email address as the parameter value.

Still need help? How can we help? How can we help?