Deploy customized Bot Framework web chat to Azure

Question

I've customized my web chat by cloning from the source here. No I want to deploy this to Azure and host it on one of my websites. I'm building the app based on the instructions in the above. When I try deploying, I either get a "You do not have permission to view this page" or a 503 Gateway Error.

Where should I point the Azure website to look at. When I run locally, I need to point it to one of the samples in the samples directory. When I try doing the same on Azure, the chat never loads and shows a blank window. Is there a mistake in the way the app is being deployed ?

Hi Vijay! Can you post the code you're using to display the bot on your page and/or the steps you're taking to deploy it? — JJ_Wailes
When I try doing the same on Azure, the chat never loads and shows a blank window. You can check if botchat.css and botchat.js are loaded as expected via F12 developer tools Network tab, and you can check if any error appear in developer tools Console tab. — Fei Han

Fei Han Fei Han · Accepted Answer · 2018-07-19T02:56:05

"You do not have permission to view this page"

I suspect that there is no default page in your Azure website, which cause the issue. You can add/specify a web page as the default document.

Same issue appears if no default document (web page) in my project folder:

I've customized my web chat by cloning from the source here. Now I want to deploy this to Azure and host it on one of my websites.

You can follow the following steps to customize&build your own Web Chat, and then add it to your website.

1) Refer to the steps described in “Building Web Chat” to build your own Web Chat

2) Include your own customized botchat.css and botchat.js in your website project

3) Add references to botchat.css and botchat.js in the section of the web page

4) Add and initiate BotChat with directLine_secret, botid etc information

<script>
    BotChat.App({
        directLine: { secret: "{directline_secret}" },
        user: { id: 'You' },
        bot: { id: '{bot_id}' },
        resize: 'detect'
    }, document.getElementById("bot"));
</script>

5) Test it on local, if WebChat works as expected then publish the website to Azure

I did a test with the above steps and it works fine both on local and Azure website.

Deploy customized Bot Framework web chat to Azure

1 Answers