How to create an Embed

Lisa Fockens Updated by Lisa Fockens

Create an Embed campaign

When creating a new campaign, choose the Embed format and choose a template you like.

Customize your embed

Once in the campaign builder, you'll be able to quickly customize your embed. Edit the headlines, paragraph text, button text and the button's redirect settings.

Your embed can be content for your website as simple as a single button, form, or clickable image.

Choose a position for your embed

Embeds require you to tell us where we should insert the campaign on your page. Let's see how we use CSS selectors for this purpose.

When working with embeds, you will be asked to enter a selector to specify the placement of your campaign. The embed will be inserted inside the specified element of your website's page. It will push down the content and will scroll with its parent.

CSS selectors are something developers are familiar with. You can learn more about it here. Here is a method that can help you find a suitable selector, using the Chrome browser.

Step 1: Go to the page where you want the bar to display.

Step 2: Right-click at the place that should contain the bar.

Step 3: Click on “Inspect” in the contextual menu.

Step 4: You should see the developer tools open on the “Elements” tab. Move your mouse over the elements; it should draw a blue square on your website. This shows you which element you are pointing at.

Step 5: Move your mouse around until you find the element that is a suitable container. Remember that the embed will be inserted as the first child of the container.

Step 6: Copy the selector by right-clicking on the element > Copy > Copy selector.

For example, on https://www.xbox.com/en-us/consoles/xbox-series-x, we might want to insert our embed between the Microsoft header and the Xbox Series X menu. We will choose the CSS selector #TopContentBlockList_3 > div > div.

In an ideal situation, the chosen container has an “id” parameter. If that is the case, the copied selector will simply be the “id” of the container prefixed by #. Otherwise, Chrome will provide a selector that depends on the ancestors' hierarchy of the container. Note that it is more likely for the hierarchy-dependent selector to stop working if you update your website theme.

Get in touch with our Customer Support team if you require assistance.

Not seeing your embed on your website? Try these tips.

Contact