Skip to Content
Business Trends
Author's profile photo Sravya Gajavelli

WhatsApp Integration with SAPUI5 Application using Twilio and SAP Open Connectors

Hi Friends,

In this blog I am going to explain about Whatsapp Integration with SAPUI5 by using Open Connectors and Twilio. By this, we can send and receive whatsapp messages from UI5 application. Now let us see how i achieved this.


Pre-requisities for our requirement:

  1. TWILIO setup
  2. Setup the SAP Open Connectors
  3. Create UI5 application



Step – 1:

Before developing the application, first we need to create an account in Twilio.

For that, open this link and register as shown below.

Give the required credentials and check the checkbox to accept the terms and conditions.

Now your account in Twilio is created and you will see a dashboard.

Step – 2:

In the dashboard, go to create project and select a template.

Here I choose “SMS Chatbot” template. After choosing, you will navigate to the following screen.

Enter the project name and click on continue. Now your project is successfully created.

Step – 3:

Go to project dashboard.

For every project created, an unique Account SID and Auth Token will be generated. Take a note of it further use.

Step – 4:

Goto Programmable SMS and select “WhatsApp Beta” to setup the testing sandbox.

Then the following popup will be displayed.

Agree to the terms of service by checking the check box and then click on confirm to activate the sandbox.

Step – 5:

Now goto Learn tab in WhatsApp Beta, we can see a code generated for our project.

From your mobile send a WhatsApp message with the given code (join anyone-dead) to the designated number (+1 415 523 8886) to register our mobile number in Twilio as shown below.

Step – 6:

We can also check our whatsapp numbers in sandbox participants as shown below.

If multiple users registered, then it show multiple numbers.

Step – 7:

Twilio setup is done. Now our next step is to setup the SAP Open Connectors.





Login to SAP Webide.


Goto Services and search for “Open Connectors” and enable it.


Click on the Open Connectors service after enabling it. Then you will navigate to the following screen.


Goto Connectors and search for Twilio.


Choose “Authenticate”.


Now, we have to create instance. For that, we need to give the required credentials as shown in the screenshot.

Here, I gave

Name as “Whatsapp Integration with UI5”

Phone Number

Create the Instance using Test Credentials as “false”

Account SID and Auth Token (which are generated in Twilio when the project created)

After giving all the credentials, click on “Create Instance” button.



We will see a success message along with some tiles after creating Twilio Connector Instance. Select “Test in the API docs” to test the API.


Let us test our Twilio API by sending or receiving messages from whatsapp. For that, follow the below steps.


First we will check with “POST” to send messages. Select Messages and Click on “POST”.

Select Project instance and click on “Try it out” button.

Authorization will be generated automatically for our project. Please take a note of it for future use. Now replace the body with our code and click “Execute” button.

  "Body": "Hi Friends!",
  "From": "whatsapp:+14155238886",
  "MediaUrl": "",
  "To": "whatsapp:xxxxxxxxxx"

We can see a success message as shown in below screenshot and the message is delivered to the mentioned whatsapp number.


Now we will see how to get messages from registered whatsapp number.

Select Messages and click on “GET”.

Select Project instance and click on “Try it out” button.

Now click the “Execute” button after sending reply message from your registered mobile number. Here, I am sending “Hi…How are you??

Let us see whether we will get this message or not. Just click on “Execute” button. If there are no errors, we will see the message.

Yes, we got the message.

In this way, we can send or receive messages by using Twilio and Open Connectors.



Now, let us see how to integrate this with UI5 application.


We need to create a project as shown below.

Select SAPUI5 Template and click on “Next” button.

In Basic Information tab, give Project Name & Namespace and then click on “Next” button to continue.

Select View type and give View name in Template Customization tab.

Click on “Finish” button.

Now the project is created in our workspace as shown below.


Copy the below code in your view.xml file (In this view, I kept a button “Whatsapp Me”. By clicking that button, a popup will be opened where we can do chat).

<mvc:View controllerName="" xmlns:html="" xmlns:mvc="sap.ui.core.mvc" xmlns:controls="" displayBlock="true" xmlns="sap.m">
    <App id="idAppControl">
            <Page title="{i18n&gt;title}">
                            <ToolbarSpacer width="" />
                            <Button text="Whatsapp Me" icon="sap-icon://discussion" tooltip="{i18n&gt;Clear}" press="onChatPress" />
                            <controls:ChatDialog id="botchat" title="Whatsapp ChatBot!" height="600px" width="350px" showCloseButton="false" send="onSendPressed" initialMessage="Hi! Start chatting with me" placeHolder="Write a reply" userIcon="" robotIcon="images/whatsapp.png" buttonIcon="sap-icon://discussion"></controls:ChatDialog>


Code for ChatDailog.js file

Here, I am using a control “ChatDailog” for whatsapp chatbot. For that, create a folder “control” and create a ChatDailog.js file under that folder. Replace the following code in your .js file.

  [	"sap/ui/core/Control",
  function(Control, Button, IconPool, Dialog, List, FeedListItem, FeedInput, ResponsivePopover, VBox, ScrollContainer, Bar, Title, ResizeHandler) {
	var ChatDialog = Control.extend("",{
		metadata : {
			properties : {
				title: {type: "string", group: "Appearance", defaultValue: null},
			    width: {type: "sap.ui.core.CSSSize", group: "Dimension", defaultValue: null},
				height: {type: "sap.ui.core.CSSSize", group: "Dimension", defaultValue: null},
			    buttonIcon: {type: "sap.ui.core.URI", group: "Appearance", defaultValue: null},
				robotIcon: {type: "sap.ui.core.URI", group: "Appearance", defaultValue: null},
				userIcon: {type: "sap.ui.core.URI", group: "Appearance", defaultValue: null},
				initialMessage: {type: "string", group: "Appearance", defaultValue: "Hello, How can I help?"},
				placeHolder: {type: "string", group: "Appearance", defaultValue: "Post something here"}
			aggregations : {
				_chatButton:  {type: "sap.m.Button", multiple: false},
				_popover: {type: "sap.m.ResponsivePopover", multiple: false}
			events : {
				send: {
            		parameters : {
						text : {type : "string"}

    	init : function () {
    		//initialisation code, in this case, ensure css is imported
	        var libraryPath ="");  + "/css/bkChat.css"); 

			var oBtn = new Button(this.getId() + "-bkChatButton", {
				press: this._onOpenChat.bind(this)
			this.setAggregation("_chatButton", oBtn);
			var oHeader = new Bar({
				contentLeft: new Button({
					icon: "sap-icon://sys-cancel",
					press: this._toggleClose.bind(this),
					tooltip: "Clear chat"
				contentMiddle: new Title(this.getId() + "-bkChatTitle", {}),
				contentRight: new Button({
					icon: "sap-icon://pushpin-off",
					press: this._toggleAutoClose.bind(this),
					tooltip: "Toggle"
			var oRpop = new ResponsivePopover(this.getId() + "-bkChatPop", {
				customHeader: oHeader,
				placement: "Top",
				showHeader: true,
				resizable: true,
				horizontalScrolling: false,
				verticalScrolling: false,
				beforeClose: function(e){
				afterOpen: function(e){
					this.sResizeHandleId = ResizeHandler.register(sap.ui.getCore().byId(this.getId() + "-bkChatPop"), this._saveDimensions.bind(this));
			this.setAggregation("_popover", oRpop);
			var oFeedIn = new FeedInput(this.getId() + "-bkChatInput", {
				post: this._onPost.bind(this),
				showicon: true
    			onsapenter: function(oEvent) {
    				var sTxt = oFeedIn.getValue();
    				if(sTxt.length > 0){
	    				oFeedIn.fireEvent("post", {
							value: sTxt
						}, true, false);
			var oFeedList = new List(this.getId() + "-bkChatList", {
				showSeparators: "None",
				showNoData: false
			var oInitialFeedListItem = new FeedListItem(this.getId() + "-bkChatInitial", {
				showicon: true,
				text: "Hello I'm Ro Bot, how can i help you?"

			var oScroll = new ScrollContainer(this.getId() + "-bkChatScroll", {				
				horizontal: false,
				vertical: true,
				focusable: true

			var oStatusBar = new sap.m.Label(this.getId() + "-bkChatStatusBar", { text : ""

			var oVBox = new VBox({				
				items: [oScroll, oStatusBar, oFeedIn],
				fitContainer: true,
				justifyContent : "End",
            	alignItems : "Stretch"
			oRpop.insertContent(oVBox, 0);
    	renderer  : function(oRm, oControl) {
			var oChatBtn = oControl.getAggregation("_chatButton");
			var oPop = oControl.getAggregation("_popover");

			oRm.write("<div ");
		onAfterRendering: function(args) {
            if(sap.ui.core.Control.prototype.onAfterRendering) {
        setTitle: function(sTitle){
        	this.setProperty("title", sTitle, true);
        	sap.ui.getCore().byId(this.getId() + "-bkChatTitle").setText(sTitle);
        setHeight: function(sHeight){
        	this.setProperty("height", sHeight, true);
        	sap.ui.getCore().byId(this.getId() + "-bkChatPop").setContentHeight(sHeight);
        	var iScrollHeight = sHeight.substring(0, sHeight.length - 2) - "96px".substring(0, "96px".length - 2);
        	sap.ui.getCore().byId(this.getId() + "-bkChatScroll").setHeight(iScrollHeight + "px");
        setWidth: function(sWidth){
        	this.setProperty("width", sWidth, true);
        	sap.ui.getCore().byId(this.getId() + "-bkChatPop").setContentWidth(sWidth);
        setUserIcon: function(sUserIcon){
        	this.setProperty("userIcon", sUserIcon, true);
        	sap.ui.getCore().byId(this.getId() + "-bkChatInput").setIcon(sUserIcon);
        setRobotIcon: function(sRobotIcon){
        	this.setProperty("robotIcon", sRobotIcon, true);
        	sap.ui.getCore().byId(this.getId() + "-bkChatInitial").setIcon(sRobotIcon);
        setButtonIcon: function(sButtonIcon){
        	//this.setProperty("buttonIcon", sButtonIcon, true);
        	//sap.ui.getCore().byId(this.getId() + "-bkChatButton").setIcon(sButtonIcon);
        setInitialMessage: function(sText){
        	this.setProperty("initialMessage", sText, true);
        	sap.ui.getCore().byId(this.getId() + "-bkChatInitial").setText(sText);
        setPlaceHolder: function(sText){
        	this.setProperty("placeHolder", sText, true);
        	sap.ui.getCore().byId(this.getId() + "-bkChatInput").setPlaceholder(sText);
        _onPost: function(oEvent){     
			var this_ = this;
			setTimeout(function () {
			}, 1000);

			var sText = oEvent.getSource().getValue();
			this.addChatItem(sText, true);
			this.fireEvent("send", {
				text: sText
			}, false, true);        	
        _onOpenChat: function(oEvent){
        _saveDimensions: function(oEvent){
			//console.log(sap.ui.getCore().byId(this.getId() + "-bkChatPop").getContentHeight() + ", " + oEvent.size.height);
        	this.setProperty("height", oEvent.size.height + "px", true);
        	this.setProperty("width", oEvent.size.width + "px", true);
        _toggleAutoClose: function(oEvent){
        	var bAuto = this.getAggregation("_popover").getAggregation("_popup").oPopup.getAutoClose();
        		oEvent.getSource().setProperty("icon", "sap-icon://pushpin-on");
        	}else {
        		oEvent.getSource().setProperty("icon", "sap-icon://pushpin-off");

		_toggleClose: function(){
			 sap.ui.getCore().byId(this.getId() + "-bkChatList").removeAllItems();

		botStartTyping: function() {
			sap.ui.getCore().byId(this.getId() + "-bkChatStatusBar").setText("Bot is typing...");

		botFinishTyping: function() {
			sap.ui.getCore().byId(this.getId() + "-bkChatStatusBar").setText("");

        addChatItem: function(sText, bUser){        	
        	var oFeedListItem = new FeedListItem({
				showicon: true,
				text: sText

				sap.ui.getCore().byId(this.getId() + "-bkChatList").addItem(oFeedListItem, 0);
			} else {
				sap.ui.getCore().byId(this.getId() + "-bkChatList").addItem(oFeedListItem, 0);
			var oScroll = sap.ui.getCore().byId(this.getId() + "-bkChatScroll");
				oScroll.scrollTo(0, 1000, 0);
			}, 0);	
	return ChatDialog;


Controller code

And our controller code is as follows. Here, we used two Ajax calls – one for posting or sending the message and the other one is for getting or receiving the message.

], function (Controller) {
	"use strict";
	var _id;

	return Controller.extend("", {

		onChatPress: function () {
			var chatbot = this.getView().byId("botchat");

			var this_ = this;
			var headers = {
				'Authorization': 'User xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx=, Organization xxxxxxxxxxxxxxxxxxxxxxxxxxxx=, Element xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx=',
				'Content-Type': 'application/json'

			var ajax_get_response = function () {
					url: "",
					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].from, false);
								chatbot.addChatItem(sData[0].from + "  -  " + sData[0].body);
					error: function (sError) {
						chatbot.addChatItem("Something error!", false);

			var interval = 2000;
			setInterval(ajax_get_response, interval);

		onSendPressed: function (oEvent) {

			var chatbot = this.getView().byId("botchat");
			var question = oEvent.getParameter("text");
			var this_ = this;


				var data = '{"Body": "' + question + '", "From": "whatsapp:+14155238886", "To": "whatsapp:XXXXXXXXXXX"}';

				var headers = {
					'Authorization': 'User xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx=, Organization xxxxxxxxxxxxxxxxxxxxxxxxxx, Element xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx=',
					'Content-Type': 'application/json'

					//Post Message
					url: "",
					cache: false,
					type: "POST",
					headers: headers,
					data: data,
					async: true,
					success: function (sData) {
						localStorage.setItem("chatId", sData.date_created);
					error: function (sError) {
						chatbot.addChatItem("Something error!", false);


Here in the payload, we have to give Authorization(user, organization, element) which are generated while creating open connector instance. Otherwise the app will not work.



Now our app is ready and after running the app, the output is as follows.

When we click on “Whatsapp Me” button, a popup will be opened where we can send and receive messages.


Hope this will help.

Thanks for reading.


Assigned tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Rajitha Boina
      Rajitha Boina

      Thank you Sravya !!

      I have tried developing App as you explained. But i was getting errors in Controller code.

      which are related to hardcoding URL, console , localStorage statements.


      Author's profile photo Kay Carroll
      Kay Carroll

      The latest version of Whatsapp GB can integrate those features.

      Author's profile photo Pratik Modh
      Pratik Modh



      I got below error while open screen of open connector



      Author's profile photo Chandrika Bhardwaj
      Chandrika Bhardwaj

      # Hi,

      Should we use the same code to post?

      “Body”: “Hi Chandrika!”,
      “From”: “”whatsapp: +1xxxxxxxxxx”,
      “MediaUrl”: “”,
      “To”: “”whatsapp: yyyyyyyy”

      coz, this is not working for me

      Author's profile photo Jerry Janda
      Jerry Janda

      Note that the inclusion of phone numbers violated our rules of engagement, so I removed that portion of the post.

      Kind regards,


      Author's profile photo Sourav Ghosh
      Sourav Ghosh


      I was trying to follow, but i faced one issue.

      In the Twilio setup part, step 5, i sent join message from my personal whatsapp number to the given number but no reply came to my whatsapp number.

      Do i need to do any other steps in between for that.



      Sourav Ghosh

      Author's profile photo Gary Johnson
      Gary Johnson

      Hi there I have not tried this GBWhatsApp yet but I have read in an article about this feature that this App has a feature which allow you to do this but I am not recommend you this App because this is a modified version of WhatsApp.


      More details about this app:

      Author's profile photo Russel John
      Russel John

      Hi there I have not tried this GBWhatsApp yet but I have read in an article about this feature that this App has a feature which allow you to do this but I am not recommend you this App because this is a modified version of WhatsApp.


      More details about this app:

      Hi, Gary Johnson

      I'm new here and as far as I know this is a modified version of WhatsApp which has been developed by a Spanish developer by making some big changes in the script of WhatsApp. So I don't think it will work and it would not be right to use such apps works 🙂

      Author's profile photo john janny
      john janny

      Hi Gary Johnson!

      The link you pasted here is not working. Can you please explain a little bit what is gbwhatsapp as I heard a lot about different mod whatsapps?

      Author's profile photo Gb whatsapp whatsapp plus
      Gb whatsapp whatsapp plus

      you have done a great job to create this WhatsApp video call group. however, i would like to know can i join this group through through this GBWhatsApp Apk 2021 i am asking this because it is a modified version of Whatsapp.

      Author's profile photo gta lovers
      gta lovers

      That's an amazing post. I have done the setting according to your post!


      Thank you...

      Author's profile photo prasath123 man
      prasath123 man

      Garena Free Fire is a battle royale game, developed by 111 Dots Studio and published by Garena for Android and iOS. It became the most downloaded mobile game globally in 2019.The game received the award for the "Best Popular Game" by the Google Play Store in 2019

      Author's profile photo eagle apk
      eagle apk

      you have done a great job to create this game of mini militia mod apk. however, i would like to know can i join this can download this mini militia mod apk from eagleapk.  i am asking this because it is a modified version of mini militia

      Author's profile photo Abhishek Malhotra
      Abhishek Malhotra

      Apart from Whatsapp, it would have been interesting if Snapchat was also covered. I guess Snapchat like Whatsapp also has some API for developers to do the same thing.

      Author's profile photo Aayush k
      Aayush k

      I've used Twillio for WhatsApp bussiness using the WhatsApp business API feature of Twillo. And I must say this cloud communication platform is super awesome. However, I've also tried the AWS service for the same task, but I guess that is not well optimized for this task. But on the other hand, Twillio works flawlessly. I'd love to recommend everyone using Twillio for such tasks.


      Source: ExactlyHowLong


      Author's profile photo John JohnWick
      John JohnWick

      Thank you for sharing this. It was helpful. Keep sharing such things. Also checkout Nulls Clash.

      Author's profile photo APK Mazon
      APK Mazon

      Thank you for sharing this

      APKmazon brings the latest mod games and premium apps to Android. Completely safe and free to download!

      Author's profile photo tani bella
      tani bella

      Watch and Download Turkish Dramas Series Online With English Subtitles Online Free. You can also Watch Latest All Turkish123 Drama. turkish series
      Watch Turkish Series with English Subtitles Online for Free without Registration.

      Author's profile photo tomtom vani
      tomtom vani

      Watch and Download Latest Lottery Result Online Free dhankesari lottery result

      Author's profile photo TIMBER LAND

      I can use whatsapp features on this device. This is the GB Whatsapp version I am using: yowhatsapp atualizado 2021

      Author's profile photo jordan sancho
      jordan sancho

      That's an amazing post. I have done the setting according to your post!


      Author's profile photo john cena
      john cena

      Such an excellent post, thanks for sharing. Keep sharing stuff like this in future.

      Author's profile photo Sagar Pandey
      Sagar Pandey

      great article

      Keep up the god work


      APK Pivot