Manage web embeds

  • Updated
If you had access to campaigns prior to April 2023, Optimizely updated the tab name from Campaigns to Activation. All functionality remains the same.

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

Create a web embed

  1. Go to Activation > Engage > Create New Campaign.
  2. Select Web.
  3. Select a web campaign recipe or click Create From Scratch.
  4. Enter a campaign name.
  5. The Enrollment section is set to All Visitors by default. If you want to use a real-time segment as your audience for this campaign, select one from the list.
  6. Edit the touchpoint and select Web Embed to begin designing and configuring your content.

Configure web embed targets

In the Targets section, select where you want the content to display on your site:

  • Page URL –Expand to select Page URL, a UTM parameter, or a Custom Query Parameter for the target location.
  • Contains – Expand to select Contains, Equals, Does not contain, or Does not equal to determine how you want to target the provided location.
  • URL snippet or path – Enter the URL snippet or path that you want to target.
  • Or – You can target more pages or parameters using an OR operator.
  • And – You can target more pages or parameters using an AND operator.
  • Selector Name – The selector determines where on the targeted page the web embed will display. For help with finding the necessary selector for your content, see the Locate a selector section below.
  • Selector Position – Place the web embed After, Inside, or Before the specified selector.
  • Remove – If you want to remove a defined target, hover your cursor over the target row and click the Remove icon.

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:

  1. Go to the target page on your website.
  2. Locate the section you want to place the web embed after, inside, or before.
  3. Right-click in the section and select Inspect.
  4. On the Elements tab, locate the highlighted section in the code.
  5. Copy and paste the identified class or ID name into the selector name field in ODP.
    • Enter classes with a period (.) before the name (for example, .section-one).
    • Enter IDs with a pound symbol (#) before the name (for example, #section-one).

Configure web embed constraints

In the Constraints section, choose how often you want this content to display.

  • 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, select the Always show embedded content checkbox.

Design your web embed

Before starting a new design, click Load Template drop-down list to select from premade web embeds, created by your team with the templates tool. You can further customize and rename them. If you do not have a premade design, enter a Name for your new content.

Web embed elements

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 on 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 put them in the desired location in your web embed. Click the element in the embed design to use the Details tab to modify the format, spacing, links, and other settings.

  • Header – A H1 header area. Use it sparingly, like for the title only.
  • 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. This is recommended only if you are familiar with the HTML markup language.

Forms

Gather information with your content by creating a web embed form. Drag and drop the elements to put them in the desired location in your web embed, then click the element in the embed to use 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 into mailing lists or updating individual profile attributes. Customers can select multiple values.
  • Submit Button – Lets the customer submit the form. 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 drop-down list to present a group of options and update the associated profile attribute. Customers can select only one value.
ODP automatically validates the email, opt-in, and submit button fields when your web content contains form elements. If you have not added these fields, the website will not display the form.

Web embed details

You can also change settings to affect the entire piece of content. Access details by clicking the Container option in the breadcrumb trail or by clicking 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 turning the toggle on.

Text properties

  • Font Family – Font used in the web embed.
  • Font Weight – Font weight used in the web embed.
  • Font Color – The color of the font in the web embed.
  • Font Size – The size of the font used in the web embed.

Link properties

  • Link Color – The color of links included in the web embed.
  • Link Underline – The option to style the link with an underline.

Content Settings

Create-popup-10.png

  • Remove Duplicate Products – When enabled, duplicate products do not display in the product grids.

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

  • Border – Enable More Options to determine the border size and style for each side of the pop-up or form separately.
  • All Sides – Use this option to add a border to the content. Increase to make the line thicker. Decrease to make the line thinner.

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.

Configure 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 can 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 your web embed

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

  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 Targets section, so ensure it is a valid page.
  3. Select Generate Preview.

Activate your web embed

To make the web embed available to your website visitors:

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