I have created a bot with MS Bot Framework and now I want to use Web Chat as a channel. Unfortunately adding avatar initials and images does not seem to work for me as it should according to the documentation.
Here is the very simple code from the documentation using botAvatarInitials to pass on the initials:
<!DOCTYPE html>
<html>
<body>
<div id="webchat" role="main"></div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
secret: 'YOUR_BOT_SECRET'
}),
// Passing avatar initials when rendering Web Chat
botAvatarInitials: 'BF',
userAvatarInitials: 'WC'
},
document.getElementById('webchat')
);
</script>
</body>
</html>
Any help greatly appreciated
It looks like this is documented incorrectly. The botAvatarInitials and the userAvatarInitials need to be set in the style options.
const styleOptions = {
botAvatarInitials: 'BF',
userAvatarInitials: 'WC'
};
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({secret: 'YOUR_BOT_SECRET'}),
styleOptions
},
document.getElementById('webchat')
);
For more details, take a look at the Display User and Bot Initials Web Chat sample.
Related
I am using the latest version of the web chat as below
``
<!DOCTYPE html>
<html>
<style>
html, body { height: 100% }
body { margin: 0 }
#webchat {
height: 100%;
width: 100%;
}
</style>
<body>
<div id="webchat" role="main"></div>
<script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
<script>
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token: 'MY_TOKEN_FROM_AZURE' }),
userID: '1234',
username: 'Chinni',
locale: 'en-US',
botAvatarInitials: 'WC',
userAvatarInitials: 'WW'
}, document.getElementById('webchat'));
</script>
</body>
</html>
``
I sent a username from the renderwebchat() but the same is not accessible in the bot
await turnContext.SendActivityAsync(MessageFactory.Text(turnContext.Activity.From.Name), cancellationToken);
The output is null in the web chat. Can someone help me over here.
Thanks!
You may have a mistake somewhere in your implementation, because I confirm that it is working. As you can see, I have the values available:
On the bot side, here is how I send those messages:
await turnContext.SendActivityAsync(JsonConvert.SerializeObject(turnContext.Activity));
await turnContext.SendActivityAsync($"Value of 'turnContext.Activity.From.Id': '{turnContext.Activity.From.Id}', 'turnContext.Activity.From.Name': '{turnContext.Activity.From.Name}'");
And on the webchat demo page, I used the same code as yours (except that I used my own token)
I clone this repo https://github.com/Microsoft/BotFramework-WebChat and I managed to edit css in local.
I would like to know what I need to deploy to use webchat online ?
Thanks you for you help
I clone this repo https://github.com/Microsoft/BotFramework-WebChat and I managed to edit css in local. I would like to know what I need to deploy to use webchat online?
After you customize&build your own web chat, to embed web chat in your website, you should include your built botchat.css and botchat.js file in your project and reference botchat.css and botchat.js in your web page.
I want to add a widget like this to open my chatbot, what I need to do?
It seems that you’d like to display the chat icon in your web page to allow user dynamically open/collapse your web chat, to achieve the requirement, you need not to modify the botchat.js file, the following code sample work for me , you can refer to it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="BotChat/botchat.css" rel="stylesheet" />
<script src="BotChat/botchat.js"></script>
<style>
#mychat {
margin: 10px;
position: fixed;
bottom: 30px;
right: 10px;
z-index: 1000000;
}
</style>
</head>
<body>
<div id="container">
<h1>Hello World</h1>
<!--other page contents-->
<img id="mychat" src="https://i.stack.imgur.com/RD7i4.png" style="float:right" />
</div>
</body>
</html>
<script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
BotChat.App({
directLine: { secret: '{directline_secret}' },
user: { id: 'You' },
bot: { id: '{your_botid}' }
}, document.getElementById("botDiv"));
document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#chatbotheader')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = "0px";
document.getElementById("mychat").style.display = "block";
};
});
document.getElementById("mychat").addEventListener("click", function (e) {
document.getElementById("botDiv").style.height = '500px';
e.target.style.display = "none";
})
}());
</script>
Test result:
If I want to add a widget like this
to open my chatbot, what I need to do ? Is it enough to modify the botchat.js file ?
How to have an application like in this post?
if you want to use iframe then you can't customize the design . for customize design you need to use Direct line by you can change design as well as make bot fully responsive.
Here is the code i am using working fine for me:
<!DOCTYPE html>
<html class="no-js lang-en" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- For Bot Frame -->
<link href="../assets/SCSS/botchat-fullwindow.css" type="text/css" rel="stylesheet" />
<link href="../assets/SCSS/botchat.css" type="text/css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body class="personal-body">
<!-- For Bot Code -->
<div id="BotChatElement">
</div>
<img src="../assets/images/chat-2-icon.png" onclick="openchatbot()" class="open-bot" id="button_chat" />
<script src="../assets/JS/botchat.js"></script>
<script>
var model = {
"userId": "demo1234",
"userName": "You",
"botId": "Chatbot Main Tree",
"botIconUrl": "",
"botName": "Chatbot Main Tree",
"secret": "",
"iconUrl": "",
"directLineUrl": "https://webchat.botframework.com/v3/directline",
"webSocketEnabled": "false"
};[enter image description here][1]
BotChat.App({
directLine: {
secret: model.secret,
token: model.token,
domain: model.directLineUrl,
webSocket: false,
sendTyping: true
},
user: { id: model.userId, name: model.userName },
bot: { id: model.botId, name: model.botName },
sendTyping: true,
resize: 'window'
},
document.getElementById("BotChatElement"));
function openchatbot() {
$(".wc-chatview-panel *").removeClass("maximizebot");
$(".wc-chatview-panel").css({ 'bottom': '0', 'display': 'block' });
}
$(".minimize-icon").on('click',
function () {
$(".wc-chatview-panel").removeClass("minimize-icon");
$(".wc-chatview-panel ").toggleClass("minimizebot");
$(".minimize-icon ").toggleClass("maximizebot");
});
$(".close-icon").on('click',
function () {
$(".wc-chatview-panel ").removeClass("minimizebot");
$(".wc-chatview-panel ").removeClass("maximizebot");
$(".wc-chatview-panel").css({ 'bottom': '-500px', 'display': 'none' });
});
</script>
</body>
</html>
To deploy your bot follow those steps:
Create an Azure account.
You can create free trial Azure subscription from here.
Deploying the a MS Bot framework code to Azure:
You can see this video deploying a MS Bot framework code to Azure
WebChat channel using Visual Studio.
Also you can check this tutorial. (However, this tutorial use old version of Azure portal).
After connecting the bot with WebChat channel, you can use the Embed code in your HTML code.
<!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>
I have this code to embed a bot as a live chat using direct Line API instead of the usual iframe but when i put in my directline secrete key, the Bot is occupying the whole web page. I need it to appear by the bottom right of the web page and pop up as a life chat when a user clicks on it. Please someone should guide me in achieving this. Thanks
Your problem is about the way you are displaying your div including the bot: <div id="bot"/>
You can style this div to appear like you want; there are several samples provided on the bot Webchat Github project:
For sidebar display: https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/sidebar/index.html
For fullwindow : https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/fullwindow
I would highly suggest to take a look at the 1st sample which has a demo of narrow, normal and wide div
As Nicolas R suggested, you can style the container div <div id="bot"/> to position it at bottom right corner of web page. I achieved same requirement in a project, the following sample code works for me, you can refer to it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<style>
.wc-chatview-panel {
width: 350px;
height: 450px;
position: relative;
}
#bot {
position: fixed;
bottom: 0;
right: 0;
}
.closechat {
top: 405px !important;
}
</style>
</head>
<body>
<div id="bot"></div>
</body>
</html>
<script>
BotChat.App({
directLine: { secret: "{your_directline_secret}" },
user: { id: 'You' },
bot: { id: '{Your_BotId}' },
resize: 'detect'
}, document.getElementById("bot"));
$(function () {
$("div.wc-header").prop("isopen", "true");
$("div.wc-header").click(function () {
var isopen = $(this).prop("isopen");
//alert(isopen);
if (isopen == "true") {
$("div.wc-chatview-panel").addClass("closechat");
$("div.wc-header").prop("isopen", "false");
} else {
$("div.wc-chatview-panel.closechat").removeClass("closechat");
$("div.wc-header").prop("isopen", "true");
}
})
})
</script>
Test result:
I have an spring/dojo application. The requirement is to locate an address in a stackcontainer/content-pane, in map. First thought was to have the redirection to google maps and CORS & ACCESS_ORIGIN issues are being thrown.
Can anyone guide us?
Not sure what you mean with "redirection to google maps", and I am not familiar with spring.
Below an example that I built after some googling (among others here), uses the google maps javascript api, and displays a map in a ContentPane (at least in my environment). You'll need to provide your google API key and adapt config to your environment:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google maps demo</title>
<link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<div id='theMap'></div>
<script>var dojoConfig ={
baseUrl: "", isDebug: true, async: true,
packages: [{"name": "dojo", "location": "dojo-release-1.12.2-src/dojo"}, {"name": "dijit", "location": "dojo-release-1.12.2-src/dijit"},
],
};
</script>
<script src="dojo-release-1.12.2-src/dojo/dojo.js"></script>
<script>
require([
'dijit/layout/ContentPane',
'myApp/gmapsLoader!http://maps.google.com/maps/api/js?v3&key=YOUR_GOOGLE_API_KEY'
], function (ContentPane) {
var theMap = new ContentPane({style: {height: '1000px'}}, 'theMap');
var mapOptions = {
center : new google.maps.LatLng(-34.397, 150.644),
zoom : 8,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var theMapContent = new google.maps.Map(theMap.domNode, mapOptions);
theMap.startup();
});
</script>
</body>
</html>
It has a dependency upon gmapLoader, which is described here (under the name async.js).
jc
I am new to laravel/vue js. I was following some tutorial and I could not render data in the html. It throws error message is undefined for some reason. And also I did not change much from initial laravel project setup.
one more question. I would like to see console.log result but it does not show in chrome dev-tool. Is this normal for laravel app ?
Error Use of undefined constant message - assumed 'message' (View:
/home/vagrant/flowers/resources/views/app.blade.php)
app.js
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app',
data: {
message: 'test',
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
});
app.blade.php
<html>
<head>
<link re="stylesheet" href="{{ asset('css/app.css')}}"
</head>
<body>
<div id="app">
{{message}}
<example/>
</div>
<script src="{{ asset('js/app.js')}}"/></script>
</body>
</html>