- TLC Home Home
- Discussions & Ideas Discussions & Ideas
- Product Guides Product Guides
- Knowledge Base Knowledge Base
- Developer Docs Developer Docs
- Education Education
- Blog TLC Blog
- Support Desk Support Desk
The Modal Offer extension enables the insertion of a modal overlay on any pages to alert the user of promotions, call to actions, or offers.
See the full list of available extensions.
In this article:
The Modal Offer extension generates a modal pop-up window on the page. The content and appearance of the pop-up is configured based on the Modal Publish Mode selected:
The pop-up is launched based on the condition applied to the extension.
Example modal pop-up with placeholder content:
The extension runs in the DOM Ready scope on every page, but only runs when the defined condition evaluates to true.
To begin setting up the Modal Offer extension be sure to have the content of the modal prepared so that you're ready to enter it into the configuration.
Once the extension is added, the following configuration options are available:
<body>
element.To configure the modal pop-up in custom mode edit the CSS code for modal window styling definitions, and the HTML code for the modal window template.
The CSS and HTML contain placeholders in the form of ##VALUE##
that reference the settings from the standard publish mode. For example, ##MDLWIDTH##
refers to the "Window Width" setting. Replace these placeholders with your own custom values or leave them intact to be populated by the values from the standard settings.
If you customize the _tealiumModalClose
button, be sure you keep the onclick="utag.extn.mdlW.dismiss()
function.
If you do not set a condition the modal pops up on every page.
By default the modal runs at DOM Ready and pops up if the applied condition is true
. To launch the modal window at a different time, or based on more sophisticated logic, apply the following changes:
false
to block the modal from launching.{UID}
with the UID from above:// Replace {UID} with the UID of the Modal Offer extension to trigger
// For example "utag.modalExt_72.js"
utag.ut.loader({ src: utag.cfg.path + 'utag.modalExt_{UID}.js?utv=' + utag.cfg.v, cb: function() { utag.extn.mdlW.load(); } });
Use this code anywhere in your iQ configuration to launch the modal offer. By using this code in a JavaScript Code extension or a jQuery onHandler extension, you can customize the launch behavior of the modal offer window.
Additional Reading: Triggering the Modal Offer Extension (Use Cases)
Yes, but only one modal offer is displayed on a web page at a time. If you add multiple instances of the Modal Offer extension be sure that each one has a different condition.
Copyright All Rights Reserved © 2008-2021