Live Web Chat for Microsoft Teams

Welcome screen before the chat. The title and the text can be customized
Customizable welcome message in the chat
Dialog between the customer and the customer support representative, as seen by the customer
The response by the customer support representative is provided in the teams thread
Type help to the Live Chat bot to get command supported by the bot
To get the embed code for the live chat for a specific teams channel type GetWebChats

Inspiration

Every modern web page must have a chat dialog to ensure visitors can get their questions answered in real time. A lot of solutions exists for this, but to my knowledge none that leverages Microsoft Teams as the backend support interface. That is a shame as Microsoft Teams is a great product that should also support this. The project is still in beta, but fully working solution that you can install in your own web site and Microsoft Teams.

What it does

The web chat control can be embedded into any web site, with a few lines of JavaScript. Once the customer visiting the web site opens the chat they are asked for their name and email. When the customer ask a question in the chat a new thread is created in a preconfigured Microsoft Teams channel. Any reply in this thread to the bot, will be received in the web chat on the web page, and any further questions/comments by the customer is posted to the thread keeping the conversation in one place. This allows the customer to chat in real time with a customer service representative sitting in Microsoft Teams.

How I built it

The solution is built with the Microsoft Bot Framework, that supports both web chat dialogs and integration with Microsoft Teams. It uses Azure Services such as Service Bus and Azure Tables to keep track of the messages and the embedded web chat and which Microsoft Teams channels they should post to.

Challenges I ran into

Currently Microsoft Team Bot only receive messages that are directed to the bot with the mention tag @Live Chat. This makes the dialog on the thread in teams a little more cumbersome than it had to be, because every reply the customer representatives makes, they must start with @Live Chat followed by the message they intend to send to the customer.

Accomplishments that I'm proud of

I have wanted to build this for a while, but only found the time to do so last minute. So is quite please with the result given that the solution is built in less than a day.