Adding Cards to Your Flow

Cards in Studio allow you to create rich message displays with customizable content. To add cards:

1. Navigate to your desired block in the conversation flow

2. Click the "Add Message" option in the top toolbar

3. Select "CARD" from the message types

4. You can now begin configuring your card content

5. We have two action types for cards: Static & dynamic

We have discussed them in detailed below:

How To Add Static Cards in Flow?

Static cards are straightforward with fixed content:

1. In the right panel, you'll see "Card content" section

2. Enter your card's "Title" - this appears at the top

3. Add a "Description" - provides more details

4. Input an "Image URL" if you want to include an image

5. Under Action Handle Type, select "Static"

6. Add your action buttons with Label and Value pairs

7. Use "Add button" to create more card actions as needed

How To Add Dynamic Cards in Flow?

For advanced use cases, you can make cards dynamic:

1. Switch to "Dynamic" mode in Action Handle Type section

2. Configure the Source Data Variable that will populate your card

3. Set up Label Expression using {{item.label}} syntax

4. Define Value Expression using {{item.value}} syntax

5. The card will dynamically update based on your data source

Here's a practical example that demonstrates how to create dynamic cards:

1. First, ensure your data source variable contains the required card information

2. Set Source Data Variable to your data source

3. Configure Label and Value expressions to match your data structure

4. Card content will update automatically based on the data

Make sure your Source Data Variable is properly set before configuring dynamic cards

This creates a dynamic card that updates its content based on your data source. The card will display the title, description, and any configured actions using the specified expressions.