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

You can build Embeds in two places:

• Studio — The web-based editor at studio.appcues.com. Good for copy changes, color tweaks, or simple updates. You won't see the Embed in the context of your live product.
• Appcues Builder — The Appcues Builder Chrome extension, which loads on top of your live site. You see the Embed rendering inside your actual product UI in real time. Recommended for anything requiring visual precision.

You can start in Studio and switch to the extension at any point by clicking Open in Extension in the Experience Settings panel.

Create a new Embed

Go to Experiences > Embeds and click Create. The creation dialog asks for three things:

• Embed name — An internal name to identify this Embed. Not visible to users.
  

  

• Preview URL — The URL of the page in your app where you want to preview the Embed. The builder uses this to load your site in the background.
  

  

• Theme — Select an existing embed theme or use the default. You can edit the theme later from the builder.

2. Click Create. The Embed builder opens.

You can also create new Embeds directly from the Builder. Open the Appcues Builder (Chrome Extension) and click on Add an Embed on the builder modal.

 

Add content blocks

Each step in an Embed is built from sections — horizontal and vertical containers that sit side by side. Every step starts with one section, but you can add more by clicking the split cell icon (vertically or horizontally). This lets you create any layout you need: two columns, three columns, a full-width section above a multi-column row, or any combination. Each section holds its own content blocks independently.

Click the + icon inside a column to add a block. Available block types:

• Text — Rich text including headings, body copy, and inline formatting.
• Button — A clickable CTA with multiple action options: Next step, Previous step, Go to step, Snooze, Dismiss, Go to URL, or Trigger Flow. Buttons also support Track event and Update user properties toggles to fire analytics events or update user data when clicked. See Buttons for more details.
• Image — Upload an image with alt text. Optionally configure an Action on click to make the image interactive.
• IFrame — Embed external content by entering a URL or pasting a Code snippet. Use this for videos, forms, or third-party widgets.

When you select a block, a floating toolbar appears with options to resize the block's layout width, reorder it in the stack, duplicate it, delete it, or add a new block adjacent to it.

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 and height — 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), 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.

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.

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

In Experience Settings, click Edit theme to open the theme editor.

Configure the theme to match your product's look and feel:

• Theme settings — Name the theme and optionally enable dark mode.
• Colors — Set foreground (text), background, and primary (buttons/accents) colors.
• Interface — Choose a font family, font size (S/M/L), corner radius, and spacing (S/M/L).

Click Save to apply the theme.

Themes are reusable. If you create multiple Embeds, they can share the same theme for a consistent look.

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.

Confirm it worked

• Click the eye icon in the builder toolbar to open a live preview. Your Build URL loads with the Embed rendered inline at the target element, and a "Previewing" toolbar appears at the top of the page.
• 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.

See Target and publish an Embed for publishing steps.