I have created a demo project which you can simply deploy to Heroku using a single click.
And why not use Google’s cloud?
There are three reasons why I have chosen Heroku:
A few things to note:
With all those things in mind, here are the steps:
Go to Heroku and sign up for a free account.
Make sure you are still signed in to Heroku.
Navigate to my GitHub repo and click on “Deploy to Heroku” button.
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).
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”.
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.
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
Follow the instructions here and set up the Heroku CLI.
Make sure you are on the same folder where you saved the file. You can use a command like ls to verify this.
Use the command heroku login and log in to your Heroku account.
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
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.
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):
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.
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