# Dialogflow Twilio Integration using Google Cloud 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 1. Create a simple FAQ chatbot using Dialogflow and Google CloudFunctions 2. Twilio Setup 3. Enable CloudRun and API’s for the project 4. Setup Google Cloud Command line tool 5. Clone the Dialogflow integration and update Infos 6. Deploying to Google Cloud Container Registry and Cloud Run 7. Connect Whatsapp with Twilio Sandbox 8. 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056373828/cbe9bf25-621d-445d-ad07-ba306f447492.png align="left") 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056375522/61153ea3-944a-414d-ae16-dc23093923b0.png align="left") Account Settings page Select your country and accept the terms of service and click **ACCEPT.** Once Accepted you could see a screen like ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056377245/e48e91da-3729-4ee8-9e2e-44b9846da370.png align="left") Agent Page Click **CREATE AGENT** and add the agent name like below ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056379012/353b6a47-efcc-4ad6-98f1-360ec79c1d36.png align="left") 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056380567/d5dd9b2f-74c3-4d5e-80ef-6afc49095659.png align="left") 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056382087/beb5f687-9f96-4c0f-9cb4-1e83083706a5.png align="left") Knowledge Base Click **CREATE KNOWLEDGE BASE** now you could see a screen like below ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056383795/d41dbfbc-b80b-4257-99ff-461a9a6bd270.png align="left") knowledge base name Add the knowledge base name and click **SAVE.** Now you could see a page like below ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056386038/0bbe3840-235b-4e2f-b1e4-5042ccf41056.png align="left") 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](https://cloud.google.com/storage/docs/faq) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056387525/b088b182-e77f-4a2a-b5d7-2ee171ed98ec.png align="left") 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056389966/21134c1b-71bf-46e6-a158-f37dabf6b469.png align="left") storage FAQ once you click the view Detail you can see the list of questions and answers like below ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056392050/d0d2f889-c88a-49cb-9b19-c677b2efb4b8.png align="left") cloud storage questions Now go back and click the Response and click **ADD RESPONSE** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056393521/b82b27aa-171d-4f77-be16-2327b027fdc5.png align="left") Add Response Now click **SAVE** once the **ADD RESPONSE** is done ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056395144/fe355a31-b555-4c18-ae54-022dca09cb07.png align="left") Response save similarly, you can add other knowledge bases like compute engine, cloud identity by using the below URL’s Compute Engine - [https://cloud.google.com/compute/docs/faq](https://cloud.google.com/compute/docs/faq) Cloud Identity - [https://cloud.google.com/iam/docs/faq](https://cloud.google.com/iam/docs/faq) Now you could see the knowledge base list like below ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056396688/f34144ae-63ee-4bf9-94ad-ff81af583474.png align="left") Knowledgebase list Now we can test the knowledge base data in Dialogflow ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056398783/df604790-edb3-4a16-a9a4-3d19dd50424d.png align="left") 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](https://www.twilio.com/console/sms) and click Whatsapp now you could see a page like below ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056400251/0e03c2f3-0118-4902-8bac-60541944905d.jpeg align="left") 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056401748/bc6475ee-d862-4d8b-a0d6-1916d4ea914e.jpeg align="left") 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056403049/3a862208-2938-4db0-bc16-1fd833b59771.jpeg align="left") 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056404490/01a3a564-d8c9-4474-aebc-69a4358f34ff.jpeg align="left") Creating Key Now click on the menu options and click Create key which will open the private key options select **JSON** and click **CREATE** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056406732/52321076-d978-4513-bc41-a019b4889482.jpeg align="left") 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** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056408073/0523e12b-00ef-4de0-a45d-87c47f72068a.jpeg align="left") Enabling Billing Enable Cloud Build and Cloud Run API for the project [here](https://console.cloud.google.com/flows/enableapi?apiid=cloudbuild.googleapis.com,run.googleapis.com). Select the project and click **CONTINUE** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056409344/404e9faa-01c7-47df-9ea8-b75e8bf64ef3.jpeg align="left") Enabling Cloud API and Run API Once the setup is completed you could see a screen like below ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056410868/09266140-5818-4d52-b28d-ee65ad203673.png align="left") API’s Enabled ### 4\. Setup Google Cloud Command line tool On the gcloud CLI [documentation page](https://cloud.google.com/sdk/docs/quickstarts), 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056412239/e4bfe93d-85c2-4119-a3bd-4ea57883b15c.jpeg align="left") 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** Clone the repository using the below command git clone [https://github.com/GoogleCloudPlatform/dialogflow-integrations.git](https://github.com/GoogleCloudPlatform/dialogflow-integrations.git) 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 1. **projectId** which we have taken from the **Dialogflow** earlier 2. **phoneNumber** from the Twilio Dashboard (Number starts from +143 ..) 3. **accountSid** and **authToken** which we have from Twilio Dashboard earlier `const projectId = '`[`twilioopensource-cwahci`](https://console.cloud.google.com/home/dashboard?project=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](https://console.cloud.google.com/gcr/). Replace **PROJECT-ID** with your agent’s GCP Project ID and **PLATFORM** with the platform subdirectory name. `gcloud builds submit --tag gcr.io/PROJECT-ID/dialogflow-PLATFORM` Like below `gcloud builds submit --tag gcr.io/twilioopensource-cwahci/dialogflow-twilio` 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`. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056413802/77202a2a-8abd-4d87-9280-eb1525ce31a6.jpeg align="left") 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056415159/96b1cd70-59dc-4d63-99f0-0424760c7c8b.jpeg align="left") Sandbox Configuration ### 8\. Test the integration Now we can test the integration in Whatsapp and you could see the output like below Source: Nidhinkumar ### Reference Links * Dialogflow Integrations — Click [here to view](https://github.com/GoogleCloudPlatform/dialogflow-integrations) ### Congratulations! You have learned how to integrate Dialogflow with Twilio using Google Cloud Happy Learning :)