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 thedata-prefinery-tester-id
attribute to an empty string, then we will automatically personalize the referral page based on the value of theref
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 theref
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 anyemail
,referral_code
, orid
value. When no user is specified, Prefinery will automatically personalize the Referral Page based on the value of theref
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 theref
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
, orid
. 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.
- From your project dashboard, navigate to Signup Form > Settings.
- 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. - 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.
Link user to your Embedded Referral Page from an email message
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.