diff --git a/README.md b/README.md index 3946b22..6cab0cb 100644 --- a/README.md +++ b/README.md @@ -23,8 +23,7 @@ When you have completed this code pattern, you will understand how to: 5. The text message is sent to Watson Assistant 6. Watson Assistant chatbot detects the intent and replies with response accordingly 7. The python application triggers the Twilio Programmable messaging service with the response message -8. The response is redirected to Twilio Programmable messaging service -9. Twilio Programmable messaging service redirects the response message to WhatsApp +8. Twilio Programmable messaging service redirects the response message to WhatsApp 10. User will be able to view the response message on Whatsapp @@ -135,10 +134,56 @@ Watson Assistant service can be created on IBM Cloud Pak for Data as well as on ### 3. Build and Deploy the Python Application -#### 3.1: Build -#### 3.2: Deploy +#### 3.1: Build and Deploy on OpenShift +#### 3.2: Build and Deploy on IBM Cloud Foundry ### 4. Create Twilio service +Twlio is a SaaS offering that provides APIs to make and receive calls or text messages. As there are no APIs from WhatsApp directly availabe to send and receive WhatsApp messages programmatically, you will learn how to use Twilio's messaging service APIs that provides gateway to communicate with WhatsApp programmatically. Get started by creating a free Twilio service. + +- Create a free Twilio service here: . + +>NOTE: - Once you create a Twilio service, you will have to verify your email id as well as your phone number. + +>- You will receive verification link in the email provided during Twilio sign up. Go ahead and verify your email id. +![](doc/source/images/verifyTwilio.png) + +- Once email id is verified you will be prompted to enter your phone number, submit that and you will get an OTP on your registered number, enter that back to verify. + + ![](doc/source/images/verifyMobileTwilio.png) + +- On successful verification you should see a welcome greeting message, additionally you will see some questions, select as described below. + + ![](doc/source/images/twilio-details.png) + + Questions|Answers + --|-- + Which Twilio product are you here to use?| WhatsApp + What do you plan to build with Twilio?| IVR & Bots + How do you want to build with Twilio?| With code + What is your preferred coding language?| Python + Would you like Twilio to host your code?| No, I want to use my own hosting service + +- Visit the Whatsapp section in Twilio + +- You will see a popup box reqsuesting you to **Activate Your Sandbox**, click on **I agree** checkbox and click **Confirm**. +![](doc/source/images/allowSandbox.png) + +- The sandbox for WhatsApp will appear, make a note of the `Sandbox Name` which will be prefixed with **join**, click on **Settings** on the left panel and select **WhatsApp Sandbox Settings**. +![](doc/source/images/twilioSettings.png) + +- In **WhatsApp Sandbox Settings** page, under **Sandbox Configuration**, there will be a field called **WHEN A MESSAGE COMES IN**, replace the existing URL in that field with the `URL` obtained by deploying the Python Application from [Step 3](#3-build-and-deploy-the-python-application), finally click on **Save** to save the configuration. +![](doc/source/images/whatsappSandbox.png) + +>NOTE: Sometimes the changes are not saved in Twilio WhatsApp Sandbox Settings even after clicking on save, reload the page to enusre the `URL` that you have entered in **WHEN A MESSAGE COMES IN** field is reflecting over there. If you still see the old URL over there then enter the `URL` from [Step 3](#3-build-and-deploy-the-python-application) again and save it. + +- Now the Python Application is configured in Twilio, any message that you send from WhatsApp from this point will go to the Python Application via Twilio WhatsApp Sandbox. However to reply back to you from WhatsApp the Python Application needs to establish connection with Twilio. + +- To establish connection between the Python Application and Twilio we need to get the `account_sid` and `auth_token` from Twilio. + +- Visit and expand the **Project Info** tab. You will see the `ACCOUNT ID` and `AUTH TOKEN`, copy it in some notepad as it will be used in [Step 5](#5-configure-credentials). + ![](doc/source/images/twilio-credentials-from-twilio-console.png) + +- At this point, you should have the `Sandbox Name`, `account_sid` and `auth_token` from Twilio service.ss ### 5. Try out voicebot on WhatsApp diff --git a/doc/source/images/allowSandbox.png b/doc/source/images/allowSandbox.png new file mode 100644 index 0000000..3bc7e82 Binary files /dev/null and b/doc/source/images/allowSandbox.png differ diff --git a/doc/source/images/twilio-credentials-from-twilio-console.png b/doc/source/images/twilio-credentials-from-twilio-console.png new file mode 100644 index 0000000..47e0915 Binary files /dev/null and b/doc/source/images/twilio-credentials-from-twilio-console.png differ diff --git a/doc/source/images/twilio-details.png b/doc/source/images/twilio-details.png new file mode 100644 index 0000000..97637cf Binary files /dev/null and b/doc/source/images/twilio-details.png differ diff --git a/doc/source/images/twilioSettings.png b/doc/source/images/twilioSettings.png new file mode 100644 index 0000000..0dbc75b Binary files /dev/null and b/doc/source/images/twilioSettings.png differ diff --git a/doc/source/images/verifyMobileTwilio.png b/doc/source/images/verifyMobileTwilio.png new file mode 100644 index 0000000..0166c22 Binary files /dev/null and b/doc/source/images/verifyMobileTwilio.png differ diff --git a/doc/source/images/verifyTwilio.png b/doc/source/images/verifyTwilio.png new file mode 100644 index 0000000..2de86c6 Binary files /dev/null and b/doc/source/images/verifyTwilio.png differ diff --git a/doc/source/images/whatsappSandbox.png b/doc/source/images/whatsappSandbox.png new file mode 100644 index 0000000..776e9e8 Binary files /dev/null and b/doc/source/images/whatsappSandbox.png differ