Skip to Content
Technical Articles
Author's profile photo Ferry Djaja

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 Setup

  • 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);
}

https://github.com/ferrygun/UI5Whatsapp

Assigned tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo pragyan pradeepta panigrahi
      pragyan pradeepta panigrahi

      Is Twilio is a paid serivice

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      Just use Twilio sandbox.

      Best,

      Ferry

      Author's profile photo Krishnakanth Gajula
      Krishnakanth Gajula

      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

       

      Author's profile photo Sidharth VR
      Sidharth VR

      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

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      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

      Author's profile photo AFIQAH MIHSAR MARHIYAH
      AFIQAH MIHSAR MARHIYAH

      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?

      Author's profile photo Roshan Shetty
      Roshan Shetty

      Yes even i am facing the same issue ... Were you able to find "Connectors"

      Author's profile photo saber mohamed
      saber mohamed

      me too please help me if you found any solution

      Author's profile photo Gautam Malla
      Gautam Malla

      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.

      Author's profile photo Prashanth Rajasekaran
      Prashanth Rajasekaran

      Facing below error in twilio when we try to activate sandbox. I agreed but still facing the same error.

      Author's profile photo Sushmita Goswami
      Sushmita Goswami

      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

      Author's profile photo saber mohamed
      saber mohamed

      please help can implement without sap open connector ?

      Author's profile photo saber mohamed
      saber mohamed

       

      Please help in this issue