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.
Let me know in the comments below.