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 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.
In the Targets accordion, select where you want this content to appear.
- The targeted location can be based on a page URL, UTM parameter, or custom query parameter.
- The targeted location can contain, equal, not contain, or not be equal to the provided location.
- In addition to the original target, more pages or parameters can be targeted via an OR operator.
- In addition to the original target, more pages or parameters can be targeted via an AND operator.
- To remove a previous selection, select the Remove icon when hovering over the row.
In the Triggers accordion, choose when you want this content to appear.
- Display immediately when the page loads: The content is shown to the customer as soon as they visit one of the selected pages. If this option is enabled, the other triggers will be disabled to prevent repeat showings.
- Display after X: The content appears to the customer after the allotted time.
- Display on X% page scroll: The content is shown to the customer after they scroll a certain percentage of the page.
- Display on exit intent: The content is shown to the customer when their mouse leaves the active window, indicating that they may intend to leave the page.
Manual Triggers (Advanced)
To manually display web content based on your custom criteria, Zaius provides an SDK method for development teams to utilize:
selector: '<insert css selector>', // empty string for modals
position: 'modal' // modal | before | after | inside | replace
Using this snippet, you can trigger content in custom scenarios, such as when your customer adds an item to their cart.
In the Constraints accordion, choose how often you want this content to appear.
- 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.
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.
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.
- Navigation: Adds a number of editable links that can be used to direct customers to additional 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.
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.
DetailsIn addition to the element-specific detail options that can be accessed by clicking an individual element, there are also details that affect the entire piece of web content. These can be accessed by clicking the Container option in the breadcrumb menu above the editing area or by clicking on the background of the web content.
- Background Color: Determines the color of the pop-up or form.
- Content Width: Determines the width in pixels of the pop-up or form.
- Content Height: Determines the height of the pop-up or form. This is set to auto by default; however, a specific height in pixels can be set by enabling the switch next to the setting.
- Backdrop Color: The color of your web page behind the web content.
- Close Buttons: Provides the customer with a specific button (e.g., X) to dismiss the content. Close buttons are not required. If you disable the close button, your modal can be closed by clicking outside of the container instead.
- Close Button Position: The location of the close button when it is enabled.
- Close Button Background Color: The color behind the button. Using a contrasting color can bring more attention to the button.
- Close Button Icon Color: The color of the close button icon.
- Font Family: The font that will be used by the pop-up or form.
- Font Weight: The font-weight that will be used by the pop-up or form.
- Font Color: The color of the font used by the pop-up or form.
- Font Size: The size of the font used by the pop-up or form.
- Link Color: The color of links included in the pop-up or form.
- Link Underline: Determines whether or not a link will be styled with an underline.
Determines how much padding in pixels is applied to the content in the form or pop-up. When padding is increased, the content will move towards the center of the pop-up or form area. When padding is reduced, the content will move towards the edges of the pop-up or form area.
Enabling the More Options switch allows padding to be applied from specific directions.
Determines how much of a border in pixels is applied to the content in the form or pop-up. When the border is increased, the line will thicken. When the border is reduced, the line will become thinner.
Enabling the More Options switch allows the border size and style to be determined for each side of the pop-up or form separately.
Determines how rounded the borders of the form or pop-up are. When this figure is 0, the border will have sharp edges like a square. When this figure is increased, the border will become rounder.
Enabling the More Options switch allows the border-radius to be determined for each side of the pop-up or form separately.
Main vs. Confirmation Design
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.
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.