The lightbox places your giveaway on top of your website content to entice visitors to enter.
By default, the lightbox will display over the page content when a user visits the page you place it on. You can also trigger the lightbox to display when someone clicks on something.

The lightbox uses cookies, so once a user sees it, they won't see it again, unless they view your page from a different browser or they clear their cookies.

Trigger lightbox on click

In order to trigger the lightbox to popup when the user clicks a button or image, use the following code above your lightbox code. Be sure to include the URL of an image in between the img src tag, and be sure to include your lightbox code from your ViralSweep dashboard below this code snippet:

<script>
var vs_lightbox_start_off=true;
</script>
<script async id="vsscript_256_697253" type="text/javascript" src="https://app.viralsweep.com/vsa-lightbox-bc2974-256.js?sid=256_697253"></script>
<a href="javascript:void(0)" onclick="viralsweep_lightbox_256.lightbox_on();"><img src="http://www.clker.com/cliparts/r/P/7/A/z/N/number-1-button-md.png"></a>

Let's break down the code above.

<script>
var vs_lightbox_start_off=true;
</script>

This is the default setting which keeps the lightbox from displaying on page load when a trigger is being used. If you want to have the lightbox display on page load, just change true to false.

<script async id="vsscript_256_697253" type="text/javascript" src="https://app.viralsweep.com/vsa-lightbox-bc2974-256.js?sid=256_697253"></script>

This is your lightbox code that you will obtain from your ViralSweep dashboard. Take note of the number 256 before the .js portion of the code. This is the sweepstakes ID, and you will need this to invoke the trigger.

<a href="javascript:void(0)" onclick="viralsweep_lightbox_256.lightbox_on();"><img src="http://www.clker.com/cliparts/r/P/7/A/z/N/number-1-button-md.png"></a>

This is the trigger portion of the code. Where it says "viralsweep_lightbox_256", you will need to change 256 with your specific sweepstakes ID which is found in your lightbox code as shown above.

The link in between the img tag is the image we are using to trigger the lightbox. Simply change this link to the image that you want to use.

Here is our working example

Now if you want to trigger multiple lightboxes on the same page, you simply need to use the code above but add all of your lightbox scripts and triggers. Here is what that code would look like:

<script>
var vs_lightbox_start_off=true;
</script>
<script async id="vsscript_256_697253" type="text/javascript" src="https://app.viralsweep.com/vsa-lightbox-bc2974-256.js?sid=256_697253"></script>
<script async id="vsscript_161_261559" type="text/javascript" src="https://app.viralsweep.com/vsa-lightbox-e032c8-161.js?sid=161_261559"></script>
<a href="javascript:void(0)" onclick="viralsweep_lightbox_256.lightbox_on();"><img src="https://www.viralsweep.com/custom/lbtriggers/images/clickme1.jpg"></a>
<a href="javascript:void(0)" onclick="viralsweep_lightbox_161.lightbox_on();"><img src="https://www.viralsweep.com/custom/lbtriggers/images/clickme2.jpg"></a>
Here is our working example
If you want to hide the lightbox on mobile so that it only appears for desktop users, use the following code right before your lightbox code:
<script> if ( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { var vs_lightbox_start_off = true;  } </script>

We're here to help

Still having trouble with our lightbox template? Simply click the support or live chat icon to get in touch with us.