There are two ways to integrate the "Refer a Friend" campaign on your Unbounce website:
By embedding the widgets directly in your pages
By a combination of a native Unbounce form and the embeddable widgets of the template
Using the embeddable widgets
Edit your page in Unbounce and click Javascripts at the bottom of the page. Find the campaign Javascript snippet and paste it.
Select placement Before Body End Tag:
Save the code.
Back to editing your page, add a Custom HTML block for each of the widgets you want to use.
Copy and paste the following HTML in your page to embed the Form Widget:
<div data-vl-widget="embedForm"></div>
Copy and paste the following HTML in your page to embed the Reward Widget:
<div data-vl-widget="rewardStats"></div>
Joining with a custom form in Unbounce
Add the campaign snippet
You might want your website visitors to join the campaign using a custom form on your Unbounce website.
First of all, add the campaign Javascript snippet in the page with the form. Edit your page in Unbounce and click Javascripts at the bottom of the page.
Paste the campaign Javascript snippet.
Select placement Before Body End Tag:
Save the code.
Edit the form
Click to edit your Unbounce form and edit the form fields. Add the following two hidden fields:
autoDetect with default value 1
referralCode with no default value
Then, on the right toolbar, click the dropdown in Form Confirmation and select Post form data to a URL. Leave the URL empty for now, we'll come back to it in a while.
Save and publish the page.
Create the referral page
Next, you need a page where your participants will go after the form is submitted in order to invite their friends. Create a new page in Unbounce.
In your new page add the campaign Javascript snippet, as before. Edit your page and click Javascripts at the bottom of the page.
Paste the campaign Javascript snippet and save the code.
Back to editing your page, add a Custom HTML block for each of the widgets you want to use.
Copy and paste the following HTML in your page to embed the Form Widget:
<div data-vl-widget="embedForm"></div>
Copy and paste the following HTML in your page to embed the Reward Widget:
<div data-vl-widget="rewardStats"></div>
Save the page and publish it.
Set the Form Confirmation URL
Now back to your initial page, the one with the form, click again to edit the sign-up form and under Form Confirmation use the URL of the referral page.
And that's all! Now your participants are joining from your initial form, built in Unbounce, and they are redirected to your referral page where they can use the Form/Sharing Widget to invite their friends and the Reward Widget to see what they have won through referrals.
Did this article help you? Let us know! 😊