Embedding slots on a page

There are several available methods for embedding a slot into your webpages for personalized content, including adding code to an element, using CSS selectors, and adding to the theme.

Adding code to an element

If a page element has an HTML section that can be edited, you can add an embed code to the element. For example, to add code to a block, complete the following steps:

  1. Copy the embed code.
  2. Add the embed code to a block. The block must use the Full HTML format, and you must edit the HTML source code to add the div correctly.
  3. Save the block.
  4. Add the block to the webpage in Full HTML or another trusted format.

This block can now be used as a slot for Experience Builder. The embed code is HTML, and will render in the webpage, but is not visible to the user.

Using CSS selectors

You can manually enter a webpage element’s CSS selector(s) into the labeled field on a slot card. Any selector or group of selectors that can be defined with CSS can be used by Acquia Lift to define your slot region.

Users can enter one or more selectors into the field to define the slot region on the webpage.

Adding a CSS selector

The selector or group of selectors entered into the field:

  • must be unique across all the slots on your website.
  • must not belong to a page element whose parent or child element is also an Acquia Lift slot.
  • must target an HTML block-level element on the page, such as:
    • p
    • li
    • div
    • headers (h1, h2, and others)

This ensures that multiple slots do not overlap with each other on your webpage, and that two slots do not use the same region of your website. If you have overlapping selectors, Experience Builder may display a message similar to the following:

Please ensure the slot's chosen CSS selector targets a single element on the page and does not conflict with any existing Lift slots. See the "How to use CSS selectors" link above for more details.

If your selector matches multiple elements, only the first matched element will render a slot. An example of a selector group that can be used by Acquia Lift:

#first-line div > p

Entering this code into the slot’s CSS Selector field enables Acquia Lift to use a paragraph in a div that uses the ID first-line as an Acquia Lift slot. You can change the CSS selector that was entered into the field on the slot card at any time, which changes only where the slot is rendered on the webpage. Any rules that you have created for the slot are not affected when you modify the slot’s CSS selector.

Content replacement mode

Experience Builder allows you to configure slots with different content replacement modes, which define how the content is provided:

  • trusted mode - Content is injected plainly
  • untrusted mode - Content is injected, but encapsulated
  • customized mode - Content is not injected, but is provided by JavaScript for further customization

Finding a selector

You can use your browser's tools to inspect a webpage and find the identity of a particular element.

For a potentially easier selector discovery method, we recommend that you use a browser extension to find the CSS selectors on your webpage. For specific solutions, visit your browser’s extension or add-on store.

Adding to the theme

You can also add slot information to your website theme, as part of your committed code. However, embedding slot information this way can make it more difficult for users to change it.

Contact supportStill need assistance? Contact Acquia Support