Card Step

Card Step

The Card Step will allow you to provide some on-screen information in-line with the conversational experience & interface, either on a screen-based device or on mobile.

Note: The Card Step is currently available on Chat Assistants only

Tip: You can also use the Card step as a visual prompt to present users with Buttons to guide the conversation.

Chat Assistants

To get started with the Card Step for chat assistants, ensure you navigate inside a Card Step and have an intended Image or GIF to upload into your design.

Tip: You can add your desired Image or GIF by dragging-and-dropping it into the editor, or click Browse and select one from your computer. You will also notice that your uploaded file has an auto-generated hosted image link by Voiceflow.

Once your Card Image is uploaded, you will notice that the icon on the Card step canvas-view will update to your Card image preview.

You can also use a link directly with the image hosted and paste it directly on the 'Link' tab. You can also use a variable (using'{' ) to host the image link to make your card image feeds more dynamic.

Card Title & Card Description

You can also give your Card a Title and an associated Description. In each of these fields, you can also use variable(s) (using'{' ) to make your card text fields more dynamic and personalized. And similar to Text steps, descriptions support markup styling. 

Adding Buttons to Cards

You can configure & add paths to your Cards and present the end-user with Buttons. You can click the (+) by the Buttons section to add Buttons and configure the Button label (with text or variables).

Cards support an unlimited number of buttons (though we recommend max 3-5). For now, card buttons can only be connected to conversation paths.

Unlike the Button Step, Card buttons persist after the user’s initial interaction. This means they will remain active, and the user may return to the Card during their session and make another selection.

A video breakdown of Cards can be found below: