Start by adding the campaign Javascript snippet to your website. You will find it in the Installation step of the Campaign Wizard.

You need this in every page where you use the widgets for this campaign. In the HTML of the page, this code should go near the closing </body> tag.

Edit your page in Leadpages and from the left sidebar click Page Tracking and Analytics.

Paste the script at the section Immediately before the closing tag:

Then select Save.

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 where you want it to appear:

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

Like so:

Again, select save!

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.

Like so:

Don’t forget to save.

​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.

Like so:

Save and you’re ready to go!

Did this article help you? Let us know!