iQ Tag Management

The Modal Extension lets you add a modal to your site easily and quickly. You can set the size and content of the modal, and even decide the specific circumstances under which it displays.

In this article:

Table of Contents Placeholder

How It Works

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:

Standard - content is set by entering text into three fields: header, body, and footer. The height and width can also be specified.
Custom - content is coded by editing the CSS and HTML directly.

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 will only run when the defined condition evaluates to true.

Configuring the Extension

To begin setting up the Modal Offer extension be sure to have the content of the window prepared so that you're ready to enter it into the configuration.

To add the Modal Offer extension:

From Extensions click +Add Extension, then under the Advanced tab, click Modal Offer.
Enter a title to identify the modal pop-up.
Click Add Condition to control when this modal will pop up.
- Click the plus button inside the Condition box to add an AND condition.
- Click the plus button outside the Condition box to add an OR condition.
- Click the minus button inside the Condition box to remove an AND condition.
- Click the minus button outside the Condition box removes an OR condition.
  
  If you do not set a condition the modal will pop up on every page.
Set the content of the modal pop-up using the Modal Publish Modes:
- Standard
- Custom

Modal Publish Mode: Standard

The standard publish mode uses a simple template where you type in the content of the modal and adjust the height and width.

To configure the modal pop-up in standard mode edit the following fields:

Modal Header - the text to appear at the top of the window
Modal Body - the text to appear in the middle of the window
Modal Footer - the text to appear at the bottom of the window, after the line separator
Window Height - the height of the window in pixels (px) (default is 200)
Window Width - the width of the window in pixels (px) (default is 300)

In standard mode the window appearance will follow these rules:

The modal will always be centered.
The font style of the modal is inherited from the <body> element.
The CSS of the modal is a set of Tealium defaults.
A dark div element is added to block out the rest of the page while the modal is up.
The size of the header, body, and footer elements are a percentage of the window height and width.

To customize this behavior switch to the custom publish mode.

Modal Publish Mode: Custom

The custom publish mode allows you to edit the CSS and HTML of the modal pop-up directly

To configure the modal pop-up in custom mode edit the following fields:

CSS Code - the full styling definitions for the modal window
HTML Code - the template for the modal window

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. These placeholders can be replaced with your own custom values or left 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.

Click Reset at the bottom of the extension to return all of the code to its default state.

Launching the Modal Directly

By default the modal will run at DOM Ready and will pop up if the applied condition is true. To launch the modal window at a different time, or based on more sophisticated logic, the following changes can be applied:

Block the default modal launch - apply a condition that will always evaluate to false to block the modal from launching.

Launch the modal directly

Find the UID of your Modal Offer extension (found in your iQ profile on the Extensions screen):

Use the following JavaScript code to launch the modal window, replacing "{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();
    }
});

This code can be used 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)

FAQ

Can I add multiple Modal Offer extensions to my profile?

Yes, but only one modal offer can be 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.