Sample JSON payloads for Dialogflow Messenger

Link to tool

Timestamps:

  • 00:00 About this tool
  • 00:58 Description type
  • 03:34 Info card type
  • 04:42 Image Type
  • 05:32 Button type (for generating clickable hyperlinks)
  • 07:40 List type
  • 09:26 Suggestion chips type (for generating buttons)
  • 10:47 Accordion type
  • 12:51 Full Demo


The sample JSON tool provides you with custom payload JSON that you can copy and paste directly into Dialogflow console so you can display rich responses inside Dialogflow Messenger.

There are 4 actions you can take for each response type.

Preview

Clicking on this will allow you to see a preview of the current JSON in the Dialogflow Messenger chat widget. If the JSON is invalid, it will show an alert message instead.

Copy JSON to clipboard

This will copy the current JSON on the left to your clipboard.

Clicking on the Copy button will highlight the JSON being copied so you can get some visual feedback.

Reset JSON to initial value

This will reset the JSON to the initial value you see when you first load the page. That is, if you make edits to the JSON, you can go back to the original version of the JSON by clicking this button

Visual editor

This button is only available where I have built the appropriate visual editor tool. The basic idea here is that instead of making your JSON edits directly, you can use a visual editor to generate the same custom payload JSON.