Home / DialogFlow ES / Dialogflow Viewer: A tool to share your agent intents more easily
DialogFlow ES

Dialogflow Viewer: A tool to share your agent intents more easily

This website contains affiliate links. See the disclosure page for more details. 

Let me address the first question:

Why do we need a tool to do this when we can just share the agent ZIP file directly?

There are a few reasons I can think of:

1 You don’t want to share some details such as fulfillment URL

Exposing your fulfillment URL to the outside world isn’t a very smart idea unless you have some authentication of the user request.

Of course, you can unzip the file, redact the information, and then zip it up and share it. But that is just an extra step which you need to remember to do every time.

2 People don’t want to import your agent ZIP file

The other side of the equation is that even if you don’t mind sharing your agent ZIP file, folks who want to help out are not going to bother loading the agent ZIP file into their Dialogflow account usually.

3 There are limits on the number of projects

This is tied to the above point, but if someone went the extra 100 miles for you and actually imported the agent ZIP file, they will probably be able to help only one or two at a time (as many projects as they wish to use up for this task).

“Well!”, you say, “they could always use the revisions feature.”

Sure, someone might do that, but that would be going an extra 1000 miles 🙂

4 Browsing through the intents inside the Dialogflow console takes time

Even if someone does import your agent ZIP file, they might not be able to quickly glance through all the information like they could if they were using this tool.

Here is an example output from my tool (right click on image and select “View image” to see it in full):

Its all there – in one (long) page.

Hopefully, you think it is a good idea to use this tool.

Who is this for?

The tool is most useful when you have some questions about why your Dialogflow agent behaves in a certain way.

If your question is around higher-level design (e.g. how to create an agent to do X), this tool will be less useful.

Another way to think about it:

Suppose you expected your conversation to flow in a certain way. But the actual conversation works differently than what you have predicted. This tool could be used (along with your Expected and Actual conversation flow descriptions) to help others diagnose what is going on in your agent.

How to use the tool

1 First, export the agent ZIP file from your Dialogflow console

2 Go to the Dialogflow Viewer page

3 Load the agent ZIP file

4 Copy the HTML from the text box

5 Go to the Glitch project

6 Create a copy of index-template.html

7 Rename the file as index.html

8 Say “OK” when it prompts for the overwrite

9 Now click on index.html, and place the cursor within the div shown in the picture. Once you place the cursor correctly, paste the HTML you copied in step 4

10 The pasted HTML will look like this (it will depend on your agent, of course)

11 Now go to the top menu and click on the Show menu. Then click on “Show in new window”

12 You should see something like this (again, depends on your agent)

Note: the URL in the address bar is your project URL, which is what you will share with others. In this case it says https://fabulous-sweatpants.glitch.me

13 Copy the webhook-template.html file

14 Rename it as webhook.html and overwrite as in the previous step. Your webhook.html will look like this:

15 Now copy your webhook code from your IDE (or inline editor, or wherever you are currently writing the code) and paste it between the <code></code> tags.

16 For example, here is some example NodeJS code:

17 This is what it looks like after you copy paste the code:

18 Now if you go to your project URL and add a /webhook.html you will see this: in the case of the project URL above, it would be https://fabulous-sweatpants.glitch.me/webhook.html

You can improve the formatting by improving the formatting of the corresponding code inside the <code> tags.

Video Demo


Let me know in the comments below.

The recently released Zoho SalesIQ v2 allows non-programmers to build chatbots using an easy-to-use code less bot builder. What is really unique about Zoho SalesIQ is the fact that you can also integrate AI into their code less bot builder. In my Zoho SalesIQ chatbots course, I explain how to use Zoho SalesIQ to add a chatbot to your website.

"The magic key I needed as a non-programmer"

The custom payload generator was the magic key I needed (as a non-programmer) to build a good demo with rich responses in DialogFlow Messenger. I've only used it for 30 minutes and am thrilled. I've spent hours trying to figure out some of the intricacies of DialogFlow on my own. Over and over, I kept coming back to Aravind's tutorials available on-line. I trust the other functionalities I learn to use in the app will save me additional time and heartburn.

- Kathleen R
Cofounder, gathrHealth

Similar Posts


  1. Thanks for all your tutorials even though I’ll now be spending time reviewing them instead of building bots. Well presented and exceptionally informative. The knowledge will certainly assist me with combining DialogFlow with ActiveChat and other bot builders I have.