├── Previous Version - Google Cloud Functions ├── package.json ├── index.js └── README.md ├── index.js └── README.md /Previous Version - Google Cloud Functions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "twilio-conector", 3 | "description": "Twilio Dialogflow Connector", 4 | "version": "0.0.1", 5 | "private": true, 6 | "license": "Apache Version 2.0", 7 | "author": "Google Inc.", 8 | "engines": { 9 | "node": "8" 10 | }, 11 | "scripts": { 12 | "start": "firebase serve --only functions:twilio-conector", 13 | "deploy": "firebase deploy --only functions:twilio-conector" 14 | }, 15 | "dependencies": { 16 | "firebase-admin": "^5.13.1", 17 | "firebase-functions": "^2.0.2", 18 | "dialogflow": "^0.6.0", 19 | "twilio": "3.33.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const dialogflow = require("dialogflow"); 2 | 3 | exports.handler = async function (context, event, callback) { 4 | let twiml = new Twilio.twiml.MessagingResponse(); 5 | 6 | const receivedMsg = event.Body; 7 | const userNumber = event.From; 8 | 9 | if (!receivedMsg) return callback("No message received", twiml); 10 | 11 | // Get response from Dialogflow 12 | let diallofglowJsonFilePath = Runtime.getAssets()["/dialogflow.json"].path; 13 | const dialogflogSessionClient = new dialogflow.SessionsClient({ 14 | keyFilename: diallofglowJsonFilePath, 15 | }); 16 | const dialogflowProjectId = process.env.DIALOGFLOW_PROJECT_ID; 17 | const dialogflowSessionPath = dialogflogSessionClient.sessionPath( 18 | dialogflowProjectId, 19 | userNumber 20 | ); 21 | const dialogflowRequestParams = { 22 | session: dialogflowSessionPath, 23 | queryInput: { 24 | text: { 25 | text: receivedMsg, 26 | languageCode: "pt-BR", 27 | }, 28 | }, 29 | }; 30 | const dialogflowRequest = await dialogflogSessionClient.detectIntent( 31 | dialogflowRequestParams 32 | ); 33 | const dialogflowResponses = 34 | dialogflowRequest[0].queryResult.fulfillmentMessages; 35 | 36 | // Iterate over every message 37 | for (const response of dialogflowResponses) { 38 | // Texts 39 | if (response.text) { 40 | const text = response.text.text[0]; 41 | twiml.message(text); 42 | } 43 | 44 | // Payloads 45 | if (response.payload) { 46 | const fields = response.payload.fields; 47 | const payloadMessage = await twiml.message(); 48 | if (fields.mediaUrl) { 49 | const mediaUrl = fields.mediaUrl.stringValue; 50 | payloadMessage.media(mediaUrl); 51 | } 52 | if (fields.text) { 53 | const text = fields.text.stringValue; 54 | payloadMessage.body(text); 55 | } 56 | } 57 | } 58 | return callback(null, twiml); 59 | }; 60 | -------------------------------------------------------------------------------- /Previous Version - Google Cloud Functions/index.js: -------------------------------------------------------------------------------- 1 | // Get Enviroment Variables 2 | const accountSid = process.env.accountSid; 3 | const authToken = process.env.authToken; 4 | const projectId = process.env.projectId; 5 | 6 | // Initialization 7 | const functions = require('firebase-functions'); 8 | const client = require('twilio')(accountSid, authToken); 9 | const dialogflow = require('dialogflow'); 10 | const sessionClient = new dialogflow.SessionsClient(); 11 | 12 | // Twilio Webhook Function 13 | exports.TwilioWebhook = functions.https.onRequest(async (request, response) => { 14 | // Get WhatsApp Message Information 15 | const body = request.body; 16 | const receivedMsg = body.Body; 17 | const userNumber = body.From; 18 | const myNumber = request.body.To; 19 | 20 | if(receivedMsg){ 21 | // Configure Dialogflow Session 22 | const sessionPath = sessionClient.sessionPath(projectId, userNumber); 23 | const request = { 24 | session: sessionPath, 25 | queryInput: { 26 | text: { 27 | text: receivedMsg, 28 | languageCode: "pt-BR", 29 | }, 30 | }, 31 | }; 32 | 33 | // Get Dialogflow Response 34 | try { 35 | const fulfillmentMessages = (await sessionClient.detectIntent(request))[0].queryResult.fulfillmentMessages; 36 | 37 | // Iterate over every message 38 | for (const response of fulfillmentMessages){ 39 | // Send Text Message 40 | if(response.text){ 41 | const responseMsg = response.text.text[0]; 42 | const body = { 43 | from: myNumber, 44 | body: responseMsg, 45 | to: userNumber 46 | } 47 | await client.messages.create(body) 48 | } 49 | 50 | // Send media files 51 | if(response.payload){ 52 | if(response.payload.fields.mediaUrl){ 53 | const mediaUrl = response.payload.fields.mediaUrl.stringValue; 54 | 55 | let text = ""; 56 | 57 | if(response.payload.fields.text){ 58 | text = response.payload.fields.text.stringValue 59 | } 60 | 61 | const body = { 62 | from: myNumber, 63 | body: text, 64 | to: userNumber, 65 | mediaUrl, 66 | } 67 | await client.messages.create(body) 68 | } 69 | } 70 | } 71 | } 72 | catch(e){ 73 | console.log(e) 74 | } 75 | } 76 | response.status(200).send("Sent!"); 77 | }); 78 | -------------------------------------------------------------------------------- /Previous Version - Google Cloud Functions/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | # Dialogflow WhatsApp (Twilio) Integration 5 | 6 | 7 | 8 | A simple way to connect and integrate Dialogflow and Twilio to create Whatsapp Chatbots 9 | 10 | 11 | 12 | ## How to Connect With Dialogflow 13 | 14 | 15 | 16 | **Step 1 -** Open the Google Console for Cloud Functions ([here](https://console.cloud.google.com/functions)) and make sure you have the Google Project of your Dialogflow chatbot selected. 17 | 18 | 19 | 20 | **Step 2 -** Click on "Create Function" to open the interface for function creation. 21 | 22 | 23 | 24 | **Step 3-** Set the name of the function (**twilio-conector** is a good option) 25 | 26 | 27 | 28 | **Step 4-** On the **Source Code** option, select **Inline Editor** . 29 | 30 | 31 | 32 | **Step 5-** In the **index.js** tab, copy and paste the code from the index.js file in this repository. 33 | 34 | 35 | 36 | **Step 6-** In the **package.json** tab, copy and paste the code from the package.json file in this repository. 37 | 38 | 39 | 40 | **Step 7** - Set the **Function to Execute** field to "**TwilioWebhook**" 41 | 42 | 43 | 44 | **Step 8** - Click on the Dropdown "**Variables, Networking and Advanced Settings**" 45 | 46 | 47 | 48 | **Step 9** - In the **Enviroment Variables** section, look for **Runtime Enviroment Variables** and click on "Add Variable" 49 | 50 | 51 | 52 | **Step 10** - Add variables called: 53 | 54 | 55 | 56 | - **projectId** (the project ID found on your Dialogflow's agent settings page) 57 | 58 | - **accountSid** (your twilio account Sid value, found on the main dashboard of your Twilio project) 59 | 60 | - **authToken** (the authentication token for your Twilio acconut, found on the main dashboard of your Twilio project) 61 | 62 | **Step 11** - Click on "Create". In 1-2 minutes your integration will be up and running. 63 | 64 | 65 | 66 | **Step 12** - Click on your created function. Open the **Trigger** tab and copy the URL. 67 | 68 | 69 | 70 | **Step 13** - In your Twilio Sandbox configuration ([link](https://www.twilio.com/console/sms/whatsapp/sandbox)), paste the URL into the "**when a message comes in**" field and click **save**. 71 | 72 | 73 | **Step 14** - Activate the Cloud Build API, you can find her [here](https://console.cloud.google.com/marketplace/product/google/cloudbuild.googleapis.com) 74 | 75 | 76 | **Step 15** - Test your chatbot. You should now be able to talk to your Dialogflow chatbot through the Twilio Sandbox's WhatsApp number. 77 | 78 | 79 | ## How to Send Media Files 80 | 81 | You can also send media files such as Images, Audios, PDFs and Videos. To do so, add a "Custom Payload" response in your Dialogflow intent with the code: 82 | 83 | { 84 | "mediaUrl": "<>" 85 | } 86 | 87 | You can optionally include a **text** paramater to send a message alongside the image: 88 | 89 | { 90 | "mediaUrl": "<>", 91 | "text": "<>" 92 | } 93 | 94 | [See here](https://support.twilio.com/hc/en-us/articles/360017961894-Sending-and-Receiving-Media-with-WhatsApp-Messaging-on-Twilio-Beta-) Twilio's documentation to learn more about the limitations for sending media files. 95 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Dialogflow WhatsApp (Twilio) Integration 3 | 4 | A simple way to connect and integrate Dialogflow and Twilio to create WhatsApp Chatbots 5 | 6 | **2021 Update:** Altered to use Twilio Functions instead of Google Cloud Functions due to a more simple workflow with a more secure infrastructure. 7 | 8 | ## How to Connect With Twilio with Dialogflow 9 | 10 | **Before Starting** - Create your Dialogflow project and also a Twilio project, we will use both of them for the connection. 11 | 12 | ### Part 1 -- Dialogflow Service Account 13 | 14 | **Step 1 -** Open the Google Console for Service Accounts ([here](https://console.cloud.google.com/projectselector/iam-admin/serviceaccounts/create)) and select the Google Project of your Dialogflow chatbot. 15 | 16 | **Step 2 -** Fill a name for your service account. ("_TwilioConnector_" is a good option) and click on **Create**. 17 | 18 | **Step 3-** Add the **Owner** role (Quick Start -> Basic -> Owner) and click on **Done** to finish this process. 19 | 20 | **Step 4-** Select the created service account then click on **Keys** --> **Add Key** --> **Create New Key** --> **Create** 21 | 22 | **Step 5-** A json file will be downloaded. Rename it to **dialogflow.json** 23 | 24 | ### Part 2 -- Twilio Function 25 | 26 | **Step 6-** Open the Twilio Functions page ([here](https://www.twilio.com/console/functions)) and create a new service (I recommend naming it **DialogflowService**). 27 | 28 | **Step 7-** Click on **Add** then **Add Function**. Set the path to **/dialogflow** 29 | 30 | **Step 8-** Copy the code from the index.js in this repository and paste it to the code editor. Click on **save**. 31 | 32 | **Step 9-** In settings, add a new Enviroment Variable with the key **DIALOGFLOW_PROJECT_ID** and set its value to your dialogflow project ID (you can find it in your Dialogflow agent's settings) 33 | 34 | **Step 10-** Also in settings, click in **Dependencies** and add the module **dialogflow** with version **1.2** 35 | 36 | **Step 11-** Click on **Add** then **Upload File**. Select your **dialogflow.json** file. Set it's visibility to **private**. Click on **Upload**. 37 | 38 | **Step 12-** Click on **Deploy All** 39 | 40 | ### Part 3 -- Twilio Sandbox 41 | 42 | **Step 13-** Click on the three dots next to your created function name and select **copy URL**. 43 | 44 | **Step 14** - In your Twilio Sandbox configuration ([link](https://www.twilio.com/console/sms/whatsapp/sandbox)), paste the URL into the "**when a message comes in**" field and click **save**. 45 | 46 | **Step 15** - Test your chatbot. You should now be able to talk to your Dialogflow chatbot through the Twilio Sandbox's WhatsApp number. 47 | 48 | ## How to Send Media Files 49 | 50 | You can also send media files such as Images, Audios, PDFs and Videos. To do so, add a "Custom Payload" response in your Dialogflow intent with the code: 51 | 52 | { 53 | "mediaUrl": "YOUR_URL" 54 | } 55 | 56 | You can optionally include a **text** paramater to send a message alongside the image: 57 | 58 | { 59 | "mediaUrl": "YOUR_URL", 60 | "text": "YOUR_MESSAGE" 61 | } 62 | 63 | [See here](https://support.twilio.com/hc/en-us/articles/360017961894-Sending-and-Receiving-Media-with-WhatsApp-Messaging-on-Twilio-Beta-) Twilio's documentation to learn more about the limitations for sending media files. 64 | --------------------------------------------------------------------------------