How to set a CSS selector for your embed

The embeds require you you 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 selector is 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 be displayed.

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 doing a right-click 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 the 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.

Feel free to contact us if you need help :)

Did this answer your question?