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

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

  

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. You configure this in the Experience Settings panel (click the gear icon in the builder toolbar).

Under Target, enter a CSS Selector for the element where the Embed should appear. This must be a valid, unique selector on the target page.

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.

Click Open in Extension to launch the Appcues Builder Chrome extension on your site. This lets you see the Embed rendered in context and visually adjust the target element.

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.

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.

Localization and layout direction

The builder toolbar includes localization and layout controls:

• Localization (globe icon) — Set a default locale and configure additional languages. Click Localization settings to manage locales for this Embed.
• LTR / RTL toggle — Switch the layout direction between left-to-right and right-to-left. Use this for languages like Arabic or Hebrew.
  
  

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.