Embedding slots on a page

There are several available methods for embedding a slot into your webpages for personalized content, including the following:

  • 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.

    Rendering details
    When a slot has both CSS selectors entered and uses embed code within the page markup, the slot will be placed in the location defined by the CSS selectors, not the embed code. Slots placed on the page using CSS selectors will be rendered in trusted or untrusted mode depending on the setting chosen in the Acquia Lift connector module,

    Finding a selector
    You can use your browser tools to inspect a webpage and find the identity of a particular element.
    For the easiest discovery of CSS selectors, we recommend using a browser extension to find CSS selectors on your webpage. Visit your browser’s extension or add-on store for specific solutions.

  • 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