xApp: Show Adaptive Card

xApp Show Adaptive Card Node configuration panel

Description

An xApp page can be built by providing an adaptive card in JSON format. To submit data back to the Flow, include an action of type Submit within the adaptive card. To view submitted data, use the Interaction panel. You can access submitted data in the data object by clicking INFO > Input, or in the chat by adding a Say Node and specifying Submit payload: {{JSON.stringify(input.data)}} or Submit payload: {{JSON.stringify(ci.data)}}. As an alternative, for more customization, you can create your own Node by implementing and uploading an Extension.

Parameters

AdaptiveCard Definition

The Adaptive Card Designer can help you define an adaptive card. Copy the JSON card payload and paste it into the form.

Style Overrides

To override the background and interaction element colors, use CSS color codes.

Waiting Behavior

To wait for a user input, for example, when the user clicks Submit on the Ordering page, activate the Waiting Behavior option. You can store the input result in the Context and use the data in the other Nodes.

xApp Overlay

By default, an xApp page opens in a separate browser tab. If you are using Webchat v3, you can override this behavior to open your xApp pages directly in Webchat v3. The pages are presented in the format of screens.The table lists the parameters for configuring xApp screens in the Webchat v3 interface.

Parameter	Type	Description
Header Title	CognigyScript	This parameter shows a title of the screen. The title displayed at the top panel of the Webchat v3 interface. If no title is provided, the top panel remains empty.
Show Close Icon	Toggle	This parameter displays the `x` button in the upper-right corner of the screen. This parameter is enabled by default.
Send Event on Close Icon Click	Toggle	This parameter records the event when the user closes the screen without submitting. This parameter is disabled by default.
Auto Open	Toggle	This parameter automatically opens the screen within the Webchat v3 interface. This setting is enabled by default. If you want xApp pages to open in browser tabs instead of within the Webchat v3 interface, activate this setting.
Close Overlay on Submit	Toggle	This parameter closes the screen after the user clicks the Submit button. This parameter is enabled by default.
Feedback Message on Submit	CognigyScript	This parameter sends a message to the chat after the user clicks the Submit button.

Examples

Display Dynamic Values in Adaptive Cards

In adaptive cards, you can use data from the Input, Context, and Profile objects. To display values dynamically, use CognigyScript to reference them.

Example 1: Display a Single Value

To display the user’s first name by retrieving it from the Profile object, include this JSON in your adaptive card:

{
  "type": "TextBlock",
  "text": "Hello, {{cp.firstName}}!"
}

If the user’s first name is Alice, the xApp will display:

Hello, Alice!

Example 2: Display an Array

Assume that you have the following array stored under cart in the Context object:

{
  "cart": [
    { "name": "Apple", "price": 1.2 },
    { "name": "Banana", "price": 0.8 },
    { "name": "Orange", "price": 1.5 }
  ]
}

The Entry from the Array
All Entries from the Array
Quick Debug with JSON.stringify

To access a specific entry from the array, use its index.Adaptive Card JSON:

{
  "type": "TextBlock",
  "text": "Item: {{cc.cart[0].name}}, Price: {{cc.cart[0].price}}"
}

Output:

Item: Apple, Price: 1.2

In the Flow editor, place the Code Node above the xApp: Show Adaptive Card Node to format the array into a string:

const cart = cc.cart || [];

cc.cartFormatted = cart
  .map(item => `- ${item.name}: $${item.price}`)
  .join('\n');

The string is stored under cartFormatted in the Context object.Adaptive card JSON:

{
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    { "type": "TextBlock", "text": "Your shopping cart:" },
    { "type": "TextBlock", "wrap": true, "text": "{{cc.cartFormatted}}" }
  ]
}

Output:

Your shopping cart:
- Apple: $1.2
- Banana: $0.8
- Orange: $1.5

If you want to view the array for debugging, use JSON.stringify in the adaptive card.Adaptive card JSON:

{
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    { "type": "TextBlock", "text": "Cart contents:" },
    { "type": "TextBlock", "wrap": true, "text": "{{JSON.stringify(cc.cart)}}" }
  ]
}

Output:

[
  {"name":"Apple","price":1.2},
  {"name":"Banana","price":0.8},
  {"name":"Orange","price":1.5}
]

Overview

AI Agents

Human Escalation

Platform Features

For Developers

Administration and Installation

Description

Parameters

Examples

Display Dynamic Values in Adaptive Cards

More Information

​Description

​Parameters

​Examples

​Display Dynamic Values in Adaptive Cards

​More Information

Description

Parameters

Examples

Display Dynamic Values in Adaptive Cards

More Information