Technical Articles
WhatsApp Chat Interface with SAP Open Connectors, Twilio and SAPUI5
Do you want to send and receive a WhatsApp messages from UI5 ? In this tutorial, we will create a simple WhatsApp chat interface with SAP Open Connectors, Twilio and SAPUI5 to send and receive WhatsApp messages.
Pre-requisities
Create an account for the following:
- Twilio
- SAP HANA Trials
Twilio Setup
- Register an account with Twilio and go to the console https://www.twilio.com/console.
- Select Templates and SMS Chabot.
- Name a project UI5Whatsapp and click Continue.
- Once the project is successfully created, go to project dashboard.
Take note the account SID and auth. token.
- Select Programmable SMS and WhatsApp to setup the testing sandbox.
- From your mobile send a WhatsApp message with the code to the designated number.
- Upon success, you will receive the following messages:
- Select Sandbox and verify if the number is correct.
- Empty the When a message comes in and Status callback URL and select Save.
SAP Open Connectors Setup
- Logon to SAP Open Connectors and select Connectors. Search for “twilio” and select Twilio.
- Select Authenticate.
- Enter the following information:
Name: UI5Whatsapp
Phone Number – from Twilio setup.
Create the instance using Test Credentials: false
Account SID – from Twilio setup.
Auth. Token – from Twilio setup.
Select Create Instance to continue.
- Select Test in the API docs to test the API.
Send WhatsApp Message
- Select messages and Post.
- Select UI5Whatsapp and Try it out.
- Fill in the information in the body section:
{ "Body": "Hello World!", "From": "whatsapp:+14155238886", "MediaUrl": "https://demo.twilio.com/owl.png", "To": "whatsapp:+6512345678" }
Twilio API now can support images, video, PDF and other media contents, refer to this link for more details. In this example, we are going to send the image attachment with text “Hello World!”.
Select Execute to continue. - If there is no error, you will see similar message:
- And you will receive the WhatsApp message on your phone:
Receive WhatsApp Message
- Select messages and Get.
- Select UI5Whatsapp and enter 1 for number of items per page.
- Select Execute to continue. If no error, you will get the similar response message.
Retrieve Media Image
- Get the response from the receive WhatsApp message steps above.
[ { "subresource_uris": { "media": "/2010-04-01/Accounts/AC7301a81fd79cdac6741a7c04904f6b42/Messages/MMb588109c418c40a28b3b3f18116aa896/Media.json" }, "date_updated": "Mon, 18 Mar 2019 09:35:57 +0000", "date_sent": "Mon, 18 Mar 2019 09:35:38 +0000", "date_created": "Mon, 18 Mar 2019 09:35:28 +0000", "body": "Hello World!", "api_version": "2010-04-01", "num_segments": "1", "uri": "/2010-04-01/Accounts/AC7301a81fd79cdac6741a7c04904f6b42/Messages/MMb588109c418c40a28b3b3f18116aa896.json", "sid": "MMb588109c418c40a28b3b3f18116aa896", "num_media": "1", "price_unit": "USD", "price": "0.00000", "account_sid": "AC7301a81fd79cdac6741a7c04904f6b42", "from": "whatsapp:+14155238886", "to": "whatsapp:+6512345678", "status": "delivered", "direction": "outbound-api" } ]
- Open url: https://api.twilio.com + /2010-04-01/Accounts/ACxxxx/Messages/sid/Media.json
https://api.twilio.com/2010-04-01/Accounts/AC7301a81fd79cdac6741a7c04904f6b42/Messages/MMb588109c418c40a28b3b3f18116aa896/Media.json
- Get the sid from media_list. If you have more than one image attachment, you will get multiple sids.
- Now open url: https://api.twilio.com + /2010-04-01/Accounts/ACxxxx/Media/sid:
https://api.twilio.com/2010-04-01/Accounts/AC7301a81fd79cdac6741a7c04904f6b42/Messages/MMb588109c418c40a28b3b3f18116aa896/Media/ME8a32401d2ff8eeeac0c8e55f0c0cf574
- And you will get the Owl image:
SAPUI5
With the information we gathered in the earlier steps, we can build a simple chat interface in UI5. I am referring to this blog to build one!
The reason I didn’t do any webhook calls to get the incoming messages because I want to make it simple. Instead I am using the ‘loop’ function to check the new message every 2 seconds. Feel free to enhance it!
onSendPressed: function(oEvent) {
var chatbot = this.getView().byId("botchat");
var question = oEvent.getParameter("text");
var this_ = this;
console.log(question);
//var data = '{"Body": "' + question + '", "From": "whatsapp:+14155238886", "MediaUrl": "https://demo.twilio.com/owl.png", "To": "whatsapp:+6512345678"}';
var data = '{"Body": "' + question + '", "From": "whatsapp:+14155238886", "To": "whatsapp:+6512345678"}';
var headers = {
'Authorization': 'User kDyXgv7DF2IjZ4eFpK/8qQMfLpaQGJ3f39U5FAkKnWg=, Organization f589b65c85a32fc5c3b35ec8c882f063, Element +5Wvb+VXjtbKj5xW0fEKh+XYUnR5N9epUizO/KKoX6o=',
'Content-Type': 'application/json'
};
jQuery.ajax({
//Post Message
url: "https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/messages",
cache: false,
type: "POST",
headers: headers,
data: data,
async: true,
success: function(sData) {
localStorage.setItem("chatId", sData.date_created);
//console.log('[POST] /discover-dialog', sData);
chatbot.botFinishTyping();
},
error: function(sError) {
chatbot.addChatItem("Something error!", false);
}
});
var ajax_get_response = function() {
jQuery.ajax({
url: "https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/messages?pageSize=1",
cache: false,
type: "GET",
headers: headers,
async: true,
success: function(sData) {
//console.log('[GET] /discover-dialog', sData);
localStorage.setItem("chatId", sData[0].date_created);
if (sData[0].direction == 'inbound') {
if (localStorage.getItem("chatId") != this_._id) {
this_._id = localStorage.getItem("chatId");
chatbot.addChatItem(sData[0].body, false);
chatbot.botFinishTyping();
}
}
},
error: function(sError) {
chatbot.addChatItem("Something error!", false);
}
});
};
var interval = 2000;
setInterval(ajax_get_response, interval);
}
Is Twilio is a paid serivice
Just use Twilio sandbox.
Best,
Ferry
Hi Ferry,
After configuring everything after loading application if i send message from application to twilio it show the message, from there we can chat .
once after we send message to application from twillo for first time there we cannot able to chat .on loading of application
Hi Ferry,
Thats a very nice Blog. I utilized this for Cloud Platform Integration through Open connectors adapter
. I have one question here.
If we have to broadcast a message from Open connector to a group lets say only one way communication should happen not two ways. Is that possible using Twilio ?
Thanks,
Sidharth VR
Hi Sidharth
Do you mean sending a message to WhatsApp group ? If yes, I think is not possible at this moment with Twilio. You may check with Twilio team for more updates on this.
Best,
Ferry
I've tried to logon SAP Cloud Platform Cockpit, but there is no option "Connectors".. can you give me advice, what's wrong with my SAP?
Yes even i am facing the same issue ... Were you able to find "Connectors"
me too please help me if you found any solution
You need to enable Open Connector for your trial PID. Go to Services and search Connector, there you will get the Open Connector, just enabled it. Once enabled, go to Service through the link mentioned on the bottom of the same page.
Facing below error in twilio when we try to activate sandbox. I agreed but still facing the same error.
Hi Ferry,
Very nice blog. I tried to follow all the steps required for integration between openconnector and whatsapp. The status code is 200 but didn't get any message in whatsapp. My mobile number is verified. Any idea what could be the issue.
Regards,
Sushmita
please help can implement without sap open connector ?
Please help in this issue
Hello Ferry.
Congratulations to you!! Very nice blog 🙂
Is it possible to make in SAP ERP 6.0?
Thanks in advance,
Best Regards,
Nara