Botpress & WhatsApp Integration

This documentation is based on the integrations possible in the vCX Platform and does not warrant that the external bot studios will work as changes in their architecture are beyond our control. It is our best effort to ensure that the connectivity works

Botpress Setup and WhatsApp Integration

After you have set up your bot in Botpress. Enable the WhatsApp Integration in your Botpress Bot

For vCX to work with Botpress, your WhatsApp Integration has to be in manual mode as shown below. Automated WhatsApp configuration if made, has to be deleted and configured manually

Do not set up Botpress using Authorize WhatsApp!

There are two methods to configure your WhatsApp in vCX
1. Manual Method - Using Facebook App - in https://developers.facebook.com/apps
2. Automated Signup - Using Embedded Signup
Botpress and vCX support these methods.

For this integration to work, Botpress has to be set up in manual mode

Head to over vCX and log into your account. Once in your account, click on Settings -> My Plan -> Integrations

Manual Method

To set it up using manual mode, head over to https://developers.facebook.com/docs/whatsapp/cloud-api/get-started/ OR follow our document here

Once you have set up your phone number and token secured. Subscribe to vCX Webhook on the developer portal to start receiving incoming messages.

To do so, ensure the Manual option is turned ON in the integration pane for WhatsApp in vCX and click on Connect

From the screen copy the webhook and token and subscribe to Messaging from the META developer port webhook

Update all the values from your App and the token in vCX configuration - Do keep them secure as they need to be added to Botpress as well. This completes the setup in vCX for WhatsApp. You can now receive and send chats in vCX

Automated Embedded Signup

Instead of the manual method, the embedded signup method is the most convenient as it provides a step-by-step workflow to complete the whole process

To start, turn off the manual mode and click on Connect to get the embedded sign-up screen. this is a facebook.com link that will guide you through the whole process

Once you have completed the process, your WhatsApp API will be generated and the integration will show complete
The Connect button will be displayed as "Show Details"

clicking on Show Details will reveal your WhatsApp credentials. copy the credentials to Botpress to complete your setup in Botpress

Now your Botpress can send messages via the bot to the user, but it is still not receiving messages from the user nor it is sending the bot response to vCX. To do so, follow the below steps

Connecting Botpress to vCX

The vCX Platform and its backend architecture is placed in between META Graph API's and Botpress

Select Bot Integration and select WhatsApp Integration

Step 1: Copy values from vCX WhatsApp Integration to Botpress WhatsApp Integration

From above, copy the Access Token and the Phone Number ID and paste them into the Botpress WhatsApp Integration, under Access Token & Phone Number ID respectively

Under Verify Token and Client Secret - add a random alphanumeric value as a token 

Any random alphanumeric value can be used as the Verify Token & Client Secret

Saving the configuration will generate an error in Botpress, hence do not click Save Configuration!

Step 2: Copy the Webhook and the Verify Token from Botpress to vCX

Copy the webhook and the verify token from Botpress. 

In vCX head to the Integration section and click Show Details for Bot Integration

Paste the values copied from Botpress as shown

Optional

If you have a trigger webhook event in Botpress, you need to add the Webhook URL in the Botpress Webhook URL section. This is optional

Save Configuration 

Click on the Add Button, you will receive a confirmation that the settings have been saved

Head back to Botpress and click on Save Configuration. The configuration will be saved successfully

Step 3: Create a Before Outgoing hook to receive chat messages in vCX

in Botpress under hooks add a new hook of type Before Outgoing

Give a name as shown

Now head back to vCX and from the Bot Integration section, click "copy code" the code in the Integration panel and add it to your Botpress hook as shown below

Delete the highlighted section shown above

Add your variable that holds the WhatsApp phone number of the user, chatting with the bot [in the below example, we are using user.phonenumber]

If you do not have a variable that stores the phone number of an incoming chat, you should add an execute code right after the Start Node 

user.phonepumber = event.tags.conversation['whatsapp:userPhone']

Important: you need to pass the WhatsApp Phone Number of the user conversing as a parameter, which without vCX platform will not be able to show the user details on the conversations tab.
In the above screenshot "user.phonenumber" is a variable that has the phone number of the user

Publish your bot to make the code changes work!

 

Now the setup is complete, to test the HITL feature you can easily toggle between Human and Bot in the conversation section