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 you saved your new campaign's necessary information and type, you can begin working on the content. 

Targets

Under the Targets section, 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 [number of] times every [time range] per visitor: Limit customers from seeing too much content, and too often, over a single period of time (e.g., once per week).
• Show up to [number of] times total per visitor: Limit customers from seeing the content more than the specified number of times in total (e.g., 3 times in total).

If you prefer to make the web embed available to your visitors at all times, leave the box checked for Always show embedded content. 

Design

Before jumping into a new design, you can use the Load Template dropdown menu to check whether you have previously created and saved web embed templates. (You can create them using the templates tool.) 

If you're starting from scratch, click into the Name field to customize the name of your new web embed.

Elements

Layout

Set up the layout of you web embed by dragging and dropping elements into the builder. Elements under the Layout section provide the overall structure of your web embed. You can edit the formatting and design of these elements under the Details tab. 

• Section: This element allows you to place content inside. Typically, the various types of content, like your header or text, are in separate sections, so add a new section for each. 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) in the Details tab.
• Grouped Column: A set of columns that do not wrap on mobile. This is usually 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 to direct customers to additional content.

Basic Content

Elements from Basic content go inside the sections you added from the Layout elements. Drag and drop these elements to add them to their desired location in your layout. Once you place an element, you can click on it to reveal its Details tab where you can 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. You can add a hyperlink to create a call-to-action and direct your visitor 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 provides you with 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 visitors. 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.

You can configure the elements used in your form under the Details tab. These options are particularly important, 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, phone number, 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. The visitor can select multiple values when submitting the form.
• Submit Button: Adds a unique button that allows the form to be submitted. You can add only one submit button 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. Customers can select only one value 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. Customers can select only one value when submitting the form.

Details

In addition to the element-specific detail options you can access by clicking into an individual element, there are also details that affect the entire piece of web content. You can access these 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, you can set a specific height in pixels 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 & 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. (When you're previewing, Zaius will ignore the constraints you defined.) 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 section, so make sure it's 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.