Start by building your website in Unbounce. 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 Unbounce:


Step 1: A bit of code

While editing your page in Unbounce, click Javascripts at the bottom of the page and add the JavaScript snippet for your campaign:

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

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 your page in Unbounce, drag and drop a Custom HTML block inside the page, where you want your button to be placed.

Add the following code inside it and click Save Code :

                    <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! Just save and publish your page 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?