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 the data-prefinery-tester-id attribute is not present, or you set the value of the 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. In the absence of the ref URL parameter, it falls back on the signed-up user's cookie, displaying their referral page.

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'
});

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 like as shown above. 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. In the absence of the ref URL parameter and if you're using the addUser method of the JS Web API to create the user (not the embedded form), it falls back on the signed-up user's cookie, displaying their referral page. 

As shown below, you can also specifically 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'
});
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, navigate to Signup Form > Settings.
  2. Change the answer to "After the form is submitted, what do you want to do?" to "Redirect to a URL", then enter the URL to the thank you page on your site (e.g. https://yourdomain.com/thank-you/ ). Also make sure the "Include user ID in URL" option is enabled.
  3. Save your changes if it hasn't auto-saved yet.

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 Redirect URL (as set via Referral Page > Settings) - 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?