Image Lightbox Action

The Image Lightbox action displays an image by filling the screen and dimming the rest of the page with a semitransparent overlay. You can close the lightbox by clicking either the overlay mask or a close button incorporated into the image with a click zone. The action also appends included CSS styles in the <head> of the page.

Required Components

Image Creative

Monetate displays the uploaded creative on the page as part of a full-page overlay. This image supports click zones used either as links or as a close button when you set the click zone URL to #close.

Lightbox ID

The lightbox ID is an identifier number that you select between 0 and 31 that's used to distinguish this experience's lightbox from any other lightboxes and their display frequencies. The cookie-based lightbox ID distinguish this action from any other lightboxes or banners with the same ID. The banner with this ID is then shown to a customer based on the display frequency settings and can be dismissed after it has loaded or on user interaction.

Display Frequency

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

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

If you select Once every 'X' days, then you must specify the number of days in the Days until expiration field in the Optional Inputs section.

Optional Components

CSS Style

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

Lightbox Class

This input appends a class to the lightbox content wrapper for styling purposes.

By default, the lightbox has an ID of #monetate_lightbox_content_container. However, Monetate uses this ID to wrap all lightboxes, so an additional class is useful to apply specific styles only to certain lightboxes.

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 customer's screen from the top of the viewport.

Left Position

This input sets set 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 setting controls the position property of the lightbox content.

If you set this input to NO, then Monetate sets the lightbox position to relative and the lightbox content doesn't scroll with the page. If you set the input to YES, then Monetate sets the lightbox content position to fixed and the lightbox content scrolls with the page.

Overlay Color

This input controls the background-color property of the lightbox overlay mask. It accepts HTML color codes (for example, red), hex color codes (for example, #ff0000), or RGB values (for example, rgb(255, 0, 0)). The default color is #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 default value is 0.6.

Closeable via Overlay

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

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

If you select NO, then you must include a #close click zone. Otherwise, a customer 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.

Animate Open/Close

This setting controls whether the lightbox content fades in. If you select YES, then the lightbox fades in when the customer opens or closes it. If you select NO, then the lightbox appears on the page and closes without any animation.