Manage web embeds

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

• Install the Optimizely Data Platform (ODP) JavaScript tag on the targeted pages.
• Match the sub-domain for the targeted pages with the Cookie Domain set in the JavaScript tag's advanced options.

Create a web embed

To create a web embed:

1. Go to Activation > Engage > Create New Campaign.
2. Select Web.
3. Click Create From Scratch.
4. Enter a campaign name in the Untitled Campaign field.
5. Click Touchpoint 1 to customize the name of the touchpoint.
6. Click Edit (icon) to access the touchpoint editor.
7. Open the Web Embed tab.
8. Click Save.

Set targets

Under the Targets section, select where you want the content to appear.

1. You can use a Page URL, UTM Parameter, or Custom Query Parameter for the target location.
2. The targeted location can Contain, Equal, Not contain, or Not be equal to the provided location.
3. Target more pages or parameters using an OR operator.
4. Target more pages or parameters using an AND operator.
5. The selector determines where on the targeted page the web embed will appear. Locate the necessary selector for your content by following these steps.
6. Place the web embed After, Inside, or Before the specified selector.
7. Select the Remove icon when hovering over the row to remove a previous section.

Locate a selector

To display a web embed after, inside, or before a specific section of your site content, identify a selector associated with the section by using the following steps:

1. Go to the target page.
2. Locate the section you want to place the web embed after, inside, or before.
3. Right-click the section, and select Inspect.

   

4. Locate the highlighted section in the code.

   

5. Copy and paste the identified class or ID name into the selector name field in Optimizely Data Platform (ODP).
   1. Enter classes with a period (.) before the name (for example, .section-one).
   2. Enter IDs with a pound symbol (#) before the name (for example, #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 (for example, 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 (for example, 3 times in total).

If you want to make the web embed available to your visitors at all times, enable Always show embedded content.

Set design

Use the Load Template drop-down menu to see whether you have previously created and saved web embed templates through the templates tool.

If you are starting a new design, click Name to customize the name.

Layout

Create the overall structure of your web embed by dragging and dropping elements from Layout into the builder. You can edit the formatting and design of these elements under the Details tab.

• Section – A space to hold content. Place a new section to place a new type of content such as a header or text. All columns and grids contain individual sections.
• Responsive Column – A column that "responds" or wraps on a mobile device. You can choose which way the columns respond, such as left to right, from within the details.
• Grouped Column – A set of columns that do not wrap on mobile. Use a grouped column for text-based columns that you want to scale down instead of wrapping.
• Grid – A specific number of columns and rows.
• Navigation – Editable links that you can use to direct customers to additional content.

Basic content

The following elements add content to your web embed. Drag and drop these elements to add them to their desired location in your layout. Click on an element to display the Details tab to modify the format, spacing, links, and other settings.

• Header – A H1 header area. Use it sparingly, such as for the title only, within pop-up modals and forms.
• Text – A rich text area.
• Image – An image area.
• Button – A button. Add a hyperlink to create a call-to-action and direct the customer to another action or additional content.
• Divider – A dividing line between the sections of the content.
• Spacer – Space between the sections of the content.
• Social – Social media icons.
• Raw HTML – An HTML area for detailed control of the content. However, you may see differences between the preview and the web content displayed to customers. We recommend only using this element if you are familiar with the HTML markup language.

Forms

Gather information with your content by creating a web embed form. Click and drag the elements to put them in the desired location, then click on an element to display the Details tab to modify the format, spacing, links, and other settings. Use these options to make specific fields required and select what profile attribute the field will update when it is included in the form submission.

• Text Box – A single-line text field to capture customer information, such as their email address and name.
• Checkbox – A checkbox field for opting in to mailing lists or updating individual profile attributes. Customers can select multiple values.
• Submit Button – Lets the form to be submitted. You can only add one submit button to a form.
• Radio Button – A radio button field to present a group of options and update the associated profile attribute. Customers can select only one value.
• Dropdown – A dropdown field to present a group of options and update the associated profile attribute. Customers can select only one value.

Details

You can also change settings to affect the entire piece of content. Access these by clicking the Container option in the breadcrumb menu or by clicking on the background of the web content.

Container properties

• Background Color – The color of the web embed.
• Content Width – The width in pixels of the web embed.
• Content Height – The height of the web embed. This property is set to auto by default. Set a specific height in pixels by selecting the toggle.

Modal properties

• Backdrop Color – The color of your web page behind the web content.
• Close Buttons – A specific button to dismiss the content. If you disable the close button, customers can close your modal 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. Use a contrasting color to make the button more noticeable.
• 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 – The option to style the link with an underline.

Padding

Determine how much padding to apply to the content in the web embed. Increase the padding to move the content towards the center. Reduce the padding to move the content towards the edges.

Enable More Options to apply padding from specific directions.

Border

Use this option to add a border to the content. Increase the border to make the line thicker. Reduce the border to make the line thinner.

Enable More Options to determine the border size and style for each side of the web embed separately.

Border Radius

Use this option to round the borders of the web embed. Use 0 to have sharp edges like a square. Increase the number to make the border rounder.

Enable More Options to determine the border-radius for each side of the web embed separately.

Set main and confirmation designs

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

Preview

In addition to the Desktop and Mobile views available, you can preview the web embed on one of your website pages. Preview shows all triggers but ignores all constraints. Use these steps to preview the content:

1. Click Preview.
2. Enter a page URL to use for the preview. ODP will check the page you have selected against the rules you have set up in the Pages accordion, so please ensure it is a valid page.
3. Select Generate Preview.

Go live

Use these steps to make the web embed available to your website visitors:

1. Click Save.
2. Select the campaign's name from the breadcrumb menu.
3. Click Go Live.