Use web embeds to gather valuable information about your visitors and customers. To include a web embed in your site content:

• The Zaius JavaScript tag must be installed on the targeted pages.
• The sub-domain for the targeted pages must match the Cookie Domain set in the JavaScript tag's advanced options.

Create

To create a web embed:

• Navigate to Campaigns.
• In the upper left, click Create New Campaign.
• Select the Web option from the prompt. 
• 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 access the touchpoint editor.
• In the editor, select the Web Embed tab. 
• Select the Save option at the upper right. 

Settings

Now that the campaign's necessary information and type have been saved, the content can be built out. 

Targets

In the Targets accordion, select where you want the 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 URL, snippet, or path.
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. The selector determines where on the targeted page the web embed will appear. You can locate the necessary selector for your content by following these steps. 
6. The web embed can be placed after, inside, or before the specified selector. 
7. To remove a previous selection, select the Remove icon when hovering over the row.

Locate a selector

To display a web embed after, inside, or before a specific section of your site content, a selector associated with the section must be identified. To locate the selector:

• Navigate to the target page. 
• Locate the section you want to place the web embed after, inside, or before. 
• Right-click the section and select the Inspect option from the menu. 

• In the panel that opens, locate the highlighted section in the code. 

• Copy and paste the identified class or ID name into the selector name field in Zaius. 
• Classes should be entered with a period (.) before the name (e.g., .section-one).
• IDs should be entered with a pound symbol (#) before the name (e.g., #section-one).

• Show up to X times every (time range) per visitor: Limit customers from seeing too much content in a single period (e.g., once per week).
• Show up to X times total per visitor: Limit customers from seeing the content more than X number of times in total (e.g., 3 times in total).

If both settings are left disabled, the web embed will be available to all customers at all times. 

Design

Before jumping into a new design, you can use the Load Template dropdown menu to check for premade web embeds. 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.
• 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 web embed. 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 web embeds.
• 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 web embed to capture information and are the fundamental difference between a web embed that serves as a call-to-action and a web embed that acts as a 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.

Details

In 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. 

Container Properties

• Background Color: Determines the color of the web embed.
• Content Width: Determines the width in pixels of the web embed.
• Content Height: Determines the height of the web embed. This is set to auto by default; however, a specific height in pixels can be set by enabling the switch next to the setting.

Modal Properties

• 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.

Defaults

• Font Family: The font that will be used by the web embed.
• Font Weight: The font-weight that will be used by the web embed.
• Font Color: The color of the font used by the web embed.
• Font Size: The size of the font used by the web embed.
• Link Color: The color of links included in the web embed.
• Link Underline: Determines whether or not a link will be styled with an underline.

Padding

Determines how much padding in pixels is applied to the content in the web embed. When padding is increased, the content will move towards the center of the web embed area. When padding is reduced, the content will move towards the edges of the web embed area.

Enabling the More Options switch allows padding to be applied from specific directions.

Border

Determines how much of a border in pixels is applied to the content in the web embed. 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 web embed separately.

Border Radius

Determines how rounded the borders of the web embed 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 web embed separately.

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 web embed on one of your website pages. 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 Targets accordion, so please ensure it is a valid page. 
• Select Generate Preview. 

Go Live

To make the web embed 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.