Share via


Ask questions with Adaptive Cards

In Copilot Studio, you can use Adaptive Cards to ask questions to the agent user. An Adaptive Card node creates a dialog that users can interact with, resulting in variables your agent can reuse later in the conversation. An Adaptive Card can have one or more submit buttons, and optionally one or more form input fields.

Screenshot of a configured Adaptive Card collecting information from the user as part of a conversation.

This functionality is best used in scenarios when:

  • You want to control the look and feel of a set of options for selection.
  • You want to offer a form to fill out.
  • You find that a combination of links and images might help the customer complete the task at hand.

An Adaptive Card node is appropriate when you want the customer to interact with the card directly—for example, to submit information. If your Adaptive Card doesn't have a Submit button, and is only for display purposes, you should add it to a Message node instead. For more information about adding an Adaptive Card to a Message node, see Add an Adaptive Card. Depending on your purposes, it's also possible to add Adaptive Cards to Question nodes.

For more information about the Adaptive Card node, see Ask with Adaptive Cards.

Configure an Adaptive Card node with a JSON payload

  1. Select the More icon () of the Adaptive Card node, and then select Properties.

  2. In the Adaptive Card node properties panel, select Edit adaptive card. The Adaptive card designer panel opens.

  3. Copy the example JSON payload for a demo request, for example, and paste it into the Card payload editor pane.

  4. In the designer, you can change properties of elements for your card, or edit the JSON payload directly in the Card payload editor pane. When you're done updating your card's design, select Save and close the designer. The Adaptive Card node reflects your changes.

    Screenshot of an Adaptive Card node configured with an Adaptive Card for a demo request.

Example JSON payload for an Adaptive Card

The following example JSON payload produces an Adaptive Card for a demo request.

{
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [{
      "type": "ColumnSet",
      "columns": [{
          "type": "Column",
          "width": 2,
          "items": [{
              "type": "TextBlock",
              "text": "Demo Request",
              "weight": "Bolder",
              "id": "Title",
              "size": "ExtraLarge"
            }, {
              "type": "TextBlock",
              "text": "Which product demo are you interested in?",
              "isSubtle": true,
              "wrap": true,
              "id": "acInstructions",
              "size": "Large"
            }
          ]
        }
      ]
    }, {
      "type": "Input.ChoiceSet",
      "placeholder": "Placeholder text",
      "choices": [{
          "title": "Office 365",
          "value": "Office 365"
        }, {
          "title": "Dynamics 365",
          "value": "Dynamics 365"
        }, {
          "title": "Azure Services",
          "value": "Azure Services"
        }, {
          "title": "Power Platform",
          "value": "Power Platform"
        }
      ],
      "style": "expanded",
      "id": "acLeadProductInterest",
      "isMultiSelect": true
    }
  ],
  "actions": [{
      "type": "Action.Submit",
      "title": "Submit"
    }
  ]
}