Manage web embeds

Use Optimizely Data Platform (ODP) web embeds to deliver real-time, personalized content and experiences directly on your customers' websites and mobile devices. To include a web embed in your website

• install the (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

1. Go to Activations > Overview > Create New Campaign.
2. Select Web.
3. Select a web campaign recipe or click Create From Scratch.
4. Expand Enrollment and select All Visitors or a real-time segment from the drop-down list. 
5. Edit the touchpoint and select Web Embed to design and configure your content.
   

Configure targets

Expand Targets and select where you want the web embed content to display on your site.

1. Page URL – Expand to select Page URL, a UTM parameter, or a Custom Query Parameter for the target location.
2. Contains – Expand to select Contains, Equals, Does not contain, or Does not equal to determine how you want to target the provided location.
3. URL snippet or path – Enter the URL snippet or path you want to target.
4. Or – Use OR to target more pages and parameters. 
5. And – Use AND to target more pages or parameters.
6. Selector Name – Enter the selector name to determine where the web embed displays on the targeted page. To help find the necessary selector for your content, see Locate a selector.
7. Selector Position – Expand to select the position of the web embed on the targeted page (After, Inside, or Before).
8. Remove – Hover your cursor over the target row and click remove to remove the defined target.

Locate a selector

To select the location of the web embed on your website, identify a selector associated with the section.

1. Go to the target page on your website.
2. Find the section where you want to place the web embed.
3. Right-click in the section and select Inspect.
4. Click the Elements tab and find class=" section-one" in the code.
5. Return to ODP and expand Targets. Copy and paste the identified class or ID name in Selector Name.
   • 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 constraints

• Always show embedded context – Make the web embed available at all times. 
• Show up to [number of] times every [time range] per visitor – Limit the number of times the content is shown to a customer over a single period of time, for example, once per week. 
• Show up to [number of] times total per visitor – Limit the total number of times the content is shown to a customer, for example, three times.
  

Design a web embed

You can select an existing web embed layout by clicking Load Template and browsing the template gallery. You can use this or make further customizations. You can save the template by clicking the arrow beside Load Template and selecting Save as Template. Click Replace Existing to replace the existing template without affecting its usage in previous instances. Click Create New to create a template.   

Web embed elements

Layout

Drag and drop elements from Elements > Layout to design your web embed content. Select the Details tab to format the layout elements.

• Section – A space to hold content, like a header or text. All columns and grids contain individual sections.
• Responsive Column – A column that responds or wraps on a mobile device. Choose the direction in which the columns respond from the Details tab.
• Grouped Column – A set of columns that do not wrap on mobile. Use a grouped column for text-based columns you want to scale down instead of wrapping.
• Grid – A specific number of columns and rows.
• Product Grid – A specific number of columns and rows to recommend products.
• Navigation – Editable links that you can use to direct customers to additional content.

Basic content

Drag and drop components from Elements > Basic Content to populate your web embed content. Select the Details tab to format the components. 

• Header – A header area. Use this occasionally, such as for titles. 
• Text – A text area.
• Image – An image area.
• Button – A button. Add a hyperlink to create a call-to-action and redirect the customer to a section or another webpage.
• Divider – A dividing line between the sections of the content.
• Spacer – Space between the sections of the content.
• Social – Social media icons with links.
• Raw HTML – An HTML area for detailed control of the content. However, you may see differences between the preview and the end-user content. Use this only if you are familiar with HTML.

Forms

Drag and drop form elements from Elements > Forms to create forms and collect customer information and permissions. Select the Details tab to format the form elements. 

• Text Box – A single-line text field to capture customer information, such as email addresses and names.
• Checkbox – A checkbox for opting into mailing lists or updating individual profile attributes. Add multiple checkboxes to give your customers multiple-choice options.
• Submit Button – A button that lets the customer submit the form. You can only add one submit button to a form.
• Radio Button – A radio button to present a group of options and update the associated profile attribute. You can add multiple radio buttons, but customers can only select one.
• Dropdown – A drop-down list to present a group of options and update the associated profile attribute. You can add the drop-down list to let customers select a single option from the list.

Web embed details

You can also format the entire web embed content. Click Container from the breadcrumb trail or click on the background to access the Details tab. 

Container properties

• Background Color – The background color of the web embed.
• Content Width – The width of the web embed in pixels.
• Content Height – The height of the web embed. Toggle Auto off to set your desired height in pixels. 

Text properties

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

Link properties

• Link Color – The link colors included in the web embed.
• Link Underline – The option to underline the link.

Content Settings

• Remove Duplicate Products – Toggle Remove Duplicate Products on to stop displaying duplicate products in product grids.

Padding

• Determine how much padding to apply to the content in the web embed. Increase the padding to move the content toward the center and decrease it to move it toward the edges.
• Enable More Options to apply padding from specific directions.

Border

• Enable More Options to determine the border size and style for each side of the web embed separately.
• Click All Sides to add a border to the content. Increase or decrease the size of the line to make it thicker or thinner. 

Border Radius

• Use Border Radius to make the borders of the web embed rounded. Use 0 to have sharp edges like a square or increase the number to make the border rounder.
• Enable More Options to determine the border radius for each side of the web embed separately.

Switch between main and confirmation designs

You can switch between Main and Confirmation to view what your customers see on the initial page and after submitting the form.

Preview and activate a web embed

Preview your web embed

Besides the Desktop and Mobile views, you can preview the web embed on one of your website pages.

1. Click Preview.
2. Enter your URL in Webpage URL. ODP checks the page you select against the rules you set up in Targets, so ensure it is valid.
3. Click Generate Preview.

Activate your web embed

To make the web embed available to your website visitors, complete the following:

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