✨Crafting Code with a Smile for 8 Years:) Merging the Formal Dance of Angular, the Playful Rhythms of React, and the Next-level Moves of Next.js 🚀
Source: Nidhinkumar
Overview
The direct integration of Twilio in Dialogflow has been deprecated from July 6, 2020, and many live bots will be in the stage of ending. To avoid that we can use the OpenSource integration of Twilio using Google Cloud Run.
We will see how to deploy the Opensource Integration of Twilio using Google Cloud Run for a simple FAQ Chatbot which provides the frequently asked questions about Google Cloud.
Objectives
Create a simple FAQ chatbot using Dialogflow and Google CloudFunctions
Twilio Setup
Enable CloudRun and API’s for the project
Setup Google Cloud Command line tool
Clone the Dialogflow integration and update Infos
Deploying to Google Cloud Container Registry and Cloud Run
Connect Whatsapp with Twilio Sandbox
Test the integration
1. Create a simple FAQ chatbot using Dialogflow and Google CloudFunctions
Open Dialogflow if you are a new user you could see a page like below
Dialogflow-Sign in
Click Sign-in with Google and click allow for the options given. Once signed-in successfully, you could see a review account settings page like below
Account Settings page
Select your country and accept the terms of service and click ACCEPT. Once Accepted you could see a screen like
Agent Page
Click CREATE AGENT and add the agent name like below
Agent Creation
Click CREATE once the agent name is added(It might take some time to complete the setup :)
Once the agent is created click on the Gear icon next to the agent name where you could see a screen like below
Beta options
Enable the BETA FEATURES. It is needed because we are going to use the Knowledge (beta) for our FAQ Bot.Once enabled click SAVE
Now we will add data to the Knowledgebase for that click Knowledge which could be seen on the left-hand side menu
Knowledge Base
Click CREATE KNOWLEDGE BASE now you could see a screen like below
knowledge base name
Add the knowledge base name and click SAVE. Now you could see a page like below
Knowledge document
Click the Create the first one link and you could see the following screen. Add the document name and select the knowledge type as FAQ and mime-type as text/html. Click on the URL and add the below URL https://cloud.google.com/storage/docs/faq
Document creation
Once the form is filled click CREATE and it will take some minutes to load the data into the knowledge base.
Once the data is loaded into knowledge base you could see the screen like below
storage FAQ
once you click the view Detail you can see the list of questions and answers like below
cloud storage questions
Now go back and click the Response and click ADD RESPONSE
Add Response
Now click SAVE once the ADD RESPONSE is done
Response save
similarly, you can add other knowledge bases like compute engine, cloud identity by using the below URL’s
Now you could see the knowledge base list like below
Knowledgebase list
Now we can test the knowledge base data in Dialogflow
Dialogflow response
Now we have created a simple FAQ Bot using Dialogflow. Next, we will see how to setup Twilio
2. Twilio Setup
To make our bot work in Whatsapp we are using Twilio. Go to the Twilio page and do the signup if you are a new user else login with the credentials available.
If you have an existing project means you can skip this step else create a new project and click Programmable SMS and click Whatsapp now you could see a page like below
Twilio Sandbox
Now copy that phone number and create a contact in your phone and then open Whatsapp and select that contact and type the code join bush-period (add the code which you see in your screen :)
Once the test connection is completed click Home icon where you could see the ACCOUNT SID and AUTH TOKEN copy both the credentials and keep it handy we will use it later
Account SID and Auth Token
Now the Twilio setup is completed
3. Enable CloudRun and API’s for the project
Now we will start the integration of Twilio with Dialogflow for the first open the Dialogflow and click the Gear icon now you could see a screen like below
Google Project
Now copy the Project ID which we will use it later. once it is copied click on the Service Account which will open the Google Cloud Console (GCP)
Make sure your Dialogflow account and the GCP account have the same Gmail account
Creating Key
Now click on the menu options and click Create key which will open the private key options select JSON and click CREATE
Private key generation
Now the service file will be downloaded to your local machine. keep it aside we will use it later.
Now we will enable Billing for the account in GCP. Go to the GCP console and select Billing and select the project and click the menu options and click the Change Billing
Enabling Billing
Enable Cloud Build and Cloud Run API for the project here. Select the project and click CONTINUE
Enabling Cloud API and Run API
Once the setup is completed you could see a screen like below
API’s Enabled
4. Setup Google Cloud Command line tool
On the gcloud CLI documentation page, select your OS and follow the instructions for the installation
Once the installation in your local machine is completed restart your terminal/system. To check whether gcloud has installed properly type the below command and check
gcloud
Now you could see the options like below
gcloud
Now we have successfully installed gcloud in local machine
5. Clone the Dialogflow integration and update Infos
Now we will clone the Dialogflow integration and update the Docker and Twilio with Account SID and AuthToken
once the repository is cloned navigate to the dialogflow-integrations directory using the cd command
cd dialogflow-integrations/
once navigated open the Dockerfile in a text editor and change the ENV INTEGRATION to twilio
# Set this environmental variable to the integration you want to use
ENV INTEGRATION=twilio
Click SAVE and open the twilio folder and open server.js file and add the
projectId which we have taken from the Dialogflow earlier
phoneNumber from the Twilio Dashboard (Number starts from +143 ..)
accountSid and authToken which we have from Twilio Dashboard earlier
const projectId = 'twilioopensource-cwahci'; //add your project id const phoneNumber = "//add your twilio phone number"; const accountSid = 'Place your accountSid here'; const authToken = 'Place your authToken here';
Once the details are filled click Save and open botlib directory and select the dialogflow_session_client.js file and do the changes in the dialogflow import
const dialogflow = require('dialogflow');
//change it like below
const dialogflow = require('dialogflow').v2beta1;
The reason for changing to v2beta1 is since the knowledge base in beta and if we want the beta features to work we need to add the v2beta1 in dialogflow
Click Save and copy the JSON file which we have downloaded earlier and paste it in the twilio folder and copy the name of that file with the extension which we will use in the next step.
6. Deploying to Google Cloud Container Registry and Cloud Run
In your local terminal, change the active directory to the repository’s root directory.
Run the following command to save the state of your repository into GCP Container Registry. Replace PROJECT-ID with your agent’s GCP Project ID and PLATFORM with the platform subdirectory name.
Deploy your integration to live using the following command. Replace PROJECT-ID with your agent’s GCP project Id, PLATFORM with the platform subdirectory name, and YOUR_KEY_FILE with the name (not path) of your Service Account JSON key file.
gcloud beta run deploy --image gcr.io/PROJECT-ID/dialogflow-PLATFORM --update-env-vars GOOGLE_APPLICATION_CREDENTIALS=YOUR_KEY_FILE --memory 1Gi
like below
gcloud beta run deploy --image gcr.io/twilioopensource-cwahci/dialogflow-twilio --update-env-vars GOOGLE_APPLICATION_CREDENTIALS=twilioopensource-cwahci-2aa67554766e.json --memory 1Gi
When prompted for a target platform, select a platform by entering the corresponding number (for example, 1 for Cloud Run (fully managed)).
When prompted for a region, select a region (for example, us-central1).
When prompted for a service name hit enter to accept the default.
When prompted to allow unauthenticated invocations press y.
Once the deployment is completed copy the URL
7. Connect Whatsapp with Twilio Sandbox
Now copy the URL and open Twilio Whatsapp -> sandbox and in the Sandbox configuration replace the existing URL with the URL which we have copied earlier and click SAVE
Sandbox Configuration
8. Test the integration
Now we can test the integration in Whatsapp and you could see the output like below
