I am working on a simple project where my primary requirement is to use Microsoft BotFramework's WebChat to create a custom inline app. I want to add a button at the header which will be a reset button, which will restart the session and remove all the messages but will maintain the same conversation ID. I am not finding any useful documentation on how can I send a message to the bot from a button click. Also How can I notify the bot which conversation's session needs to be erased.
This is the sample code I am using,
<!DOCTYPE html>
<html>
<head>
<link href="stylesheets/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="bot"/>
<script src="javascripts/botchat.js"></script>
<script>
BotChat.App({
directLine: { secret: '' },
user: { id: 'you' },
bot: { id: 'agent' },
sendTyping: true,
resize: 'detect'
}, document.getElementById("bot"));
</script>
</body>
</html>
I have also checked that we have something called deleteUserData event, but I am not sure how do I use this in my scenario.
You can do this via back channel. In a nutshell, what will happen is the web page that's hosting webchat will connect to the same DirectLine instance your webchat is using, which will allow the page to communicate with the bot. You can then set up a handler for a reset event which will call the appropriate code to handle resetting the state.
You can see how to set up back channel here:
https://github.com/MissionMarsFourthHorizon/operation-max/tree/master/Node/exercise8-BackChannel
Try session.clearDialogStack(); or delete session.userData;
Related
My web is Laravel-VueJs App, I managed to sign in to Tableau server automatically in the background, (but without getting Auth tickets (I'm not sure if I need tickets for Javascript API yet), I'm trying to show my workbooks on my web page but getting blank page without any error, however this is my code
first added Javascript API in my app.blade.php
<script type="text/javascript" src="https://my-server-url/javascripts/api/tableau-2.8.0.min.js"></script>
and this is the Vue component where I need to show workbooks
<template>
<div>
<div
ref="tableau"
style="width:800px; height:700px;"
/>
</div>
</template>
<script>
export default {
name: "TableauWorkbookShow",
props: {
url: {
type: String,
required: true,
},
},
mounted(){
this.initViz();
},
methods: {
initViz() {
// url looks something like this: https://my-server-url/#/site/my-site-name/views/workbook-name/view-name
var viz = new tableau.Viz(this.$refs.tableau, this.url);
}
}
};
</script>
no errors, neither info on the page, anything else i need to consider here ? and should I add Auth tickets to the url to get workbooks or the url as it is now is fine to work?
One way to test would be to use the Embed code directly from the workbook on Server.
Click Share
Then click Copy Embed Code.
Paste this code directly into your html/view. It should have everything included to populate your dashboard into a webpage.
If this works, you know that your overall auth is working and you can troubleshoot the differences of your js to the embed code.
If auth doesn't work you should still see this screen if your js/html is working correctly.
Currently, I had developed Microsoft Graph ChatBot which retrieves the data from SharePoint but when I debug in Emulator its work, but I deploy in WebChat the result did not display.
The results from Emulator,
The results from WebChat
Anyone know how to solve it or suggestion?
There are currently two versions of Web Chat: Gemini and Scorpio. Test in Web Chat is still using the older version - Scorpio - which unfortunately does not support OAuth Cards. The BotFramework Development Team is working to update Test in Web Chat, but if you need an immediate fix, I would recommend creating your own web page that uses the latest version of Web Chat. Take a look at the sample code below.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>WebChat</title>
<script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
<style>
html, body { height: 100% }
body {
margin: 0;
}
#webchat {
height: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
(async function() {
// Note, for the simplicity of this example, we are simply using the Web Chat Secret here;
// however, it is recommended that you create a backend REST API to generate and manage
// tokens for production.
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ secret: '<WEB_CHAT_SECRET>'}),
}, document.getElementById('webchat'));
})().catch(err => console.log(err));
</script>
</body>
For more examples of how to get started with Web Chat, take a look at the Web Chat samples.
Hope this helps!
I've integrated reCAPTCHA v3 in one of my forms. In onload, there's a token produced and google captcha logo in the bottom right corner. But when I submit the form, in console there is an error shown, "Error: No reCAPTCHA clients exist". Also, it seems, no data is fetched by "g-recaptcha-response" and $_POST["g-recaptcha-response"] remains empty.
Here is the sample code:
<script type="text/javascript">
var ReCaptchaCallbackV3 = function() {
grecaptcha.ready(function() {
grecaptcha.execute("site_key").then(function(token) {
console.log("v3 Token: " + token);
});
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
It doesn't produce any "g-recaptcha-response" when the form is submitted.
I don't know much about google reCaptcha. I've followed the documentation provided by them and used a site and a secret key in the proper way.
Can anybody please tell me where might be the problem and what is the possible solution?
I believe this error occurs when the reCaptcha api.js loads, but your container is not present on the page yet (at least for v2). I had this error occur in a React app when I navigated to the page rather than loading it as the first on. Instead of using render=explicit and using a global namespace onLoadCallback, I was able to resolve it by rendering the captcha element manually.
Instead of creating a <div class="g-recaptcha"></div>, give the container div an id only (<div id="recaptcha-container"></div>) and render it in your JS code (e.g. in componentDidMount for a React app):
grecaptcha.ready(function() {
grecaptcha.render("recaptcha-container", {
"sitekey": "your-site-key"
});
});
Have you tried loading the script before trying to send the request?
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
<script type="text/javascript">
var ReCaptchaCallbackV3 = function() {
grecaptcha.ready(function() {
grecaptcha.execute("site_key").then(function(token) {
console.log("v3 Token: " + token);
});
});
};
</script>
When I came across this problem with reCAPTCHA v3, it was because I didn't pass it the correct site key.
This also happens in Recaptcha 2 before user interacts with it. So, I have a submit button that triggers a JS function that checks the value of recaptcha. To solve the no client exists problem, I did:
try {
data["reCaptcha"] = grecaptcha.getResponse();
} catch (err) {
data["reCaptcha"] = "";
}
The data object then gets sent to a back-end script that validates the recaptcha. The back-end also checks for the field being empty.
I had this problem because I was calling grecaptcha.reset(); when there wasn't any Recaptcha active on the site
grecaptcha.reset();
recaptcha__en.js:507 Uncaught Error: No reCAPTCHA clients exist.
at MX (recaptcha__en.js:507)
at Object.Zn [as reset] (recaptcha__en.js:514)
at <anonymous>:1:13
I was using React and only rendering my captcha container sometimes. Fixed by hiding the captcha button instead of not rendering it.
In my case grecaptcha.reset(); was present from previous code snippet, and I was programmatically invoking it.
As the captcha verification is going on the fly every time. Resetting wasn't required.
After eliminating this grecaptcha.reset(); my code works perfectly fine.
Maybe this hint can help someone.
We received this because we have a second environment with another domain and forgot to add this domain to the reCaptcha admin site. The solution was to add the new domain to the settings.
The steps are
Open www.google/recaptcha/admin/site
Select the site you're working on
Click on the settings gear
Add the domain in its respective section
I'm an iOS developer who recently started using Socket.IO. During the life cycle of my iOS application, my server will be receiving messages from my app as the client, but for one particular case, the server will also need to receive a message from a web browser as the client. I'm testing a very basic browser UI, which includes a text field and a button and on the tap of that button, a numeric code (which was entered in the text field) needs to be sent to the server. This is what that looks like:
<form>
Code:<br>
<input type="text" id="code" name="code"><br>
<input type="submit" id="validatebutton" value="Validate">
<script src="/socket.io-client/dist/socket.io.js"></script>
<script>
document.getElementById("validatebutton").onclick = function() {
var socket = io('http://localhost:3000');
socket.on('connect', function(clientSocket) {
clientSocket.emit('validateCode', document.getElementById("code"));
});
};
</script>
</form>
The connection works fine. When I run this code, the client successfully connects to the listening socket server. The only problem is that the event handler is not executed. I may be very off here, but what I went for is a client event handler, which is included in the Swift SDK:
self.socket.on(clientEvent: .connect, callback: { (data:[Any], ack:SocketAckEmitter) in
// Do something here
})
self.socket.connect()
I'm just assuming that the Javascript client has a client event handler (named 'connect') as well, which is received by the client at the moment of connecting to a server. Like I said, I may be way off here. I'm just following the Socket.IO documentation posted on their website, which tells me to do it this way. If someone can tell me what I'm missing, or what I'm doing wrong, it would be much appreciated. Sorry for all the noobishness, but I really don't know where else to turn, since the official documentation is very vague and the other question on Stack are a little too advanced for me.
I wouldn't put the emit function inside the connect. Try emitting like below in your client
<script>
var socket = io('http://localhost:3000');
document.getElementById("validatebutton").onclick = function() {
socket.emit('validateCode', document.getElementById("code"));
};
</script>
Your click event was probably getting executed, but the emit was not due to it being wrapped in the connect function (which only gets executed when the socket connects to the server)
Also I would put the JavaScript in its own file, but for now, at least after the form (not inside it) will work.
How to i know my apps perfomance and page loding ratings in Insights.
i referred App on Facebook tutorial,
through that i used following methods in my code,
FB.Canvas.setDoneLoading , FB.Canvas.Prefetcher.addStaticResource and
FB.Canvas.Prefetcher.setCollectionMode.
My Code:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({ appId: '*****', cookie: true, xfbml: true, oauth: true });
FB.Canvas.Prefetcher.setCollectionMode(FB.Canvas.Prefetcher.COLLECT_AUTOMATIC);
FB.Canvas.Prefetcher.addStaticResource("http://example.com/fb/js/fb.js");
FB.Canvas.Prefetcher.addStaticResource("http://example.com/fb/css/fb.css");
FB.Canvas.Prefetcher.addStaticResource("http://example.com/fb/css/style.css");
FB.Canvas.setDoneLoading();
};
</script>
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
when i see in insight dashboard it showing like,
is there any wrong.. why its not showing... have i call that methods in correct place..?
thanks in advance..
Have you tried the Graph API Explorer to ensure that they're working in that respect?
http://developers.facebook.com/tools/explorer/?method=GET&path=2439131959%2Fstaticresources
Use the dropdown at the top right to select your application (you should be logged in as the owner of the app you want to test); your selection will replace the &path=nnn in the input field to the right of the GET request in the explorer.
Make sure that you're not getting an error response from Facebook. This is how I've checked my prefetch methods; I haven't used the insights dashboard yet.