Skip to Content
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 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

10 Comments
You must be Logged on to comment or reply to a post.
      • 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

    • 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.

  • /
  • 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