Post
Ask Question

Creating And Embedding A Bot Application In Your Blogger

Introduction

A Bot Application runs inside an app, like Skype, web chat, Facebook, Message, etc. Users can interact with bots by sending them messages, commands, and inline requests. You control your bots using HTTPS requests to the Bot API. Azure Bot Application Service automatically configures the Web Chat channel while publishing to Azure. Bot channel includes the Web Chat Channel which can be embedded directly onto websites or blogger for users to interact with.

In this article, we will learn how to integrate our bot application right into your blogger via the Microsoft Bot Web Chat Channel.

Create And Embed A Bot Application App In Your Blogger 

Create FAQ Bot Application

You can refer to my previous article to create and build a Xamarin FAQ Bot using Azure Bot Service and deploy it into Azure. I am not using any coding to develop the Bot application, you can follow the provided steps in the article to create and deploy the FAQ Bot.

Create And Embed A Bot Application App In Your Blogger 

Generate WebChat Channel Html Code

Login to Azure portal > Select the “All Resources” >Select Your Web App Bot > Select Channels. As already discussed, it automatically configured the Web Chat channel while publishing to Azure.

Create And Embed A Bot Application App In Your Blogger 

You can click on “Edit” or “Get Bot Embed Codes” and Copy the Iframe HTML code to integrate WebChat Channels to the blogger.

Create And Embed A Bot Application App In Your Blogger 

Integrate Bot Application into Blogger

Step 1

Sign in to your Blogger (https://www.blogger.com) account. Blogger opens on the default Dashboard page that displays a list of all your hosted blogs.

Step 2

Select your Blogger > Select the layout > Click on Add a Gadget > Add HTML and JavaScript Layout component for adding webchat embed code.
Create And Embed A Bot Application App In Your Blogger 

Step3

Paste the iFrame HTML code that you copied from the Azure portal into the input box and provide the title of the Bot.
 
Create And Embed A Bot Application App In Your Blogger 

Click on preview and verify that width and Height is aligned with your blogger layout.

Step 4

Click "Save arrangement “above the layout editor to publish the post containing the Web Chat App to your blog.

Test Web Chat Application

You can click on “View Blog” for viewing the original layout design and test your Bot Application.

 

Summary

In this article, you have learned how to integrate bot application right into your blogger via the Microsoft Bot Framework Web Chat Channel. If you have any questions/feedback/issues, please write in the comment box.


Similar Articles