Code Sample

I have created a demo project which you can simply deploy to Heroku using a single click.

First, why Heroku?

And why not use Google’s cloud?

There are three reasons why I have chosen Heroku:

  • the 1-click option isn’t available on the Google cloud
  • You don’t need to understand any complex Heroku architecture to keep your usage within the free tier. With the Google Cloud, this isn’t quite as simple.
  • certain aspects of the sample code, such as setting up the authentication to interact with your Dialogflow bot’s REST API, are easier to teach using Heroku

A few things to note:

  • it is based on the code I have explained in my Dialogflow rich webchat tutorial for the most part, but there are some differences – specifically around config settings on Heroku
  • this sample project should be considered as a way to quickly test the feasibility of this approach for your particular use case. Specifically, I suggest you use it to test your bot’s conversation flow to the full extent possible….
  • …. but before you can use the code in production, you probably need to improve it quite a bit
  • you should also understand that building a proper website chatbot requires quite a lot of developer hours. Consider this as just a starting point.

With all those things in mind, here are the steps:

1 Create an account on Heroku

Go to Heroku and sign up for a free account.

2 Click on the Deploy to Heroku button

Make sure you are still signed in to Heroku.

Navigate to my GitHub repo and click on “Deploy to Heroku” button.

3 Follow the instructions to create a new Heroku app

You should create a unique app name (the app name must be unique across all Heroku apps, so you could probably add your organization’s name into the app). The app name must be lowercase, and shouldn’t have any special characters except – (hyphen) and _ (underscore).

4 View the app

Heroku will take a few seconds to deploy the app.

You will see it run a set of scripts, and as each step completes, there will be a checkmark next to it to indicate the completion. Click on the View button when you see the message that “Your app was successfully deployed”.

5 You should be able to see the rich webchat UI

When you click on the View button, if everything works properly, you should already be able to see your app’s user interface.

The chat itself doesn’t work yet. You need to connect it to your Dialogflow agent by following the remaining steps.

6 Download the client secret JSON file from Dialogflow

Follow the steps from this tutorial and download the client secret file to some folder on your local machine. Name the file client-key.json

7 Set up the Heroku CLI

Follow the instructions here and set up the Heroku CLI.

8 Open Terminal (command prompt) in the folder where you saved the client secret JSON file

Make sure you are on the same folder where you saved the file. You can use a command like ls to verify this.

9 Login to Heroku

Use the command heroku login and log in to your Heroku account.

10 Set git remote

Use the command

heroku git:remote -a app_name

to set the current app. Suppose the app name you selected was rich-webchat-001 then your command will be

heroku git:remote -a rich-webchat-001

11 Set up the auth settings for current app

Use this exact command (don’t remove spaces, don’t remove the < sign)

heroku config:set CLIENT_SECRET="$(< client-key.json)"

If you do this correctly, you should actually see that Heroku CLI has taken the file contents and set it as a config variable called CLIENT_SECRET.

12 Try out your web chat

You can now try your webchat by typing a message into the input box. You should see the response coming back from your Dialogflow agent.

For example, you can see that the response below has four different aspects of rich website chatbots (which you don’t get in the 1-click web demo integration):

  • bold formatting (rich text)
  • line breaks
  • clickable hyperlinks
  • buttons

Hosted service

If you want to skip all these steps of setting up a rich website chatbot, a hosted service such as BotCopy will just do all this for you (that is, they “host” this service for you on their servers) and will charge you a monthly fee.

Note: The code used by these hosted services have nothing at all in common with the code sample I have used in this tutorial. I am just pointing out that this is another option if you wish to add a rich Dialogflow chatbot to your website.

Live Webinar

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