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 four types:

• Text — headings, paragraphs, and links.
• Image — a picture or GIF.
• Button — a clickable button.
• iFrame — external content embedded in the step, such as a video or a form from another site.

Add a block

1. Select an empty cell.
2. Choose the block type: Text, Image, Button, 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.

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 in its Design tab:

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

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

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.

For extra behavior, expand Additional options. Here you can Track event (fire a custom event), Set user properties (update an attribute on the user's profile), or Mark Flow as complete. See Customize and configure buttons for more details on these actions.

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

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

Turn on Individual borders to set a different width on each side. This is how you make a single divider — for example, a line on just the bottom edge — or an accent on one side.

• If the sides have different widths, the shared width field reads Mixed.
• The border's style and color apply to the whole border, not per side.
• Turn Individual borders off to go back to one uniform border.

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.