How to send rich response from Python webhook to Dialogflow Messenger

In this post I will explain how to send rich responses from your webhook code to Dialogflow Messenger.

I will explain the steps for the Description rich response type, and you should be able to follow the same steps and do it for the other rich response types.

Let us start with the agent we used for the beginner tutorial.

First, let us look at the Custom Payload response for the intent called “show.description”

Now trigger this intent in the simulator using the appropriate training phrase.

Go to the History tab and open the Diagnostic Info for this intent.

Click on the ellipsis (three dots) next to the Agent

Click on Raw Interaction Log

This is what the Raw interaction log looks like. Copy the entire section within the fulfillmentMessages section.

Wrap it inside a JSON object and return it from your webhook code. In case the code below is not clear, read the Dialogflow Python Webhook tutorial first.

from flask import Flask
app = Flask(__name__)
def return_description():
  title = 'This is the title'
  line_1 = 'This is line 1'
  line_2 = 'This is line 2'
  return {
        "fulfillmentMessages": [{
            "payload": {
                "richContent": [[{
                    "title":
                    f'{title}',
                    "type":
                    "description",
                    "text": [f'{line_1}', f'{line_2}']
                }]]
            }
        }]
    }
@app.route('/')  # this is the home page route
def hello_world(
):  # this is the home page function that generates the page code
    return "Hello world!"
@app.route('/webhook', methods=['POST'])
def webhook():
  msg = return_description()
  return msg
if __name__ == '__main__':
    app.run(host='0.0.0.0',
            port=8080)  # This line is required to run Flask on repl.it

Notice that I have changed the verbiage slightly. This will help us distinguish between the response coming from the webhook versus response coming from the Custom Payload block. If the response from the Custom Payload block is shown in the next step, it means the webhook call failed. 

Now make sure that you Enable Webhook call on the show.description intent by clicking on the blue toggle switch

Go to the Integrations menu and select the Dialogflow Messenger integration

Click on Try it Now

In the Dialogflow Messenger chat widget, type the same training phrase to trigger the intent

You can see that the response is coming back from the webhook and is rendered correctly in the format of a Description rich response.