Page Comparison

Overview

The standard user interface through DDNA Studio provides the opportunity to make conversations multi-modal through supplemental content and displays known as ‘Content Blocks’. By sending additional data from your conversation platform, you are able to display richer content at relevant points of the conversation along with the spoken audio stream.

Prerequisites and Known Limitations

Using Content Blocks

To enable the display of rich content, our standard user interface offers the following content options: Images, Lists, Links, Markdown, and Video.

Single Images

Status
colour Purple title DEFAULT UI

Status
colour Green title Widget

Displays a single image, either from a URL or encoded string.

Payload

The payload must be in a valid JSON format.

{
  "type": "image",
  "id": "image",
  "data": {
	"url": "https://placekitten.com/500/500",
	"alt": "This is a cat"
  }
}

Properties

Available within the “data” attribute of the payload.

Example

Multiple Image Sequence

Status
colour Purple title DEFAULT UI

Status
colour Green title Widget

You may display different images, one at a time by defining the individual data for each image in the NLP and using multiple @showCards() commands in the Conversation Response.
Example:

public-mydog

{
  "type": "image",
  "id": "image-dog",
  "data": {
	"url": "https://www.yoururl.com/dog.png",
	"alt": "This is a dog"
  }
}

public-mycat

{
  "type": "image",
  "id": "image-cat",
  "data": {
	"url": "https://www.yoururl.com/cat.png",
	"alt": "This is a cat!"
  }
}

Conversation Response

Here is a picture of a cat @showCards(mycat) #PauseOne and here is a picture @hidecards() of a @showcards(mydog) dog.

Options

Status
colour Purple title DEFAULT UI

Status
colour Green title Widget

Displays a collection of prompts/buttons for the user to guide them through a conversation. When an option is clicked, its value is sent through to the NLP platform in the same way as a spoken command.

Payload

The payload must be in a valid JSON format.

{
  "type": "options",
  "id": "options",
  "data": {
    "options": [
      { "label": "First Option", "value": "Tell me about the option one"},
      { "label": "Second Option", "value": "Tell me about the option two"},
      { "label": "Third Option", "value": "Tell me about the option three"}
    ]
  }
}

Properties

Available within the “data” attribute of the payload.

Example

External Links

Status
colour Purple title DEFAULT UI

Status
colour Green title Widget

Displays a hyperlink in the form of a clickable button, when clicked, opens the link in a new tab of the browser.

Payload

The payload must be in a valid JSON format.

{
  "type": "externalLink",
  "id": "externalLink",
  "data": {
    "url": "https://www.soulmachines.com",
    "title": "Soul Machines",
    "imageUrl": "https://www.soulmachines.com/wp-content/uploads/cropped-sm-favicon-180x180.png",
    "description":"Soul Machines is the leader in astonishing AGI"
  }
}

Properties

Available within the “data” attribute of the payload.

Example

Internal Links

Status
colour Green title Widget

Displays a hyperlink in the form of a clickable image, when clicked, opens the link in the same tab of the browser.

Payload

The payload must be in a valid JSON format.

{
  "type": "internal",
  "id": "internalLink",
  "data": {
    "url": "https://www.soulmachines.com",
    "title": "Soul Machines",
    "imageUrl": "https://www.soulmachines.com/wp-content/uploads/cropped-sm-favicon-180x180.png",
    "description":"Soul Machines is the leader in astonishing AGI"
  }
}

Properties

Available within the “data” attribute of the payload.

Example

Markdown

Status
colour Purple title DEFAULT UI

Status
colour Green title Widget

Displays styled markdown compatible content.

Payload

The payload must be a valid JSON format, including the value of the “text” attribute, which must be escaped in order to be valid.

{
  "type": "markdown",
  "id": "markdown-content",
  "data": {
    "text": "## An Interesting List\r\n 1. Most interesting\r\n 2. Less interesting\r\n 3. Least Interesting"
  }
}

Properties

Available within the “data” attribute of the payload.

See Also

• Stackedit for a visual markdown builder

• JSON Escape / Unescape to ensure markdown is “escaped” into a safe JSON format

Example

Video

Status
colour Purple title DEFAULT UI

Displays a video player for a specific YouTube video, enabling the end-user to watch a video in line with the experience with the Digital Person.

Payload

The payload must be in a valid JSON format.

{
  "type": "video",
  "id": "youtubeVideo",
  "data": {
    "videoId":"vxmthHfkoaw",
    "autoclose":"true"
  }
}

Properties

Available within the “data” attribute of the payload.

After Playback

If the autoclose has not been configured, the user can click the “I'm done watching” button at any time to close the video player.
At this point the text “I'm done watching” is sent to your NLP engine so you may continue the conversation—you must create an intent to match “I'm done watching” and respond accordingly.

Example

Implementing into your NLP

See Building Content Cards for NLP-specific examples and how to use Content Cards in a custom UI.

IBM Watson (classic) sample

This sample contains a set of Nodes that demonstrates how to display each of the supported content types.

1. Download the sample .json file

2. Import the file to your Watson skill.

Google Dialogflow ES sample

This sample contains a set of Intents that demonstrates how to display each of the supported content types.

1. Download the sample .zip file

2. Import the file to your Dialogflow agent.

Related Topics

• Building Content Cards