Thumbnail
WhatsApp Business API | Integration for the Microsoft Bot Framework
New

This document guides you in the process of connecting microsoft bot framework with tyntec to support your customers’ queries on Whatsapp.

logo_microsoft_bot_framework_ct2x

Introduction

This document guides you in the process of connecting microsoft bot framework with tyntec to support your customers’ queries on whatsapp.

Microsoft Bot Framework

  • It helps organizations to build intelligent bots, also known as Agents. 
  • It helps in connecting intelligent bots with multiple channels such as slack, MS Team, FB messenger, sms etc.

Prerequisites

  • Active Microsoft 365 account
  • tyntec account with approved Whatsapp number

1. Create your Microsoft Account with OFFICE 365

If you already have a MS account with Office 365 access, you may skip this step. A microsoft account with active plan is needed for any configuration with your whatsapp business account.

  • Create an account at microsoft azure.
  • Provide the necessary details and activate your Microsoft Office 365 account. 

2. Create App Resource

  • Login to the azure portal with your Office 365 account 
  • Click All resources in the window left panel
  • Click Add -> AI & Machine Learning -> Web App Bot
  • Provide unique bot display name, subscription, resource group and pricing.
  • Select the bot template which you need. For this tutorial, I will go ahead with echo bot with node js. 
  • Auto generate microsoft id and password  or create it manually.
  • Click create and it takes some time to create your web bot in the selected resource group.

 

3. Create Direct Line Channel

  • Click All resources and select the web app bot you just created.
  • Click the channels in the bot management section
  • Select direct line from the list of channels under ‘Add a featured channel’ section.
  • Copy secret key from the direct line and proceed.

4. Download Bot Source Code

Download the source code from the BUILD section and use it to 

  • Create an endpoint to receive the message from whatsapp and 
  • To send the message to whatsapp user. 

Refer section 5 for the code on send/receive apis. 

5. Integrate tyntec Endpoint with Direct Line

  • Create HTTPS post webhook endpoint inside the above source code. 
  • Ask Tyntec's support team to add this endpoint to your active WhatsApp number. This is for the purpose of receiving the message from WhatsApp to your webhook.
  • On receiving the message from whatsapp, make the following Api request to send your message to Microsoft bot for further processing.
  • Navigate inside downloaded source code and paste below code in index.js file

 

// This end-point will trigger from tyntec when someone messages to your whatsapp number.
server.post('/api/tyntec', async(req, res) => {
 
// process the message received from tyntec
 
 let newConversation = await createBotConversation();
 
// Parse the response from above function to get the conversation_id
 
	let botResponses = await sendConversationToBot(conversation_id,message);
 
 
   // Parse id and mark by splitting the above response. Get the actual user’s message by calling getResponseFromBot function. 
   let responses = getResponseFromBot(id, mark);
   sendMessageToTyntec(responses)
   res.status(200).send("Success");
})
 
//Method to get conversation id by calling directline api.
function createBotConversation (){
   var url = "https://directline.botframework.com/v3/directline/conversations"
   var options = {
       url: url,
       headers: {
           'content-type': 'application/json',
           'Authorization': 'Bearer DirectLine_access_token'
       },
       json: true,
 
   }
   // use request package dependencies and above data to send request through POST method to create new conversation on bot
 
   return response;
}
 
function sendConversationToBot(conversation_id,message){
 
   var url = " https://directline.botframework.com/v3/directline/conversations/ {{conversation_id}}/activities"
   var options = {
       url: url,
       headers: {
           'content-type': 'application/json',
           'Authorization': 'Bearer DirectLine_access_token'
       },
       json: true,
       body: {
           "type": "message",
           "from": {
               "id": "userId"
           },
           "text": "msg from tyntec"
       }
 
   };
 
   // use request package dependencies and above data to send request through POST method to send message to bot
 
   return responses;
}
 
 
function getResponseFromBot(conversation_response_id, mark) {
   var url = "https://directline.botframework.com/v3/directline/conversations/{conversation_response_id }/activities?watermark=${mark}"
   var options = {
       url: url,
       headers: {
           'content-type': 'application/json',
           'Authorization': 'Bearer DirectLine_access_token'
       },
       json: true,
 
   }
   // use request package dependencies and above data to send request through GET method to get response from bot
 
   return responses;
 
};
 
 
function sendMessageToTyntec(responseText) {
   let url = "https://api.tyntec.com/chat-api/v3/messages"
   let options = {
       url: url,
       headers: {
           'content-type': 'application/json',
           'apikey': 'XX---your api key'
       },
       json: true,
       body: {
           "to": "user number you received message",
           "channels": [
               "whatsapp"
           ],
           "whatsapp": {
               "from": "XX--Your tyntec number",
               "contentType": "text",
               "text": responseText //message goes here
           }
       }
   };
 
   // use request dependencies and above data to send request through POST method and finally send the success status to your function called
 
}

Once you are done with the functionalities as mentioned above, do follow the microsoft document to upload the project to azure cloud. You may click here to know about deployment process of MS bot.