I've written a bot and am testing it locally on my machine through the bot emulator. However, my copywriting team want to be able to test it too but don't have the technical skills to set up the emulator.
Is there an easy way I can do this through maybe a Heroku review app (as that is how we currently distribute our app for testing)?
You could create a test page for them with the Web Chat control.
Here's the HTML for one of my chatbots:
<!DOCTYPE html>
<html>
<head>
<title>Pig Latin Bot</title>
<meta charset="utf-8" />
</head>
<body style="font-family:'Segoe UI'">
<img src="images/PigLatinBot.png" alt="Pig Latin Bot"/>
<h1>Pig Latin Bot</h1>
<p>Translates your text to Pig Latin.</p>
<div id="webChatControl">
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$("#webChatControl").load("api/WebChat");
</script>
</body>
</html>
And here's the controller code:
public class WebChatController : ApiController
{
public async Task<string> Get()
{
string webChatSecret = ConfigurationManager.AppSettings["WebChatSecret"];
var request = new HttpRequestMessage(HttpMethod.Get, "https://webchat.botframework.com/api/tokens");
request.Headers.Add("Authorization", "BOTCONNECTOR " + webChatSecret);
HttpResponseMessage response = await new HttpClient().SendAsync(request);
string token = await response.Content.ReadAsStringAsync();
token = token.Replace(""", "");
return $"<iframe width='400px' height='400px' src='https://webchat.botframework.com/embed/PigLatinBotJoeMayo?t={token}'></iframe>";
}
}
There's a more detailed explanation in my blog post, Using the Bot Framework Chat Control.
Related
I tried write code for ajax call api from controller. I want ajax get content of link api. I have trouble write code ajax. Please help me write this code with ajax
RestController.java
#Responsebody
#GetMapping("api/hello")
public String hello (){
return "Hello World";
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<button type="submit" name ="clickPost"></button>
</body>
</html>
I want when I click button, website return strings Hello World. Please help me write code ajax execute this request, i'm newbie. If my code controller has error, please change it help me. Thanks
Your RestController.java is fine (only missing '}' ). There is actualy no ajax call from your index.html.
It can look somethink like that:
<!DOCTYPE html>
<html>
<head>
<script>
function callAPI() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText)
}
};
xhttp.open("GET", "/api/hello", true);
xhttp.send();
}
</script>
</head>
<body>
<button onClick="callAPI()">Click me</button>
</body>
</html>
Depending on your particular environment you still might need to update the API URL in javascript or enabling CORS. Check these links
https://web.dev/cross-origin-resource-sharing/
https://spring.io/guides/gs/rest-service-cors/
I have a dialog flow that will require a user to upload a file/files. I would like to prompt the user and have them click on a button to open a file browse window to select the file they want to upload. I do not want to use the file chooser in the WebChat window text entry box (Users find this confusing). Is this possible? I saw in the documentation for v3 that there is a AttachmentPrompt dialog. However in the documentation for v4 I only see it mentioned in a one liner here... https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-concept-dialog?view=azure-bot-service-4.0 however other than that which sounds promising there appears to be no documentation on this functionality.
Thanks for any help you can provide!
PromptAttachment does not define client side rendering, or client side file upload code. In order to have the WebChat control respond to a custom button, you will need to provide an Attachment Middleware for the Web Chat control, and have the bot send a custom attachment type.
Custom Attachment:
private class FileUpload : Attachment
{
public FileUpload()
: base("application/uploadAttachment") { }
}
Replying with FileUpload attachment:
var reply = activity.CreateReply("Upload a File");
reply.Attachments.Add(new FileUpload());
await connector.Conversations.SendToConversationAsync(reply);
Page hosting Web Chat:
<!DOCTYPE html>
<html>
<body>
<div id="webchat" />
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/react#16.5.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.5.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-redux#5.0.7/dist/react-redux.min.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
function uploadFile() {
document.querySelector('[title="Upload file"]').click();
}
</script>
<script type="text/babel">
var chatbot = new WebChat.createDirectLine({
token: 'YourToken',
webSocket: true,
});
const attachmentMiddleware = () => next => card => {
switch (card.attachment.contentType) {
case 'application/uploadAttachment':
return (<button type="button" onClick={uploadFile}>Upload file</button>);
default:
return next(card);
}
};
WebChat.renderWebChat({
directLine: chatbot,
botAvatarInitials: 'Bot',
attachmentMiddleware,
}, document.getElementById('webchat'));
</script>
</body>
</html>
I want to make a specific component for showing loading icon when the browser waits to load data from json. Is there any possible way to do it by using a service ??
html :
<html ng-app="app">
<head>
<title> ERP </title>
</head>
<body >
<div ng-controller="data"><span class="loading" ng-show="loader"><img src="ajax-loader.gif"></span>
<table>
<tr><td>{{data1}}</td><td>{{data1}}</td><td>{{data1}}</td></tr>
</table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script type="text/javascript" src="ctrl.js"></script>
</body>
</html>
js :
var app = angular.module('app',[]);
app.controller('data', ['$scope','$http',function($scope,$http){
$scope.loader = null ;
if($scope.loader == null )
{
$scope.loader = true ;
}
$http.get('events.json').
success(function(data) {
$scope.loader = false ;
console.log(data);
$scope.data1 = data ;
console.log($scope.data1);
}).
error(function(data, status, headers, config) {
});
}]);
You can wrap the original $http to provide a customizedHttp service. in this service, provide the same interface with $http. when sending GET request to the server, the customizedHttp broadcast an event to show the loading flag. and after receiving response, broadcast another event to hide the loading flag.
to control the flag, you'd better to write a directive.
I'm just starting to use Parse Core (as Google'e ScriptDB is being decommissioned soon) and am having some trouble.
So I'm able to get Parse Core db to read/write using just a standard HTML page as shown below:
<!doctype html>
<head>
<meta charset="utf-8">
<title>My Parse App</title>
<meta name="description" content="My Parse App">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.18.min.js"></script>
</head>
<body>
<div id="main">
<h1>You're ready to use Parse!</h1>
<p>Read the documentation and start building your JavaScript app:</p>
<ul>
<li>Parse JavaScript Guide</li>
<li>Parse JavaScript API Documentation</li>
</ul>
<div style="display:none" class="error">
Looks like there was a problem saving the test object. Make sure you've set your application ID and javascript key correctly in the call to <code>Parse.initialize</code> in this file.
</div>
<div style="display:none" class="success">
<p>We've also just created your first object using the following code:</p>
<code>
var TestObject = Parse.Object.extend("TestObject");<br/>
var testObject = new TestObject();<br/>
testObject.save({foo: "bar"});
</code>
</div>
</div>
<script type="text/javascript">
Parse.initialize("PyMFUxyBxR8IDgndjZ378CeEXH2c6WLK1wK2JHYX", "IgiMfiuy3LFjzH0ehmyf5Rkti8AmVtwcGqc6nttN");
var TestObject = Parse.Object.extend("TestObject");
var testObject = new TestObject();
testObject.save({foo: "bar"}, {
success: function(object) {
$(".success").show();
},
error: function(model, error) {
$(".error").show();
}
});
</script>
</body>
</html>
However, when I try to serve that up using the HtmlService shown below, I get no response from Parse. Parse Core.html basically has all of the code I have above ( only thing I changed was to remove the css calls).
function doGet() {
var htmlPage = HtmlService.createTemplateFromFile('Parse Core.html')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE)
.setTitle('Parse Core Test');
return htmlPage;
}
Link to ParseDb Library for Apps Script
Here is the key to add the library: MxhsVzdWH6ZQMWWeAA9tObPxhMjh3Sh48
Install that library and it allows you to use most of the same methods that were used by ScriptDb. As far as saving and querying go they almost identical. Make sure to read the Library's notes, how to add the applicationId and restApiKey. It is a little different that you can silo data by classes which must be defined in the call to Parse.
Bruce here is leading the way on database connection for Apps Script, he has plenty of documentation on using Parse.com, and also his own DbConncection Drive that would allow you to use a number of back-end systems.
Excel Liberation - Bruce's Site.
I try to parse HTML using HtmlAgilityPack using simple doc.load method by passing the URL, but it comes with the following result how can I resolve this issue?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function setCookie(c_name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays==null) ? "" : ";
expires=" + exdate.toGMTString()) + ";path=/"; }
function getHostUri()
{ var loc = document.location; return loc.toString(); }
setCookie('YPF8827340282Jdskjhfiw_928937459182JAX666', '202.142.170.42', 10);
setCookie('DOAReferrer', document.referrer, 10); location.href = getHostUri();
</script>
</head>
<body>
<noscript>This site requires JavaScript and Cookies to be enabled. Please change your browser settings or upgrade your browser.</noscript>
</body></html>
This site requires JavaScript and Cookies to be enabled.
Please change your browser settings or upgrade your
browser.
This Message says it all, the side needs javascript to be loaded, and HtmlAgilityPack is no JavascriptEngine!
The Load Method of the HtmlDocument can not interpret and execute Javascript-Code it´s just a simple "Download"-Function for static HTML-Sites.
What you could try to do is, with Firebug (or something else) check which HttpRequest are made to get the content, and this Requests you have to recreate in C# to get the HTML you want!
Here are some similar Questions:
Running Scripts in HtmlAgilityPack
C# - Get JavaScript variable value using HTMLAgilityPack
Calling javascript function from HtmlAgilityPack