All-in-One Lightbox Action

The All-in-One Lightbox action displays HTML by filling the screen and dimming the rest of the page with a semitransparent overlay. The site visitor closes the lightbox by clicking either the overlay mask or a close button included in the HTML via a defined class attribute. This action also appends included CSS styles in the <head> of the page and runs any included JavaScript.

Required Components

HTML

HTML content that you input in the HTML String code editor appears on the page as part of a full-page overlay that dims all other content on the page with a semitransparent mask.

Any HTML content with the proper class binds to the close button function. Close button classes should correspond to the optional close button class input or use the default lightboxClose class. You can also use a link with an href of #close.

Lightbox Width

This input controls the width of the lightbox in pixels.

Lightbox Height

This input controls the height of the lightbox in pixels.

Lightbox ID

The basic lightbox identifier is a number that you select between 0 and 31. It's used to distinguish an experience's lightbox from any other lightboxes and their display frequencies.

Display Frequency

This input works with the lightbox ID to control the frequency that a lightbox is shown to a specific visitor or segment. Several options are available:

  • Every page
  • Once per session
  • Once, ever
  • Once every 'X' days

If you select Once per 'X' days, then you must specify the number of days in Days until expiration, which is in the Optional Inputs section of the action configuration.

Optional Components

JavaScript

Anything you add to the JavaScript editor is appended to your site. Monetate loads it in a <script> tag and executes it when the action fires. Any variables or functions are available on this page for reference by other page elements or additional actions.

CSS Style

Monetate appends anything you add to the CSS editor to a stylesheet in the <head> portion of your site within a <style> block. These styles are available on this page for use with any page elements.

Close Button Class

By default, the HTML lightbox binds a close function to any element within the HTML content with a class of lightboxClose, but you may add an additional close button class with this input.

Top Position

This input sets the distance in pixels of the lightbox content from the top of the viewport. By default, the lightbox content is 15% of the total height of the user's screen, from the top of the viewport.

Left Position

This input sets the distance in pixels of the lightbox content from the left side of the viewport. By default, the lightbox content is centered within the viewport.

Pin Lightbox Position

This input allows you to control the position property of the lightbox content.

If you select NO, then Monetate sets the lightbox position to relative and the lightbox content doesn't scroll with the page. If you select YES, Monetate sets the lightbox content position to fixed and the lightbox content does scroll with the page.

Overlay Color

This input controls the background-color property of the lightbox overlay mask. It accepts any HTML color code (for example, red), hex color code (for example, #ff0000) or RGB value (for example, rgb(255, 0, 0)). The default color is set to #000 (black).

Overlay Opacity

This input controls the opacity property of the lightbox overlay mask. It accepts any value between 0.00 and 1.00. The defaults value is 0.6.

Closeable via Overlay

This input determines whether the lightbox closes when the user clicks on the lightbox overlay mask.

If you select YES, then the lightbox closes when the site visitor clicks the overlay. If you select NO, then the lightbox doesn't close if the site visitor clicks the overlay.

If you select No, then you must include a #close click zone. Otherwise, a site visitor cannot close the lightbox at all.

Days Until Expiration

Only use this input if you selected Once every 'X' days from Display Frequency. This option sets the number of days until the lightbox expires and accepts any numeric value.

Delay Open

This input sets the delay timer in seconds that Monetate waits until launching the lightbox. It accepts any numeric value.