The campaigns tool allows you to launch engaging pop-up modals and forms on your website. Two common use cases for these pieces of web content are gathering information about your customers or displaying offers and promotions.

To add pop-up modals and forms to your website, you must include the Zaius Javascript tag in your site's content.

Create

To create a pop-up modal or form:

• Navigate to Campaigns.
• In the upper left, click Create New Campaign.
• Select the Web option from the pop-up.
• In the upper left, click into the Untitled Campaign field to set a campaign name.
• On the touchpoint tile, click into the Touchpoint 1 field to customize the name of the touchpoint.
• Select the Edit icon to begin designing and configuring your content.

Settings

Targets

In the Targets accordion, select where you want this content to appear.

1. The targeted location can be based on a page URL, UTM parameter, or custom query parameter. 
2. The targeted location can contain, equal, not contain, or not be equal to the provided location.
3. In addition to the original target, more pages or parameters can be targeted via an OR operator. 
4. In addition to the original target, more pages or parameters can be targeted via an AND operator. 
5. To remove a previous selection, select the Remove icon when hovering over the row.

Triggers

In the Triggers accordion, choose when you want this content to appear.

zaius.dispatch(
'web', 
'showContent', {
  contentId: '<insert_content_id>', 
  target: {
    selector: '<insert css selector>', // empty string for modals 
    position: 'modal' // modal | before | after | inside | replace
  }
});

• Limit to X displays per X (time range) per customer: Limit customers from seeing too much content in a single period (e.g., once per week).
• Limit to X displays total per customer: Limit customers from seeing the content more than X number of times in total (e.g., 3 times in total).
• Show on mobile (not recommended): Determine the content's availability on mobile devices.

Note: The Show on mobile setting is disabled by default and is not recommended due to a Google policy. While Google considers this content appropriate in some instances (e.g., Cookie acknowledgments), it's generally discouraged. For this reason, your company's SEO may be negatively impacted if you enable this setting. Learn more here.

Design

Before jumping into a new design, you can use the Load Template dropdown menu to check for premade pop-up modals and forms. These options, created by your team with the templates tool, can be further customized and renamed. If no premade design is selected, click into the Name field to customize the name of your new content instead.

Elements

Layout

Your web content needs a structure, and this structure is composed of sections. Once a layout section is placed, click it to reveal the Details tab. This tab allows you to modify the formatting and basic design settings for the section.

• Section: This element allows you to place content inside. Typically if you are placing a new type of content (e.g., a header or text), then you should be placing a new section. All columns and grids are made of individual sections.
• Responsive Column: A column that "responds" or wraps on a mobile device. You can choose which way the columns respond (e.g., left to right) from within the details.
• Grouped Column: A set of columns that do not wrap on mobile. Typically used for text-based columns that you want to scale down instead of wrapping.
• Grid: Adds a number of columns and rows to the content.
• Product Grid: Adds a grid populated with product recommendations.
• Navigation: Adds a number of editable links that can be used to direct customers to additional content.

Basic Content

These elements are what you use to put content into the structure of your pop-up modal or form. Click and drag the elements to put them in the desired location. Once an element is placed, click it to reveal the Details tab. This tab allows you to modify the format, spacing, links, and other element-specific settings.

• Header: Adds an h1 header area, which is considered the most important type of header and should be used sparingly (e.g., title only) within pop-up modals and forms.
• Text: Adds a rich text area to the content.
• Image: Adds an image area to the content.
• Button: Adds a button to the content. A hyperlink can be added to create a call-to-action and direct the customer to another action or additional content.
• Divider: Adds a dividing line between the sections of the content.
• Spacer: Adds space between the sections of the content.
• Social: Adds social icons to the content.
• Raw HTML: Adds an HTML area to the content. This element allows very granular control of its content; however, its use may result in drastic differences between the preview and the web content that will eventually be displayed to customers. The element is only recommended for those familiar with the HTML markup language.

Forms

These elements allow your content to capture information and are the fundamental difference between a standard pop-up modal and a pop-up form. Click and drag the elements to put them in the desired location. Once an element is placed, click it to reveal the Details tab. This tab allows you to modify the format, spacing, links, and other element-specific settings. These options are particularly important for form elements as you can make specific fields required and can select what profile attribute the field will update when it is included in the form submission.

• Text Box: Adds a single-line text field to the form. This allows the form to capture customer information, such as their email address and name.
• Checkbox: Adds a checkbox field to the form. This allows the form to opt customers into mailing lists or to update individual profile attributes. Multiple values can be selected by the customer when submitting the form.
• Submit Button: Adds a unique button that allows the form to be submitted. Only one submit button can be added to a form.
• Radio Button: Adds a radio button field to the form. This allows the form to present a group of options and update the associated profile attribute. Only one value can be selected by the customer when submitting the form.
• Dropdown: Adds a dropdown field to the form. This allows the form to present a group of options and update the associated profile attribute. Only one value can be selected by the customer when submitting the form.

Note: Zaius will automatically validate the email, opt-in, and submit button fields when your web content contains form elements. If these fields haven't been added, you will be unable to make the form available on your website. Learn more. 

Main vs. Confirmation Design

When your content contains a form and the form doesn't redirect to another page via the Submit Button's success action, you will have the ability to toggle between Main and Confirmation designs. The main design is what your customers will see when the content is first displayed. The confirmation design is what they will see once they successfully submit the form.

 

 

Preview

In addition to the Desktop and Mobile views available within the editor, you can preview the pop-up or form on one of your website pages. All triggers will be active during the preview, while all constraints will be ignored. To preview the content before going live:

• In the upper right of the editor, click Preview.
• Enter a page URL to use for the preview. Zaius will check the page you've selected against the rules you've set up in the Pages accordion, so please ensure it is a valid page. 
• Select Generate Preview. 

Go Live

To make the pop-up or form available to your website visitors:

• In the upper-right, click Save. 
• In the upper-left, select the campaign's name from the breadcrumb menu.
• In the upper-right, click Go Live.