Chat with us if you have any questions!

Bot Framework Web Chat

Learn how to quickly integrate Chime with the Microsoft Bot Framework.

Integrating Chime with the Microsoft Bot Framework

Overview

Getting started with the Microsoft Bot Framework is fast and easy! This page will serve as a quick reference for how to get started using the bot framework and integrate it with your Chime instance.

The Bot Framework has documentation for developing bots in both C# and Node.js, but we will be focusing on C# in this example.

1) Getting Started

Create a bot with the Bot Builder SDK for .NET

Follow Microsoft's documentation above to build and deploy a simple echo bot. We'll modify this out-of-the-box bot next.

Microsoft Bot Framework Bot Bot Web Chat

2) Adding Custom Code

OK...now that you have a simple echo bot up and running. Let's make our simple code changes. The following will demonstrate how to create an Adaptive Card and add two OpenUrlActions that correspond to our Sales and Support queues.

MessagesController.cs

using System.Threading.Tasks;
using System.Web.Http;
using Microsoft.Bot.Connector;
using Microsoft.Bot.Builder.Dialogs;
using System.Web.Http.Description;
using System.Net.Http;
using System;
using System.Collections.Generic;
using System.Linq;
// Make sure to import the Microsoft.AdaptiveCards NuGet package
using AdaptiveCards;
using SimpleEchoBot.Dialogs;

namespace SimpleEchoBot.Controllers
{
  [BotAuthentication]
  public class MessagesController : ApiController
  {
    /// <summary>
    /// POST: api/Messages
    /// receive a message from a user and send replies
    /// </summary>
    /// <param name="activity"></param>
    [ResponseType(typeof(void))]
    public virtual async Task<HttpResponseMessage> Post([FromBody] Activity activity)
    {
      // check if activity is of type message
      if (activity != null && activity.GetActivityType() == ActivityTypes.Message)
      {
        await Conversation.SendAsync(activity, () => new EchoDialog());
      }
      else
      {
        HandleSystemMessage(activity);
      }
      return new HttpResponseMessage(System.Net.HttpStatusCode.Accepted);
    }
    private Activity HandleSystemMessage(Activity message)
    {
      if (message.Type == ActivityTypes.DeleteUserData)
      {
        // Implement user deletion here
        // If we handle user deletion, return a real message
      }
      *** The following code block is where you will make you changes ***
      else if (message.Type == ActivityTypes.ConversationUpdate)
      {
        // Handle conversation state changes, like members being added and removed
        // Use Activity.MembersAdded and Activity.MembersRemoved and Activity.Action for info
        // Not available in all channels

        // Check that there was a member added to the conversation
        if (message.MembersAdded.Any(o => o.Id == message.Recipient.Id))
        {
          // Instantiate a bot connector (this is the middle man for which all bot communications occur with the various channels)
          ConnectorClient connector = new ConnectorClient(new Uri(message.ServiceUrl));

          // Create a new reply activity...the text passed in will be the prompt for the card
          Activity reply = message.CreateReply("Please select one of the following options...");
          reply.Attachments = new List<Attachment>();

          // Create a new Adaptive card
          AdaptiveCard card = new AdaptiveCard();

          // Create a new OpenUrlAction and set the url to the Sales queue web client
          card.Actions.Add(new OpenUrlAction()
          {
            Url = "https://staging-it-chimehub-web.azurewebsites.net/chat/chime.instant-tech.com/2",
            Title = "Chat with Sales"
          });
          // And now one for the Support queue web client
          card.Actions.Add(new OpenUrlAction()
          {
            Url = "https://staging-it-chimehub-web.azurewebsites.net/chat/chime.instant-tech.com/3",
            Title = "Chat with Support"
          });

          // Build a new Attachment with our card object
          Attachment attachment = new Attachment()
          {
            ContentType = AdaptiveCard.ContentType,
            Content = card
          };

          // Add the new card attachment to our reply
          reply.Attachments.Add(attachment);

          // Send the reply back to the user
          connector.Conversations.ReplyToActivityAsync(reply);
        }
      }
      *** END Changes ***
      else if (message.Type == ActivityTypes.ContactRelationUpdate)
      {
        // Handle add/remove from contact lists
        // Activity.From + Activity.Action represent what happened
      }
      else if (message.Type == ActivityTypes.Typing)
      {
        // Handle knowing tha the user is typing
      }
      else if (message.Type == ActivityTypes.Ping)
      {
      }
      return null;
    }
  }
}
Once you made the changes above, they need to be pushed to Azure. If you are unsure how to do this, please refer back to the page: Create a bot with the Bot Builder SDK for .NET

3) Deploy the Bot

Deploying the Bot to your web page using the out-of-the-box Web Chat from Microsoft's Bot Framework

Now that we have our new bot changes up and running, let's deploy the web chat channel to your web page. You have a couple of different options, the first you can simply copy the iframe code from the Azure portal and embed that on you web page. The option we'll demonstrate is a slightly more involved approach and will use a button to open a new window pointing directly to the bot's web chat url. You can find the code below: 


<!-- Use whatever CSS you want to style the button accordingly -->
<button class="start-bot-web-chat">Start Bot Web Chat</button>



// This example is using jQuery
$(document).ready(function() {
    $('.start-bot-web-chat').on('click', function() {
        // Don't forget to add your web chat secret key to the url below
        var chatURL = 'https://webchat.botframework.com/embed/chime-basic-bot-poc?s=YOUR_SECRET_HERE';
        window.open(chatURL, 'Chime Chat', 'height=600, width=625');
    });
});