Skip to content
English
More support
your.uniqodo.com
  • There are no suggestions because the search field is empty.

How to Set Up Inline Experiences with Anchor Elements

You must have the anchor in place before you can preview or test the inline experience.

Inline experiences let you display promotional messages and codes within your page layout, such as on basket, checkout, or confirmation pages, right where you want it. Here’s how to set it up in a few simple steps.

What Are Inline Experiences and Anchor Elements?

  • Inline experiences are promotions or content that appear inside your page, not as popups or overlays.

  • To control where the experience appears, you add a special placeholder called an anchor element to your page’s HTML.


Placing Your Anchor Element

Add this snippet to your page template where you want the inline experience to show: 

<div class="uqd-inline-experience-anchor" data-uqd-inline></div>

For inline experiences to work correctly, the anchor element on your page must meet these rules:

  1. The anchor element must be unique on the page

    • There should be exactly one anchor element per page (per rendered view).

    • Do not duplicate the anchor snippet in headers, footers, partials, or shared components that appear multiple times.

  2. The anchor element can be positioned differently on different pages

    • You may place the anchor in different locations for each template (e.g. basket, checkout, confirmation).

    • Each page just needs a single, unique anchor that Uniqodo can target.

  3. The anchor element must be within the <body> tag

    • The anchor can be placed anywhere in the page body:

      • within your main content area,

      • within a specific section or container,

      • above or below specific components.

    • It must not be placed in <head> or outside the <body>.

  4. The anchor element must be present on initial page load

    • The anchor must exist in the HTML when the page finishes loading.

    • Avoid adding the anchor only after delayed JS logic if possible.

    • If you use client-side rendering (SPA frameworks), ensure:

      • The anchor renders as part of the initial view for that route.

      • It is not conditionally hidden or removed before our script runs. 

 

Setting Up the Inline Experience

Once your anchor is in place, you can set up and configure your inline experience in the Uniqodo Experience Builder.

You don’t need to do anything special in the builder for the anchor, just make sure the anchor is on your page.

 

You must have the anchor in place before you can preview or test the inline experience.

If there’s no live experience, the anchor will be invisible and take up no space, unless you add custom styles (not recommended).

 

FAQ

Q: Do I need to add the anchor before I can preview or test the experience?
A: Yes. The anchor must be present in your HTML before any inline experience can appear.

Q: Do I need to leave space for the inline experience?
A: No. The experience will add its own spacing when it appears.

Q: What happens if there’s an anchor but no live experience?
A: The anchor will not be visible and will not affect your layout unless you add custom styles. If you see a small gap or line where the anchor is, it’s almost always due to how the anchor has been placed or styles already on the page.

Q: Can I style the anchor?
A: It’s best not to. Let the experience handle its own layout and spacing. If you need extra space, add it to the container around the anchor, not the anchor itself.

Q: Can I have more than one anchor on a page?
A: No. Only one anchor per page is supported.