Skip to main content

Flow step

The Flow Step component in Experience Designer lets you customize the appearance of the questions and answers in your experience. This guide explains how to use the Flow Step component for styling your Digital Assistants and Visual Configurators.

Adding the Flow Step component to the canvas​

To style your assistant, add the Flow Step component from the Components List in Experience Designer. Here’s how:

  • Select the Flow Step component from the list below the canvas.
  • Drag the Flow Step component and drop it onto the canvas.

Flow step

Layout options in Flow Step​

The Flow Step component provides two layout options: Vertical and Horizontal. Choose the layout that works best for your assistant's design.

Flow Step

  • In the vertical layout, questions and answers are stacked vertically, creating a clean, linear flow.
  • The horizontal layout offers two positioning options for answers:
    • Left position: Answers are displayed to the left of the question.
    • Right position: Answers are displayed to the right of the question.

Animations​

Animating the question transitions can make your assistant more engaging.

Learn more.

Styling subflows in Visual Configurators​

For Visual Configurators, you can style only the Preceding Flow in Experience Designer. If your configurator has sections with subflows, these will automatically inherit the same styling as the preceding flow.

Flow Step migration​

If you're using an older theme, you might encounter the deprecated Flow Step. This component is still available in existing themes, but it's no longer supported for new designs.

Step 1: Check if your flow step is deprecated​

  • Look for "deprecated flow step" in the component name on the canvas or in the flow step settings.
  • If you're using the configurator panel, double-click the component to access its settings.

Step 2: Create a backup (optional)​

  • Save a copy of your theme using the "Save theme as..." option.
  • Test the migration on the backup before applying it to the original theme.

Flow Step

Step 3: Migrate the flow step​

  1. Update components to the latest version.

Flow Step

If your theme still uses the deprecated flow step, you’ll see the following notification after updating components:

"This theme uses Flow Step (Deprecated). The deprecated flow step will soon be disabled."

To see the message again after it disappears, refresh the page.

Flow Step

  1. In the pop-up message, click the "Create new flow step" button. This will automatically generate a new flow step above the deprecated one.

  2. Compare the flow steps visually. The new and old flow steps should look similar, but minor differences may occur due to CSS changes or breaking updates. If custom styling is missing, check the CSS tab in the new flow step. Update your classes or IDs to match the new flow step.

Flow Step

If the design doesn’t look correct, refresh the page and compare again.

  1. Once the new flow step matches your design, delete the deprecated version from the canvas.

Step 4 (optional): Migrate flow step for detached devices​

Detached devices (e.g., mobile) must be migrated separately.

Flow Step

If you have a detached mobile view (or another separate device layout):

  1. Switch to that device view (e.g. mobile).
  2. Refresh the page to activate the migration pop-up.
  3. Click "Create new flow step" and complete the migration.
  4. Refresh the page.

If the migration pop-up doesn’t appear, refresh the page again while in the correct device view.