How To Create ChatBot In Xamarin

Introduction

The Bot Framework runs inside 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.

In this article, we will learn how to integrate a bot right into our Xamarin.Forms application via the Microsoft Bot Framework Web bots.

Create new Bot application

You can read my previous article for Getting Started with Bots Using Visual Studio 2017.


Publish Bot Application to Azure

You can read my previous article for publishing bot application to Azure.

Generate Web Chat Code

After publishing your bots into Azure, you can generate web Chat HTML code from bots portal as shown below.

Step 1

Sign into the Bot framework portal.

Step 2

Click "My Bots".

Step 3

Select your bot that you want to generate code for.

Step 4

Click on "Get bot embed Codes" > Web Chat >  "Click here to open Web Chat configuration page".



Step 5

It will navigate to a new web page for configuration. Click on " Add New Site" > Provide site or application name > Click on "Done".



Step 6

You can copy your secret keys and embed code for integrating to Xamarin.Forms application.



Create new Xamarin .Forms Application

Go to Run (Windows key +R) > type Devenv.exe or (select from Windows Application list and select New project from File menu) > New Project (ctrl +Shift+N) or click "More project templates" from VS Start screen.



New Project > Cross -Platform from Template > Cross platform App (Xamarin.Forms or native). It will show the screen, as shown below.



You can find the above screen only on VS 2017. Select Blank apps > select Xamarin.Forms > Select PCL and click OK. It will generate all the mobile platform projects like Android, iOS, and UWP.



Open your MainPage.xaml file to add WebView control with the following code for enabling web chat.

<StackLayout WidthRequest="300" HeightRequest="500">
    <Image Source="profile.png" WidthRequest="200" HeightRequest="200"></Image>
    <Label Text="Live Chat with Suthahar via C Sharp corner" FontSize="20"></Label>
    <WebView x:Name="webview" Source="https://webchat.botframework.com/embed/DevEnvExeBot?s=8XGcUROXkAA.cwA.pZo.8pJ-6oQ3sJRpxq0tqIo9uLPji4oxBQuz2pW5qWobw2c" WidthRequest="300" HeightRequest=" 300"></WebView>
</StackLayout>// This is just a sample script. Paste your real code (javascript or HTML) here. if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}

Now you can run the application in Windows, Android, and iOS.

Summary

In this article, your learned how to create a Bot application, publish Bot to Azure and to Xamarin.Forms using Visual Studio 2017. If you have any questions/ feedback/ issues, please write in the comment box.