When I test my bot on dev.botframework.com, all the messages coming from my bot shows my app name. Is it possible to re-name it? I haven't quite decided on a nice, friendly bot name, so I am trying out a few names every few days.
Can I also change the name of the user from "You" to the actual user's name when I gather it during conversation?
You can change the name of the bot displayed in the WebChat control by changing the Dispaly name field on the Bot profile under Settings # dev.botframework.com. There's no way to change the "You" text for the iframed webchat.
However, you can host the WebChat control on a page and provide the BotChat control with User and Bot:
<!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', name: 'user name' },
bot: { id: 'botid', name: 'bot name' },
resize: 'detect'
}, document.getElementById("bot"));
</script>
</body>
</html>
Related
I am following the steps as detailed here: https://github.com/Microsoft/BotFramework-WebChat to implement Microsoft Bot Framework (in C# SDK). I have tested it on a standalone page and it is working fine. I require to use the DirectLine version as I have to pass values from webpage to the bot (for user initalization).
However, the page where I have to implement this is an ASP.NET WebForms (using ScriptManager and AJAXToolkit).
The issue arises when using the bot. By typing any content in the chat window and pressing enter, the whole page refreshes and the bot reinitailizes to start. This makes the bot unusable.
I am guessing that the chat control's "Send" button is somehow triggering a postback via ScriptManager causing the whole page to refresh. I had to include e.preventDefault() on the click event of the button that shows the chat window to take care of this situation. I am lost when it comes to within the Directline chat control.
Can someone help?
The issue arises when using the bot. By typing any content in the chat window and pressing enter, the whole page refreshes and the bot reinitailizes to start. This makes the bot unusable.
I have same issue when I embed my bot in webform page (.aspx), to solve this problem, I put the chat bot container <div id="mybot" /> inside UpdatePanel control and set ChildrenAsTriggers property to false, which works for me, you can try it.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div id="mybot" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<script>
BotChat.App({
directLine: { secret: 'directline_secret_here' },
user: { id: '1234', firstname: 'firstname_here', lastname: 'lastname_here' },
bot: { id: 'fehantestbot' },
resize: 'detect'
}, document.getElementById("mybot"))
</script>
Screenshot of my test:
I had this issue when trying to build this into a DNN module.
Prevented it by inserting e.preventDefault to onKeyPress function in the Shell.tsx file in the BotFramework-WebChat project, and rebuilding it.
BotFramework-WebChat\src\Shell.tsx:
//...
private onKeyPress(e: React.KeyboardEvent<HTMLInputElement>) {
if (e.key === 'Enter') {
e.preventDefault(); //new line: prevent page reload
this.sendMessage();
}
}
//...
Use this code to prevent page refresh while sending chat from direclineJS webchat:
$(document).keypress(function (e) {
if (e.keyCode === 13) {
e.preventDefault();
return false;
}
});
how come the apostrophe always shows up as an ascii on the webchat control? it is properly rendered on the test page of the qnamaker. see attached codes and pictures.
this is how i add it on the qna maker knowledge base:
\n\n\t •Please check your computer's power cord.
QNAMaker Test Page:
however when i test it on the webchat control it appears like this.
using asci code instead of the apostrophe also wont fix the problem.
If you setup your bot likes the following in web client side:
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/botframework-webchat/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="bot"/>
<script src="https://unpkg.com/botframework-webchat/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>
Add the following line in the head to modify the charset:
<meta http-equiv="content-type" content="text/html; charset=utf-8"></meta>
I found this problem to happen on macs, not pc. My solution was to add this into my utterance sanitizer that would replace certain characters and therefore allow the Bot to handle it as expected
I've got the following code and can't figure out, why It wouldn't load my test message.
At the moment I am doing this tutorial. Anyways, I really liked how an other guy implemented the scaffold in this tutorial.
Long story short, I've tried to combine those two approaches and failed ..
If I go to /index.html I just get a blank page.
When I debug it with the internet explorer, I get the following error message:
Unhandled exception at line 3809, column 9 in http://localhost:50367/Scripts/angular.js
0x800a139e - JavaScript runtime error: [$injector:modulerr] Failed to instantiate module TodoApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24routeProvider
at Anonymous function (http://localhost:50367/Scripts/angular.js:3705:13)
index.html
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<!-- Custom Java Script files -->
<script src="Scripts/app.js"></script>
<script src="Scripts/controllers.js"></script>
<title>Amazing Todo</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
app.js
// Injects all the needed modules
var TodoApp = angular.module("TodoApp", [
"ngResource",
"TodoApp.controllers"
]).
config(function($routeProvider) {
$routeProvider.
when('/', { controller: "listCtrl", templateUrl: 'list.html' }).
otherwise({ redirectTo: '/' });
});
controllers.js
angular.module('TodoApp.controllers', []).
controller('listCtrl', function ($scope, $location) {
$scope.test = "testing";
});
list.html
<h1>Hello: {{test}}</h1>
This link leads to a document from an open nutrition database:
http://www.dabas.com/ProductSheet/Detail.ashx/124494
Im trying to fetch some information from this page with the help from xpath.
The problem is this, when i choose "view source", in order to find out what tags I am after, all I get is this:
<!DOCTYPE html>
<html>
<head>
<script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<title>ProductSheetLoader</title>
</head>
<body>
<div style="position:absolute; left:50%; top:50%; width:500px; height:200px; margin-top:-100px; margin-left:-266px; padding:15px; color:#666;">
<h1><img src="../../images/ajax-loader.gif" /> Produktbladet laddas...</h1>
</div>
<input id="hiddenARIDENT" name="ARIDENT" type="hidden" value="124494" />
</body>
<script type="text/javascript">
$(document).ready(function () {
var url2 = "/ProductSheet/Details.ashx/" + $('#hiddenARIDENT').val()
$.ajax({
url: url2,
cache: false,
success: function (respones) {
with (window.document) {
write(respones);
close();
}
}
});
});
</script>
</html>
It seems to me that all the info is getting loaded from somewhere else.
If i press f12, I can see all the info I want but how can I Acess this info? Is it possible?
Any help appreciated.
The original page just loads the actual content with ajax, and replaces the document contents with it. The actual information in this case is available at /ProductSheet/Details.ashx/124494, (note the s in Details.ashx, which contains the actual page contents.
Generally, the server might check whether the request also contains the X-Requested-With: XMLHttpRequest header, but it does not seem to be the case here.
I am using the below code for showing linkbutton in div and when it clicks it should go to that link.
This is not working for me correctly.I tried the below code.Just check and tell where I am wrong.
It is working good in this site when a user answer to any question and we hover on that user image we got his/her profile and there is also a link to see their profile. Exactly this concept is same what I am searching, So please help.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div.out { width:40%; height:120px; margin:0 15px;
background-color:#D6EDFC; float:left; }
div.in { width:60%; height:60%;
background-color:#FFCC00; margin:10px auto; }
p { line-height:1em; margin:0; padding:0; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form id="form1" runat="server">
<img src="Images/orderedList2.png" id="actionImage" />
<div class="out overout">
<span>move your mouse</span>
<div class="in">
<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
www.google.com
</div>
</div>
<div class="out enterleave">
<span>move your mouse</span>
<div class="in" >
<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
www.google.com
</div>
</div>
<script type="text/javascript">
$('#actionImage').mouseover(function (e) {
$("div.enterleave").show();
$('#actionImage').mouseout(function () {
$("div.enterleave").hide();
});
});
$("div.enterleave").mouseenter(function () {
$(this).show();
}).mouseleave(function () {
$(this).hide();
});
</script>
</form>
</body>
</html>
The Address is wrong you should put the protocol of the request to the address and not simply the address. So you need to change the href parameter in your tag like so:
www.google.com
www.google.com
To know more about protocols i advise the following
http://computernetworkingnotes.com/network-technologies/protocol-tcp-ip-udp-ftp-tftp-smtp.html
Commons Protocols
Port Number - Service
80 - HTTP
21 - FTP
110 - POP3
25 - SMTP
23 - Telnet
I'm not sure about the JS you have going but a basic error in your code is that your links need to have "http://"
Google
www.google.com
replace with
www.google.com
because external link should be start with http or Https