UXi has a built-in Lightbox widget that can be used to create a pop-up window to display a video, form, or inline HTML content. 

With the addition of some custom Javascript and CSS, the Lightbox can be automated to display just once the first time a user visits the site. This can be helpful for forms like a newsletter signup or a quick notification that the user only needs to see once.

Step 1: Add the Lightbox widget

To built an automated Lightbox, first add a standard Lightbox widget to the layout.

What page(s) should the Lightbox display on?

  • If the user should see the Lightbox the first time they visit ANY page on the site, add the widget to a footer layout and make sure the same footer is used throughout the site.

  • If the user should only see the Lightbox on a specific page, add it to that page's layout only.

Step 2: Add the Custom CSS & JavaScript.

Now that the standard Lightbox widget has been added, lets customize it's design and functionality.

Should the user also have the option to manually open the Lightbox by clicking a visible button?

  • To allow the user to manually open the Lightbox, simply configure the widget using button, text, or image settings.

  • If the user should NOT have the option to open the Lightbox manually by clicking a link, hide it with the following CSS.
    #uxi_widget_lightbox2-18 .content { display: none; }

    Keep in mind that the ID must be edited to match the ID of the new Lightbox widget.

When should the automated Lightbox display?
  • If the Lightbox should appear on all pages, no further customization is needed.
  • Use this script in the site's Custom Javascript dashboard. On the second to last line, the 2000 value is used to display the Lightbox 2 seconds after the page loads. Modify as needed.
    if (!localStorage.getItem('viewed')){
      setTimeout(function () {
    }, 2000);};

Use this script to remove the user's option to close the Lightbox without completing the form. This should only be used for mandatory forms like an age gateway, etc.
jQuery(".fancybox-uxi_widget_lightbox2-18").fancybox({modal: true})