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. If you don't have a sample Dialogflow agent you can already use for the test, you can download one from my Dialogflow for WordPress course.
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
If you want to skip all these steps of setting up a rich website chatbot, a hosted service 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. In my Dialogflow for WordPress course, I explain the pros and cons of using a hosted service, and also provide a couple of examples of such hosted services that you can try.
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.