Build inline content that renders directly inside your product's UI. Design the Embed in the Appcues Builder and choose where it appears using a CSS selector. 

Prerequisites

• Appcues installed on your site
• The Appcues Builder Chrome extension installed

Where to build

Tip: The builder opens in the Chrome extension by default so you design against your real app. This matters most for Embeds — their size and layout depend on the container they sit in — so building in context lets you catch layout issues you'd miss on the blank canvas.

You can build Embeds in two places:

• Builder canvas — The Embed's Design tab in the Appcues App. The canvas uses a fixed-width artboard, so you design at a set size rather than inside your product's actual layout. Good for copy changes, content updates, or building an initial draft when you don't need to see the Embed in context.
• In your app (extension) — Open the Embed in the Appcues Builder Chrome extension to build directly inside your live product. The Embed renders inside the real target container, so it adapts naturally to the container's width, padding, and responsive behavior. Use this when layout precision matters — you'll see exactly how the Embed fits alongside your existing UI.

You can switch to the extension at any point: click Open in Extension in the Experience Settings panel, or in the Appcues App, click More actions (⋯) > Open in extension. An Embed you create from New experience opens straight in the extension.

Create a new Embed

1. In the Appcues App, click Experiences > New experience.
2. Select Web, then Embed.
3. Enter a Name. Your users don't see it.
4. Enter the URL of the page in your app where you want to build the Embed. Optionally, pick a Campaign Tactic.
5. Click Continue. The Chrome extension opens on that page with the Embed builder.

New Embeds use your default theme. To change it, see Style the Embed theme below.

Add content blocks

To arrange the layout — splitting cells into rows and columns and sizing them — see Design step layouts. To add and style the content inside (Text, Image, Button, and iFrame blocks, plus click actions and personalization), see Design content in the experience builder.

Add steps

Embeds support multiple steps, all rendered within the same container on the page. Steps behave like a carousel — users navigate within the container, not across different page positions. Steps appear as numbered tabs at the bottom of the builder. Click the + icon to add a new step.

Each step is a separate screen within the Embed. Users navigate between steps using Button blocks. Set a button's action to Next step, Previous step, or Go to step to control navigation. There are no built-in navigation controls — if you don't add buttons with step actions, users will only see the first step.

You can duplicate or delete steps using the icons in the Step Settings panel header.

Configure step settings

Each step has its own settings panel. Click a step in the step indicator at the bottom of the builder, then open Step Settings from the right-side panel. The panel has three tabs:

Settings

Control step behavior:

• Show close button — Toggle on to display an X button that lets users close the Embed. Toggle off to remove it.
• Dismiss permanently — When enabled, closing the Embed removes it for that user permanently. When disabled, the Embed reappears on the next qualifying page load.
  

  

Design

Control step appearance:

• Corner radius — Toggle on and choose S, M, or L to round the step container's corners.
• Background — Set the background color for the step.
• Height — Set the step height in pixels.
• Fill Container — Toggle on to make the Embed expand to fill the width of the target element.
• Min/Max width — Set responsive constraints so the Embed adapts to different screen sizes and container dimensions.
  

  

Advanced

Apply custom CSS directly to the step:

• Step Styles — Add CSS property-value pairs (e.g., background-color: #ffffff, border-radius: 6px). Click + Add to add more properties.
• + Add Section — Add additional style sections for more granular control.
• Copy CSS — Copy all step styles to your clipboard.
  

  

Use the Advanced tab when you need pixel-perfect control that goes beyond the Design tab options — for example, adding borders, shadows, or custom padding.

Set the target element

The target element determines where your Embed renders in your product's UI. This is the key step that differentiates Embeds from other experience types.

Select the container

There are two ways to choose the target element:

• Point-and-click in the Builder — Click Open in Extension from Experience Settings (gear icon), or More actions > Open in extension in the Appcues App, then click directly on any element in your product. This is the easiest method and gives you immediate visual feedback.

• Type a CSS selector manually — In Experience Settings under Target, enter a CSS selector in the CSS Selector field (e.g., .dashboard-sidebar, #onboarding-card). Use this when you know the exact selector or when the element isn't easily clickable.

Use a dedicated container

If you want full control over where the Embed appears, ask your developer to add an empty <div> to your product's code specifically for the Embed — for example, <div id="appcues-embed-slot"></div>. Then target that element with the selector #appcues-embed-slot. This approach is the most stable because the container won't shift if your product's DOM changes.

The container can have a height of 0 — Appcues expands it to fit the Embed content when it renders, and it stays collapsed when no Embed is active. By default, the Embed is constrained by the container's width, but you can override this with a specific width in the step's Design settings.

Choose the placement mode

Choose a Placement option to control how the Embed is positioned relative to the target element:

• Append — The Embed is placed after any existing content inside the target element. Use this when you want the Embed to appear at the end of a container.
• Prepend — The Embed is placed before any existing content inside the target element. Use this when you want it at the top.
• Replace — The Embed replaces all existing content inside the target element. Use this when you want the Embed to take over the space entirely. By default, the replaced content stays removed until the page reloads. To bring it back when the user completes or dismisses the Embed, turn on Show replaced content on completion, which appears below Placement only when Replace is selected. In a multi-step Embed, the content stays hidden between steps. Older versions of the Appcues web SDK ignore the switch and keep the content removed.

If you're targeting a dedicated empty container, any placement mode works — the result is the same since there's no existing content.

Click Open in Extension to see the Embed rendered in context and visually verify the placement.

Refine the selector in the extension

When the extension opens, you can refine your CSS selector with additional precision:

Toggle Refine selection on to narrow the selector. Refinement options include:

• Tag — Match by HTML tag (e.g., H1, DIV).
• ID — Match by the element’s unique identifier (e.g., #sidebar).
• Class — Match by a CSS class applied to the element (e.g., .card-container).
• Href — Match by the URL in a link element's destination (e.g., /settings).
• By order — Match by the element's position among siblings (e.g., 2nd of 3 matching elements).
• By text — Match by the text content inside the element.

The extension validates the selector in real-time. A green checkmark with "Selector is unique and valid" confirms the selector targets exactly one element.

Click Adjust placement if you need to reposition the Embed again.

Style the Embed theme

Embeds use the same themes as Flows 2.0, so both can share a theme for a consistent look. Open the theme editor from Experience Settings > Edit theme. For how to set colors, fonts, corner radius, spacing, and dark mode, see New Themes and advanced styling.

Localize the Embed

Embeds support localization so you can serve your content in multiple languages. You can translate content manually in the builder, upload XLIFF files for bulk translation, or use AI translation to auto-translate into your configured languages.

To set up localization, click the language dropdown in the builder to enable your target languages and start translating.

For full setup instructions — including configuring languages, working with XLIFF files, and AI translation — see Localize experiences.

Set who sees it, then publish

1. In the Appcues App, open the Embed and click Settings.
2. Set Who sees this, Where this appears, and When this shows. See Configure an experience's settings.
3. Publish the Embed. See Publish, schedule, and unpublish an experience.

Confirm it worked

• Click More actions (⋯) > Preview. With a step selected in the Design tab, you can also choose Preview from current step. The Chrome extension opens your Build URL with the Embed rendered inline at the target element.
• The CSS selector shows a green checkmark confirming it's unique and valid.
• Content blocks display in the correct columns and order across all steps.

After you publish to a staging domain or to internal testers, also check:

• The Embed sits inside the target element, placed as you chose: Append, Prepend, or Replace. With Fill Container on, it fills the element's width.
• Images load, buttons work, and iframes show their content. The theme, colors, corner radius, and spacing match your product.
• With the trigger set to When the user reaches the page, the Embed shows on page load. With When an event occurs, it shows once the event fires.
• With Show once, the Embed doesn't come back after you reload. With Show every time, it does.
• The close button shows or hides as your step settings say. With Dismiss permanently on, a closed Embed stays closed after a reload; with it off, it comes back.
• For a multi-step Embed, each step shows its content and moving between steps works.

See Preview and test an experience for how to publish to testers and check who qualifies.