The Closable HTML action inserts HTML content relative to a defined element selector. You can close the inserted HTML with a click and can specify a frequency interval at which the content is displayed to site visitors. This action also appends included CSS styles in the
<head> of the page.
Monetate inserts any content added in the HTML field on the page relative to the specified selector. This content gets wrapped in a container
<div> with a unique identifier attribute (ID) that you can use for styling and targeting purposes. Add a
#close click zone to the creative if you want to allow a site visitor to close the banner.
These inputs set a cookie-based lightbox ID to distinguish this action from any other lightboxes or banners with the same ID. The banner with this ID is displayed to a visitor based on the display frequency settings and can be dismissed after it has loaded or on interaction.
Select the basic lightbox identifier number, which must be between 0 and 31, to distinguish an experience's lightbox from any other lightboxes and their display frequencies.
This input, which is based on the lightbox ID, controls the frequency that a lightbox displays for a particular visitor or segment. Several frequency options are available:
- Every page
- Once per session
- Once per thirty days
- Once, ever
- Once every X days
When Interval Should Be Applied
This input determines whether your banner persists until a visitor interacts with it or if the display frequency should happen as soon as the action runs. This setting has two options to give you flexibility to control how persistent the banner should be and how a visitor can interact with and close it:
- After the banner is first loaded: The banner action has fired and content has loaded on the page. On the next page view, a visitor sees the banner.
- After the user closes the banner: The banner action has fired and content has loaded on the page. On the next page view, a visitor sees the banner until they click the close button.
Relative Element Selector and Insert Function
Enter the element selector into Relative Element Selector to determine where the creative is inserted. For additional information on selectors, refer to Element Selectors.
You can adjust where you want the HTML to appear in relation to the selected element using an option from Insert Function:
- After the selected element
- Before the selected element
- Replace the selected element
- First child of the selected element
- Last child of the selected element
- Take over the contents of the selected element
Close Button Selector(s)
Enter any selector(s) for close buttons in the banner HTML content to trigger the close function. The banner remains hidden when a site visitor clicks this button and only appears again based on the interval settings.
Banner Container Styles
Monetate appends anything that you add to the Banner Container Style field as an inline style attribute of this action's container
Monetate appends anything that you add to the Additional CSS Style field 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 element.
Select Multiple Elements
The Select Multiple Elements toggle allows you to apply the action to the first occurrence of the element selector or to all occurrences of the selector, if multiple exist.
Selecting NO applies the action to the first occurrence. Selecting YES applies the action to all occurrences.
Re-Check for Elements
Use the Re-check for Elements toggle to enable or disable polling. If you enable polling, Monetate continues to check for the selected element even if it doesn't initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.
If you disable polling, Monetate only checks for the element once when your page loads.