Start by adding the campaign javascript snippet in your website. You need this in every page where you will add the widgets for this campaign. In the HTML of the page, this code should go near the closing </body>  tag.

Edit your page in Unbounce and click Javascripts at the bottom of the page.

Paste the following script:
<script>!function(){var a=window.VL=window.VL||{};return a.instances=a.instances||{},a.invoked?void(window.console&&console.error&&console.error("VL snippet loaded twice.")):(a.invoked=!0,void(a.load=function(b,c,d){var e={};e.publicToken=b,e.config=c||{};var f=document.createElement("script");f.type="text/javascript",f.id="vrlps-js",f.defer=!0,f.src="https://app.viral-loops.com/client/vl/vl.min.js";var g=document.getElementsByTagName("script")[0];return g.parentNode.insertBefore(f,g),f.onload=function(){a.setup(e),a.instances[b]=e},e.identify=e.identify||function(a,b){e.afterLoad={identify:{userData:a,cb:b}}},e.pendingEvents=[],e.track=e.track||function(a,b){e.pendingEvents.push({event:a,cb:b})},e.pendingHooks=[],e.addHook=e.addHook||function(a,b){e.pendingHooks.push({name:a,cb:b})},e.$=e.$||function(a){e.pendingHooks.push({name:"ready",cb:a})},e}))}();var campaign=VL.load("YOUR_CAMPAIGN_ID",{autoLoadWidgets:!0});</script> 


Make sure to replace YOUR_CAMPAIGN_ID with your campaign ID that you can find in the Installation step of your Campaign Wizard.


Select placement Before Body End Tag:


Save the code.

If you don’t know where you will use the widgets yet, don’t worry, you can do this step later. You will, however, need to add this code in order to see them in your page.

First, a little bit more about the widgets.

Form Widget

This is a simple form widget that you can add in your website so that your website visitors can join your campaign. When the form is submitted, the Form Widget turns to a Sharing Widget, showing the sharing options to the participant so they can invite their friends.

 

If you already have a form that you want to use, check out this article: How to use a custom form instead of the form widget

You can set the Form Widget to redirect to a different page when the form is submitted if, for example, you wish to have the form in one page and the Milestone Widget and sharing options in another. You can set this option from the Form Widget options.

In this case, add the form widget in both pages. After the redirect, the widget will directly show the sharing options.

To add the Form Widget in your page, add the following HTML:

 

                                  <div data-vl-widget="embedForm"></div> 

 

 

where you want it to appear.

First, you need to place your mouse on the custom HTML button and click 

+ hold to drag onto page.  

Like so:


Then, you double-click to edit and enter the HTML code shared above.

Like so:

Select “Save code” and you’re ready!

Milestone Widget

This widget displays the progress of the participant through your campaign. They can see the milestones of the campaign and how far they have gotten in reaching them.

 

It has two forms: expanded and compressed.

You just need to install it once and it will adapt to fit in the page around it. This is useful for showing the widget in smaller screens or just adding in it in a small part of your page, eg. in a sidebar.

To add the Milestone Widget in your page, add the following HTML

                             <div data-vl-widget="milestoneWidget"></div> 

where you want it to appear.

The process is the same as the previous widget, you place your mouse on the custom HTML button and click + hold to drag onto page, you double-click to edit and enter the HTML code, select “Save code” and you’re ready!

Referral Count Widget


This widget is just a counter that shows to the participant the number of referrals they have gotten through the campaign. The referral count is also included in the Milestone Widget but if you’re short on space or would just rather not use the Milestone Widget, then you can use the Referral Count Widget instead.

To add it to your page, add the following HTML:

                                <div data-vl-widget="referralCountWidget"></div> 

where you want it to appear.


Same process for the implementation on your Unbounce website as the previous ones.

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 following script:

<script>!function(){var a=window.VL=window.VL||{};return a.instances=a.instances||{},a.invoked?void(window.console&&console.error&&console.error("VL snippet loaded twice.")):(a.invoked=!0,void(a.load=function(b,c,d){var e={};e.publicToken=b,e.config=c||{};var f=document.createElement("script");f.type="text/javascript",f.id="vrlps-js",f.defer=!0,f.src="https://app.viral-loops.com/client/vl/vl.min.js";var g=document.getElementsByTagName("script")[0];return g.parentNode.insertBefore(f,g),f.onload=function(){a.setup(e),a.instances[b]=e},e.identify=e.identify||function(a,b){e.afterLoad={identify:{userData:a,cb:b}}},e.pendingEvents=[],e.track=e.track||function(a,b){e.pendingEvents.push({event:a,cb:b})},e.pendingHooks=[],e.addHook=e.addHook||function(a,b){e.pendingHooks.push({name:a,cb:b})},e.$=e.$||function(a){e.pendingHooks.push({name:"ready",cb:a})},e}))}();var campaign=VL.load("YOUR_CAMPAIGN_ID",{autoLoadWidgets:!0});</script>

Make sure to replace YOUR_CAMPAIGN_ID with your campaign ID that you can find in the Installation step of your Campaign Wizard.

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 following script:

<script>!function(){var a=window.VL=window.VL||{};return a.instances=a.instances||{},a.invoked?void(window.console&&console.error&&console.error("VL snippet loaded twice.")):(a.invoked=!0,void(a.load=function(b,c,d){var e={};e.publicToken=b,e.config=c||{};var f=document.createElement("script");f.type="text/javascript",f.id="vrlps-js",f.defer=!0,f.src="https://app.viral-loops.com/client/vl/vl.min.js";var g=document.getElementsByTagName("script")[0];return g.parentNode.insertBefore(f,g),f.onload=function(){a.setup(e),a.instances[b]=e},e.identify=e.identify||function(a,b){e.afterLoad={identify:{userData:a,cb:b}}},e.pendingEvents=[],e.track=e.track||function(a,b){e.pendingEvents.push({event:a,cb:b})},e.pendingHooks=[],e.addHook=e.addHook||function(a,b){e.pendingHooks.push({name:a,cb:b})},e.$=e.$||function(a){e.pendingHooks.push({name:"ready",cb:a})},e}))}();var campaign=VL.load("YOUR_CAMPAIGN_ID",{autoLoadWidgets:!0});</script>

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! 

Did this answer your question?