Start by building your website in Instapage. For this example we replicated the page we set up at Viral Loops to give away our #goviral t-shirt. If you haven't already, you should get one too!

We used a "Tempting Giveaway" template there but this guide works just the same for the "Leaderboard Giveaway" and the "Startup Pre-launch" templates.

So, this is what it looks like in Instapage:


Step 1: A bit of code


<script>!function(a,b,c,d,t){var e,f=a.getElementsByTagName("head")[0];if(!a.getElementById(c)){if(e=a.createElement(b),e.id=c,e.setAttribute("data-vrlps-ucid",d),e.setAttribute("data-vrlps-version","2"), e.setAttribute("data-vrlps-template", t),e.src="https://app.viral-loops.com/popup_assets/js/vl_load_v2.min.js",window.ub){jQuery=null,$=null;var g=a.createElement(b);g.src="https://code.jquery.com/jquery-2.2.4.min.js",f.appendChild(g)}f.appendChild(e);var h=a.createElement("link");h.rel="stylesheet",h.type="text/css",h.href="https://app.viral-loops.com/static/vl-loader.css",f.appendChild(h);var i=a.createElement("div");i.id="vl-overlay",i.style.display="none";var j=a.createElement("div");j.id="vl-loader",i.appendChild(j),a.addEventListener("DOMContentLoaded",function(b){a.body.appendChild(i);for(var c=a.getElementsByClassName("vrlps-trigger"),d=0;d<c.length;d++)c[d].removeAttribute("href"),c[d].onclick=function(){a.getElementById("vl-overlay").style.display="block"};var e=a.querySelectorAll("[data-vl-widget='popupTrigger']");[].forEach.call(e,function(b){var c=a.createElement("div");c.className="vl-embedded-cta-loader",b.appendChild(c)})})}}(document,"script","vrlps-js","YOUR_CAMPAIGN_ID","ranking");</script> 

Paste your snippet in the editor and click "Done".

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


Step 2: The popup trigger

You need a button in your page to trigger the popup to open so that your visitors can join the campaign.

While editing a section in your page in Instapage, drag and drop a Code block inside the section, where you want your button to be placed.


Add the following code inside it and click Apply :

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


You can customize the look and feel of the trigger button on the Joining step of this wizard.

Step 3: Ready to launch!

Congrats, you're ready to go! Now just take your page live and it's ready to start receiving visitors who will click the trigger button and join the campaign you just created!


Did this article help you? Let us know!

Did this answer your question?