Skip to content

Create, deploy and embed your Azure chatbot 😎

Notifications You must be signed in to change notification settings

Dacili/EchoBotLatest

Repository files navigation

Create, deploy, and embed your chatbot 😎

Echo Bot

Echo Bot is a simple chatbot that returns back everything the user entered in the chat.
If you want to check default generated readme file, check this: https://github.com/Dacili/EchoBotLatest/blob/master/README1.md

Creation

You need to install Visual Studio extension Bot Framework if not already:

Create new project in Visual studio, and select Echo Bot project.

After you got template, you can customize it as you wish.
In order to test Bot locally you need to install Bot Framework Emulator
image
Testing locally:

2023-09-22_13h38_42.mp4

Deployment to Azure

Required services

Services on Azure that you're gonna need are:



1. App Service - for hosting the code of your chatbot (web app type). I chose the free one.
2. Azure Bot - When setting up the pricing, choose Free tier.

image

  1. App Service plan - is linked to app service (you can create it while creating app service), it depends on location, zone, features, cost...
    Note: If you need this for some real use cases, probably you will have to upgrade from free services to pay-on-demand.

Deploy bot code to App Service

I was using 2 different approaches to deploy my bot code:
1st approach: Published my app to Github, then connected app service with that repo on Github. And enabled continuous deployment.

In GitHub actions, we can check deployments: image

2nd approach: Publish directly from Visual Studio. Right-click on the project, and click on Publish.

Choose Azure -> Azure app service -> log in Azure -> you will see your services, choose the app service you want -> publish.
Once you did this process you will generate Deploy.pubxml file, so next time you can just hit the Publish button.

Connect App Service with Azure Bot

In Bot service -> configuration, enter the url of app service, and add sufix /api/messages:
image
Save somewhere the Microsoft App ID.
Click on Manage password:
Create a new password, you will be able to copy the VALUE just upon the creation (if you leave the page, you will not be able anymore to copy it).
image
In bot code, in appsettings.json, fill that values:

but in appsettings.Development.json make them empty, because the emulator will fail with 401 errors:

Deploy your bot code one more time.

Test bot in Web chat (Azure)

If you did everything properly, you should be able to run your bot in Test in Web Chat:
image

Embedding into Web app

We're gonna embed it directly in web app. You should use this approach if it's for testing, development.
(If it's production, then we would have to gather a token with a secret key, and then get embedded code with that token.)
In Azure Bot service, click on Channels -> Web Chat: image
Then click on Default Site:
image
In html page, copy this embedded code, and replace YOUR_SECRET_HERE with real secret key, and that's it!
image

You can even use it in teams, just click on Teams in Channels, and create one. And then open it via Teams:
image

Releases

No releases published

Packages

No packages published