Conversations Inbox | Channels | Integration with Microsoft Bot Framework

Welcome to the tutorial on how to set up Microsoft BotFramework. In this tutorial we will show how to implement the Microsoft Framework Bot response with a simple Echo message to the tyntec Conversations Inbox.

Microsoft Framework Bot is used to interact with your customers before a real agent from your tech support takes over the conversation. Set up the bot for a large number of responses and make your real colleagues' work easier. Best of all, you can check the entire conversation in the tyntec Conversations Inbox.

You will need

Step One: Build an Echo bot

Let's create a new Microsoft bot!

At this time, the integration can only be applied to WA messages that come into your Conversations Inbox.

    1. Generate Echo bot using Yeoman with this command:

$ yo botbuilder

If you are using a Windows operating system, you may have a problem with the permission to run scripts in PowerShell: "RUNNING SCRIPTS IS DISABLED ON THIS SYSTEM".

Solution: Run PowerShell as an administrator and run this command:
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope LocalMachine

    2. Follow the botbuilder instruction:

Welcome to the Microsoft Bot Builder generator v4.15.0.
Detailed documentation can be found at https://aka.ms/botbuilder-generator
 
? What's the name of your bot? my-chat-bot //YOUR CHATBOT NAME
? What will your bot do? Demonstrate integration of the tyntec Conversations Inbox API and  the Microsoft Bot Framework
? What programming language do you want to use? TypeScript
? Which template would you like to start with? Echo Bot - https://aka.ms/bot-template-echo
? Looking good.  Shall I go ahead and create your new bot? Y

Congratulations! Your chatbot is created.

    3. Change the current working directory to the bot folder. It has the same name as bot: 

$ cd my-chat-bot

Step Two: Install the Conversations Inbox adapter

    1. In the current bot builder working directory, run this command:

$ npm install botbuilder-adapter-tyntec-conversation-inbox

    2. Add a new /api/whatsapp/messages endpoint to the src/index.ts file:

import axios from 'axios';
import { TyntecWhatsAppAdapter } from 'botbuilder-adapter-tyntec-conversation-inbox';
const axiosInstance = axios.create();
const tyntecCoversationsInboxAdapter = new tyntecConversationsInboxAdapter({
	axiosInstance,
	tyntecApikey: <your-tyntec-api-key>
});
server.post('/api/whatsapp/incoming-messages', async (req, res) => {
	await whatsAppAdapter.processActivity(req, res, (context) => myBot.run(context));
});

You can find an example in botbuilder-adapter-tyntec-conversation-inbox/examples/echo-bot/ file.

    3. Remove the speak argument from the call of the MessageFactory.text method in the src/bot.ts file: 

this.onMessage(async (context, next) => {
             const replyText = `Echo: ${ context.activity.text }`;
-            await context.sendActivity(MessageFactory.text(replyText, replyText));
======================================
+            await context.sendActivity(MessageFactory.text(replyText));
             await next();
         });

Step Three: Configure and run the bot

    1. Start the bot: 

$ npm start

    2. Create a publicly accessible URL using ngrok:

$ path/to/ngrok http 3000

    3. Copy the displayed public URL (such as https://843fc8776770.ngrok.io).

Step Four: Register the bot's webhook

Let the tyntec Conversations Inbox API know where to deliver WhatsApp messages from customers or your users. You’re going to subscribe to the bot’s webhook via an API call in Postman.

    1. Open Postman.
    2. Use this API endpoint to register your webhook.

    3. Set your channelJid as a Path parameter.
    4. Replace url with your ngrok http address as a Body parameter.

Did you get response 201 Created? Great! Your webhook is set up.

Step Five: Test it

The last thing is to test if the bot works and respond with an Echo message. So let's do it.

    1. Grab your mobile phone with WhatsApp not associated with any WABA account.
    2. Send a message to your WhatsApp Business Account number.

In a few moments, you will see a reply from your own Echo bot in your Conversations Inbox as well as on your mobile phone.

Congratulations! You successfully implemented a Microsoft Bot Framework to your Conversations Inbox and WhatsApp.

More?

Explore the full potential of your bot for your business. Discover all the possibilities with the official Microsoft documentation.
For production use, you can deploy your bot by following the deployment tutorial.