The simple question is, there is a way to publish my own version of Embed Web chat into Azure ? I need to change the layout of Web Chat Bot to use in the company website but Iframe does not allow changes.
The github BotFramework-WebChat repo and tutorial does not work in this case, since I have done everything in Dot Net, Azure don't even allow to use npm commands into Dot Net applications.
I'm stuck in this step, I really need help to solve this.
Instead of using the iframe you can use some other techniques. Embedding Iframe is easy but it doesn't give us the control. Some of the several ways as listed here.
Of these In your non-React website, run Web Chat inline allows you to control the appearance of the webchat layout using your custom CSS, while still being relatively easy
Exceprt from the page
Add a DirectLine (not Web Chat) channel, and generate a Direct Line Secret. Make sure to enable Direct Line 3.0.
Include botchat.css and botchat.js in your website, for example,
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
BotChat.App({
directLine: { secret: direct_line_secret },
user: { id: 'userid' },
bot: { id: 'botid' },
resize: 'detect'
}, document.getElementById("bot"));
</script>
</body>
</html>
Here is a sample of cards carousel rendered with custom CSS applied to it:
.Net or Node modules will not help here. Its more of applying HTML, CSS & JS knowledge.
I need to change the layout of Web Chat Bot to use in the company website but Iframe does not allow changes.
If we use the supplied code, which points at a Web Chat instance hosted by Microsoft. As you said, it is not easy to change the layout of webchat by using custom CSS and JavaScript code.
If you just want to change the display/layout of webchat roughly, as Master Chief suggested, you can run Web Chat inline by using botchat.js, and then use F12 developer tools to check the html structure of webchat and apply custom CSS styles to override default styles.
But as far as I know, some requirements/layout modifications (such as showing bot icon with each message) could not be achieved by using custom CSS and JavaScript to override default styles, we need to clone BotFramework-WebChat repo, alter it, build it, and reference our customized/built botchat.css and botchat.js files, which requires that you installed NPM.
How to publish my own Iframe BotFramework into Azure?
If you’d like to build your customized webchat and host it in your own Azure website in order to enable other websites can embed your webchat instance by using a <iframe>:
<iframe src="/path/to/your/webchat/instance" height="height" width="width" />
You can refer to these steps:
1) Clone BotFramework-WebChat repo and Build your own Web Chat
2) Create a web page (following sample code is for your reference) and reference your built botchat.css and botchat.js files
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="BotChat/botchat.css" rel="stylesheet" />
<script src="BotChat/botchat.js"></script>
</head>
<body>
<div id="bot"></div>
<style>
.botIcon {
float: left !important;
border-radius: 50%;
}
.userIcon {
float: right !important;
border-radius: 50%;
}
</style>
</body>
</html>
<script>
const params = BotChat.queryParams(location.search);
const user = {
id: params['userid'] || 'You', name: params['username'] || 'You',
};
BotChat.App({
bot: { id: "{your_botid_here}"},
resize: 'window',
user: user,
directLine: {
secret: params['s']
}
}, document.getElementById('bot'));
</script>
3) Publish it to an Azure website and add above webpage as default document
4) In other website, to embed your built webchat, you can use
<iframe src='http://{your_webapp_name}.azurewebsites.net/?s={directline_secret}&userid={user_id}' width="400px" height="500px"></iframe>
Test result:
