Applies to Flows 2.0 (Beta) and Embeds. They share the same experience builder, so these steps work the same for both.

Once you've laid out a step's cells, you fill them with content — text, images, buttons, and embedded frames — and style it, all without custom CSS. This applies to Flows 2.0 (Modals and Tooltips) and Embeds; the blocks work the same everywhere.

This article covers the content that goes inside cells. To arrange and size the cells themselves, see Design step layouts.

The blocks you can add

Each cell holds one block. There are six types:

• Text — headings, paragraphs, and links.
• Image — a picture or GIF.
• Button — a clickable button.
• Icon — a standalone emoji or your own SVG icon.
• iFrame — external content embedded in the step, such as a video or a form from another site.
• Javascript — content rendered by your own code, such as a scheduler or live data from your API. In beta, and only available if JavaScript snippets are turned on for your account. See Add JavaScript snippets.

Add a block

1. Select an empty cell.
2. Choose the block type: Text, Image, Button, Icon, or iFrame.
3. The block appears in the cell, ready to edit.
4. To add several pieces of content, split the cell into more cells first (see Design step layouts), then add one block to each.

Format text

Double-click a Text block to edit it. Its settings open in a side panel with Content and Design tabs, where you can set the text style, alignment, and links.

For a bulleted or numbered list, choose a List type on the Content tab. Bullet color appears below it, so bullets can use a different color from the text.

Personalize text and add emoji

While editing a Text block or a Button label, two shortcuts speed things up:

• Type {{ to insert a user property. Search for the property, then select it — for example, {{given_name}} shows each user's first name at runtime.
• Type : followed by at least two letters to pick an emoji. A complete shortcode is replaced automatically — :wave: becomes 👋.

In both menus, use the arrow keys to move, Enter or Tab to select, and Esc to close.

Add and replace images

The quickest way to add an image is to drag it straight from your computer onto a cell:

1. Drag the image file over the step. The target cell highlights.
2. Drop it. If the cell is empty, an image block is created with your image already in it.
3. If the cell already has an image, you're asked Replace existing image? Confirm to swap it — you don't need to delete the old one first.

Supported files: JPEG, PNG, GIF, and SVG, up to 5 MB. An unsupported or oversized file shows a quick error and changes nothing.

You can also add or replace an image from the image block's settings panel.

Choose how an image fills its cell

An image block has a Fill mode setting on its Content tab. New images start on Fit.

• Fit — the whole image shows inside the cell without cropping. You may see empty space if the image and cell are different shapes.
• Fill — the image covers the whole cell, cropping the edges as needed. No empty space, but parts of the image may be cut off.
• Fixed — the image shows at the Width you set, 250px by default. It never grows wider than its cell and scales down when the cell is narrower. Height follows the image's proportions.

If an image looks wrong, the cell's sizing mode is often the cause — see Design step layouts.

Add an icon

Use an Icon block for a standalone icon with no text. To put an emoji inside a sentence, type : in a Text block instead.

1. Add an Icon block to a cell. A star appears as a placeholder.
2. Click Select an icon. Pick an emoji, or open My icons to upload an SVG or reuse one already in your image library.
3. On the General tab, set Size (8 to 128px), Background Color, Corner radius, and Padding.

Uploaded icons must be SVG files up to 5 MB. The builder can't recolor an icon, so set its color in the SVG file before you upload it.

Embed external content with an iFrame

Use an iFrame block to show content from another site inside your step — for example, a video, a calendar, or a form.

1. Add an iFrame block to a cell.
2. On the block's Content tab, paste the embed code or a URL into the Code or URL field.

Some sites don't allow their pages to load inside an iFrame. If the block stays blank, check whether the source site permits embedding.

Make something happen on click

You can make a Button, an Image, or a Text block do something when a user clicks it.

1. Select the block (or the inline text).
2. Turn on Action on click.
3. Choose what happens:

• Next step / Previous step — move through the steps.
• Go to step — jump to a specific step you choose.
• Go to URL — open a link, optionally in a new tab.
• Trigger Flow — launch another Flow.
• Snooze — dismiss for a set number of days.
• Dismiss — close the experience.
• Run JavaScript — run one of your JavaScript snippets and nothing else. The experience stays open, which is useful in Embeds. See Add JavaScript snippets.

For extra behavior, expand Additional options. Here you can Track event (fire a custom event), Update user properties (change an attribute on the user's profile), Trigger JavaScript snippet (run your own code on click), or Mark Flow as complete. See Add JavaScript snippets for the JavaScript option.

A single Text block can have several links, each with its own action.

Update a user property

Under Additional options, turn on Update user properties and start typing a property name. Matching properties filter as you type. If the property doesn't exist in your account yet, click Create "[name]" under the "not found" message. You no longer need to send the property from your app before you can select it.

Spaces and punctuation are saved as underscores, so Loyalty Tier is stored as Loyalty_Tier. The builder shows you the key before you create it. Capitalization is kept and matters: Loyalty_Tier and loyalty_tier are two different properties.

A property you create here is available right away in the rest of the builder: other blocks in the same experience, other experiences, the profile attribute block, and JavaScript snippets as {{user.Loyalty_Tier}}. It won't appear in targeting conditions and segments in Studio until the property has been recorded on at least one user, so publish the experience and let someone click, or send it once through Appcues.identify() or the Public API.

Reuse content

Copy and paste blocks

Copy, cut, and paste one or more blocks with the standard keyboard shortcuts (Cmd/Ctrl + C, X, and V). Pasting into an empty cell drops the blocks in and splits the cell as needed to fit them — the fastest way to repeat elements, like a row of matching cards. Styling comes along, so pasted content matches the step you paste it into.

Save a step as a template

To reuse a whole step across experiences, save it as a step template rather than rebuilding it. See Use step templates.

Style a step or cell

Select a step or a single cell to open its settings, then use the Design tab.

Background and fill

The background of a cell or of the whole step can be one of three fill types:

• Color — a solid color.
• Gradient — a color gradient.
• Image — a background image.

Gradients and background images no longer need custom CSS.

Borders

Set a Border width in px. At 0px there's no border. Enter a width above 0 and the color and style controls appear, with the style starting at solid.

To give each side a different width, click the Individual borders icon next to the width field and set left, top, right, and bottom. This is how you make a single divider, for example a line on just the bottom edge. If the sides differ, the width field reads Mixed. Style and color apply to the whole border, not per side.

Corner radius

Set Corner radius in px. At 0px corners stay square. To round corners differently, click the Individual corners icon and set each corner. If they differ, the field reads Mixed.

Spacing

Padding and margin are set on the block itself (in its Design tab), not on the cell around it.

Reuse styles with themes

For styling you'll use again — button styles, text styles, container styles — build it once and save it as a theme variant instead of restyling each block. See New Themes and advanced styling.

Confirm it worked

• Use Preview in the builder to see the step as an end user would.
• Check it at a narrow width to confirm text and images still look right.