Our project directory should now look like this:

Setup the Twilio API WhatsApp Sandbox

To get started with WhatsApp, we need to first activate our Twilio Sandbox for WhatsApp. Once you have created a new Programmable SMS project, from the dashboard, select Programmable SMS then select WhatsApp. You will be prompted to activate your sandbox.

After following the instructions, you should get a message similar to this one on WhatsApp:

That’s all we need to do for now but I suggest you leave that tab open and switch to a new tab. We will make changes to it later.

Setup the Dialogflow Account

Our next step is to log in to Dialogflow. From the landing page, click sign up for free and sign in with your Google account. If you don’t have a Google account, you will need to create one.

After signing in, create a new agent and name it. I have named mine “weather”. Dialogflow provides a Default Welcome Intent so that is what we will use for this part of the tutorial.

From the menu on the left, click on “Integrations”. Under Integrations, enable Twilio (Text Messaging) input the required credentials from Twilio. At the bottom of that modal, we have a Request URL. Copy that URL and let’s go back to the Twilio tab we left open previously. In the sandbox configuration, paste the URL we copied into the WHEN A MESSAGE COMES IN input box:

This allows Dialogflow to handle all incoming messages from our WhatsApp sandbox. Make sure to click save!

Lastly, let’s navigate to the console dashboard. Here we will get the ACCOUNT SID and AUTH TOKEN. We need to copy the credentials and enter them in the Dialogflow modal along with the WhatsApp number for our sandbox. Once that’s complete, click start.

Great! We are done setting up Dialogflow and integrating it with WhatsApp. To test our integration, let’s type “Hi” on WhatsApp. You should get a response from Dialogflow’s default welcome intent:

We have made great progress. The response we are currently getting is from a set of responses set on the Dialogflow console. Our next step is to make a PHP fulfillment webhook that receives a user’s input, processes it and provides an appropriate response.

Create a PHP Webhook

Earlier we created a file called webhook.php. In order to create a webhook, we first need to understand what a request object from Dialogflow looks like. Below is a sample object: