When loading my bot using BotChat.js directline connection to Bot Framework inside of a SharePoint page, any builder.prompts.choice options that contain builder.liststyle.button will cause a page refresh if a user clicks that option.
HTML Button returned from BotChat.js DirectLine channel
<button class="ac-pushButton" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 0 1 auto;">Test Button</button>
This appears to be down to the HTML button being returned to the user not having a type="button" attribute (see here).
How could I go about loading this attribute in to buttons that are displayed in the Bot Chat?
Related
I am trying to use the Embed component in Fluent UI Northstar to embed a SharePoint Web Page:
<Embed
iframe={{
allowFullScreen: true,
src: "https://tenant.sharepoint.com/sites/SiteName/Lists/ListName",
frameBorder: 0,
height: '400px',
width: '711.11px',
}}
/>
The page doesn't get loaded, all I see in the page is a play icon:
What am I missing?
The component is used within the same SharePoint site, so the user is already authenticated.
I got it to work. I had to give the Embed component a width and height, and use the active prop to have the iframe load automatically without pressing "play".
I have created a Web App bot (Node.js) in Microsoft Azure and am able to deploy successfully. But I can't find any css file or scss file in the code provided or even in the online code editor.
Does anyone have any experience in this?
Thank you
What are you trying to style exactly?
Azure Bots work by connecting them to existing channels like Skype, Facebook Messenger, SMS, etc or making REST calls from a custom application. The bot itself doesn't have an interface to style.
The simplest way to embed chat frame into a static page that you can style is to add:
<iframe src="https://webchat.botframework.com/embed/YOUR_BOT_ID?t=YOUR_TOKEN_HERE"></iframe>
See this documentation for more information. However, do note that this method will expose your secret key in the source of your HTML and allow other developers to embed your bot on their pages as well.
I am using iframe to include the bot on my website. But I wanted to customize the colors and other such things.
As you are using iframe in your website, which means it will load the site https://webchat.botframework.com/ and the stylesheet file is also loaded in the botframework server site, but yours.
IF you need to customise the style, the easy way is to follow the guide https://github.com/Microsoft/BotFramework-WebChat#easy-in-your-non-react-website-run-web-chat-inline, customise your own stylesheet, and leverage botframework-webchat js lib to build bot application in your website.
If your website is built up by React, you can follow https://github.com/Microsoft/BotFramework-WebChat#medium-in-your-react-website-incorporate-the-web-chat-react-component to customise UI components of bot application.
Try this
<!DOCTYPE html>
<html>
<head>
<script
crossorigin="anonymous"
src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"
></script>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
}
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: 'YOUR_DIRECT_LINE_TOKEN'
}),
userID: 'YOUR_USER_ID',
username: 'Web Chat User',
locale: 'en-US',
botAvatarInitials: 'WC',
userAvatarInitials: 'WW'
},
document.getElementById('webchat')
);
</script>
</body>
</html>
I used Sendgrid api for email template and in one of email has some confirmation functionality and for that I used an anchor tag which is redirecting to backend server and then backend api did all stuff. It is working fine, but some of outlook clients are complaining that they are not redirecting to the correct address.
I got the link from the client (outlook) which is something below:
https://owa.nexus.ox.ac.uk/owa/redir.aspx?SURL=u16WQnU.......
but above link is wrong and in sendgrid the link should be something like below:
https://u3550765.ct.sendgrid.net/wf/click?upn=hj8lklPLwDMw.......
Can anyone help me and suggest me either it is sendgrid issue in Outlook or it is something related to Outlook setting ?
Below is the email template:
<div style="width: 500px;margin: auto;margin-top: 37px;">
<div class="rest-btn" style="display: inline-block;margin: 10px;width: 200px;color: #fff;height: 40px;border: none;border-radius: 5px;line-height: 2.9;text-align: center;border: 1px solid #ccc;padding: 0px;background-color: #4dbc39;">
ACCEPT
</div>
<div class="rest-btn" style="display: inline-block;margin: 10px;width: 200px;height: 40px;border: none;border-radius: 5px;color:#ffffff;line-height: 2.9;text-align: center;padding: 0px;border: 1px solid #ccc;padding: 0px;background-color: #4dbc39;">
DECLINE
</div>
</div>
I suspect the issue is you're using Outlook specific HTML (VML) to generate buttons. SendGrid doesn't wrap those links, which is why that isn't working.
It would be helpful if you could post a sample of the HTML you sent. Then we could confirm if that's the issue.
I would simply like have a link to a different page. But when I use:
<div style="position: absolute; top: 230px; width: 600px;
left: 250px; height: 120px">
<h2>
<a href='cgoogle.html'>
Sign in with your Google Account
</a>
</h2>
</div>
The link does nothing. I read that the solution is geturl, but I have no idea how to implement this. Does anyone have an example?
If what you want is open the link in the default browser (note that this may be not Chrome on the user's system), then add target="_blank" to your link:
<a href='cgoogle.html' target="_blank">
Sign in with your Google Account
</a>
However, it looks like what you're trying to do here is authenticate the user. The proper way to do that is to use the Chrome Identity API. You can read more on Chrome user authentication in general here (the API page also has this link).
If all that seems a little daunting, this app sample should get you off the ground.
Also note that "link does nothing" is not exactly true: it prints an error to the console, in addition mentioning the target="_blank" thingy. When you're developing Chrome apps, using the console is imperative (both the background page and foreground page ones) - it often provides very useful feedback on what's going on.
Hi I need to show a pop up in chrome extension. I have set my website as a chrome extension.
Here is the use case:
When the user installs the extension, and clicks on the extension icon, it should show a pop up asking his username.
When user enters his name and login, the pop up gets closed.
This name is stored in local storage.
When user clicks the extension icon next time, it checks whether his name is stored in localstorage If not then it should again show pop up otherwise it should navigate to my website.
Now what my problem is that
When I click twice on the icon only, only then pop up appears.
After I enter name and click login pop up gets closed which is fine
When I click again on icon, actually it should navigate to the website, but in my code it again shows pop up.
When I reload the extension, it works correctly.
Please help me.
Here is my background.js
chrome.browserAction.onClicked.addListener(function(tab) {
if(!localStorage.username){
chrome.browserAction.setPopup({
popup: "userinfo.html"
}); }
else{
//navigate to website
});
here is my userinfo.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="test.js">
</script>
</head>
<body>
<font face="sans-serif"><b>Enter your Email ID</b></font><br><br>
<form id="userinfo">
<table><tr><td>
<font face="sans-serif"><label for="user">Email</label></font></td><td>: </td>
<td><input type="text" id="user" /></td><span id="semail"></span>
</table><br><br>
<font face="sans-serif"><input type="submit" id="login" value="Log In"/></font>
</form>
</body>
</html>
here is my test.js
window.addEventListener('DOMContentLoaded', function() {
var user = document.querySelector('input#user');
var form = document.querySelector('form#userinfo');
form.addEventListener('submit', function(evt) {
evt.preventDefault();
var userStr = user.value;
chrome.runtime.getBackgroundPage(function(bgPage) {
bgPage.login(userStr/*,pwdStr*/); });
window.close();
});
});
anyone please please help me
Let's go one by one with your problems.
1.When I click twice on the icon only, only then pop up appears.
When you click on extension icon, your browserAction.onClicked handler gets executed and it just sets the popup. It does not open it. You have to click on extension icon again to open the popup. That is why you have to click twice.
2.After I enter name and click login pop up gets closed which is fine.
This is because you are redirecting to a new page which closes the extension popup.
3.When I click again on icon, actually it should navigate to the website, but in my code it again shows pop up.
Since you have setup popup for extension click, it has over-ridden the chrome.browserAction.onClick handler which is why you are not able to navigate to your website.
4.When I reload the extension, it works correctly.
This is because after reload, your chrome.browserAction.onClick is not over-ridden by popup and since login credentials are present in localstorage, your code does not over-ride it.
Solution1
In background script, check if the credentials are stored in localstorage then do not set the popup, else set the popup.
Add the handler chrome.browserAction.onClick to always navigate to your website. You know that if popup opens then your handler will not be executed.
When you store the credentials in localstorage and if they are correct, remove the popup.
To remove popup, you can try chrome.browserAction.setPopup({popup: ""});
From chrome.broswerAction API
onClicked
Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.
Solution2
Popup has the same permissions which background scrips have. So instead of defining chrome.browserAction.onClicked event, just write your code in popup script.
Check the localstorage, if credentials are present, create a new tab and open your page and close the popup with window.close()
Otherwise don't close the popup.
PS: I have not tried it. Just giving you an idea.