The lightbox, sometimes called a modal window, overlay, or pop-up refers to a box of content that appears over an active web page requiring some user interactivity before it will go away. It can be an effective solution for targeting audiences by engaging the user with a striking image that floats over the web page with a dimmed background. One of the benefits of using the lightbox is to focus the user’s attention on a single promotion especially on a high traffic web page.Lightboxes are most impactful on highly trafficked webpages on a station website, like the home and TV schedule pages.
The Vegas PBS strategy includes the use of the lightbox for donation promotions only during pledge
The current PBS Bento CMS does not offer a lightbox, and the modal window used on our previous website did not work in the new system. After researching and testing, we created our lightbox smart snippet using the open source Jack Moore’s Colobox jQuery plugin (under the MIT License). Stations are encouraged to share any improvements or enhancements in the functionality of the snippet.
The Colorbox sets a cookie on the user’s browser to only load once a day so frequent visitors will only see the window once per day. We’ve optimized our lightbox for mobile experience by disabling the box from displaying on smaller devices. Google Analytics campaign parameters for tracking image link click-throughs are included in the snippet and will show up in your Google Analytics account.
For non-Bento stations the code, examples and resources are available on the Colorbox website The smart snippet code can also be adjusted by replacing the variables(or editable code) with the appropriate information. Variables are enclosed with double curly brackets. Example of a variable:
For Bento stations, we created a Colorbox smart snippet and the code can be found on Github.
1. Upload the CSS file to your website. There is some additional CSS for the ‘Close’ link in the snippet.
2. Upload the jQuery file to your website. The latest jQuery file can be downloaded from Colorbox Github.
3. Copy the Colorbox smart snippet code from the Vegas PBS Github.
4. Update the Colorbox smart snippet for your station:
· Change the CSS and JS files to reflect where they are stored on your website.
· Change the image alt tag to verbiage appropriate for your station. This image alt tag appears in two places in the snippet.
5. Create a smart snippet in Bento. Check out the PBS documentation for creating a smart snippet.
6. Add the smart snippet to your page and fill in the form.
· Choose the image from the Bento Filer.
· Add the destination page URL.
· Add the Google Analytic Campaign tracking information:
Please note that the Colorbox smart snippet was created with the open source code from Jack Moore. Stations are encouraged to share any improvements on the Colorbox smart snippet by contacting PBS Digital via the Digital Support Portal, or updating it on Github.
Pat Breen | VegasPBS |