Start by adding the campaign javascript snippet on your website. You need this on every page where you will add the widgets for this campaign.

When editing your page, select "Html" on the top of your page:

After doing so, you'll get this block on your page, where you'll have to select "Edit" and insert your snippets.

At first, start by adding 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's Wizard.

After pasting this script, select done.


Then, you'll have to do the same process about your 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 into a Sharing Widget, showing the sharing options to the participant so they can invite their friends.

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 on your page, add the following HTML:

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


In order to do so, you'll just have to follow the same process mentioned before.


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 the page around it. This is useful for showing the widget on smaller screens or just adding it in a small part of your page, e.g. In a sidebar.

To add the Milestone Widget on your page, add the following HTML:

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

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> 

Getting more help

Check out the rest of the documentation for this template: The Milestone Referral Documentation

You might also want to know how to handle rewards for the Milestone Referral.

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


Did this article help you? Let us know! 

Did this answer your question?