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>
Related
AADSTS50194: Application 'censured'(-app) is not configured as a multi-tenant application. Usage of the /common endpoint is not supported for such applications created after '10/15/2018'. Use a tenant-specific endpoint or configure the application to be multi-tenant.
How can I use single-tenant specific endpoint? I want to create a file picker that permit user to browse its file and organization files. I already read this question but, without editing OneDrive.js (library), I can't change
https://login.microsoftonline.com/common
to
https://login.microsoftonline.com/MY_TENANT_NAME
Hope you can help me, thanks.
because the onedrive.js library has the common endpoint hard coded, your easiest way is to change it to point to your tenant login endpoint.
if you don't want to do that, have the user login before using the picker, then save the access token and endpoint and provide it to the js
similar to whats being done here: https://github.com/OneDrive/onedrive-explorer-js/blob/master/index.html
as per https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/js-v72/open-file?view=odsp-graph-online#advanced-options the advanced options of the picker gives you options to specify the endpointhint and accesstoken.
hope that helps,
Update
I just tried it this way and it seems to work. but I didn't try to do it with a token. just an endpointHint, when I used an endpointHint, it didn't give me the error about the multi-tenant issue.
<html>
<head>
<script type="text/javascript" src="https://js.live.net/v7.2/OneDrive.js"></script>
<script type="text/javascript">
function launchOneDrivePicker(){
var odOptions = {
clientId: "myappid-guid-thing",
action: "query",
multiSelect: true,
advanced: {endpointHint: "https://azuretenant-my.sharepoint.com/",},
};
OneDrive.open(odOptions);
}
</script>
</head>
<body>
<button onClick="launchOneDrivePicker()">Open from OneDrive</button>
</body>
</html>
Please make sure you get the endpoint url right, eg, https://tenantname-my.sharepoint.com notice the "-my" after your tenant name, that's necessary.
I have followed this tutorial 'https://github.com/azure-ad-b2c/samples/tree/master/policies/embedded-password-reset'. Everything worked well. However when I try to add custom UI page to style whole change password wizard, 'continue' button disabled after email verified. Also I couldn't find a way to remove change email button in change password workflow.
Only change that I made was adding custom page to style change password pages.
<ContentDefinition Id="api.localaccountpasswordreset">
<LoadUri>https://xxx.blob.core.windows.net/yyy/selfasserted.html</LoadUri>
<Metadata>
<Item Key="DisplayName">Local account change password page</Item>
</Metadata>
</ContentDefinition>
Custom html page
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
// Remove the provided password reset link
$("#forgotPassword").remove();
// Move the new password reset button to the right position
$("#PasswordResetUsingEmailAddressExchange").detach().appendTo("label[for='password']");
// Set the style of the password reset button to look like a link
$("#PasswordResetUsingEmailAddressExchange").attr("style",
"background: none!important; color:#2872DD; border:none; padding:0!important; font-size: .75em; height: auto; width: auto; margin-left: 5px");
});
</script>
</head>
<body>
<div id="api"></div>
</body>
</html>
The Azure AD B2C guidelines for use of JavaScript indicate you must include a different version of jQuery; otherwise, this causes issues in the page UI.
Remove your jQuery script tag. Azure B2C uses a specific version of jQuery. Adding another version of jQuery can cause errors. You can still jQuery in your code, but you do not need to include the script tag for jQuery since it already loads via the azure API. To change the version of jQuery, you can update the DataUri in your policy. enter link description here
I have recently made a chat bot and am seeking to further edit the components of the interface by adding a minimizing button and an anchor so that the Chatbot is statically secured to the bottom right of the page (which is the most common area). This is made with the Azure QnA framework, so I'm not sure how much I can really edit..
Is there any way that I can access the code so that I can minimize the chat bot or add a button?
I will show a photo to make things more clear: minimizing image
The webchat interface that you are using is coming from Microsoft GitHub's project named BotFramework-WebChat available here.
If you look at the documentation provided on GitHub's main page, you will see that you have several ways of implementing your webchat on your website, from the easiest iframe inclusion to more detailed solutions.
If you want to customize your interface, I would suggest an implementation like the following in your hosting page 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>
Here you are declaring the chat and using js and css files from the CDN.
All the code for the webchat component is in the js, so you should get it, make your customization and host it on your side to have what you want.
From the CDN it is minified, but you can rebuild the file using the process described here: https://github.com/Microsoft/BotFramework-WebChat#building-web-chat
For example an interface that we made from those sources:
For this example, we have customized the header in js to :
add 1 button to maximize
add 1 button to close
Then the image of the buttons is made with CSS
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.
How can i setup kendo ui with mvc4. I want use its themas and grid and all controls in my web application.
I have use http://demos.kendoui.com/themebuilder/web.html but how do i apply generated themas in my website. I am little bit confused with kendo, I am new with it. Please suggest me how can I configure kendo on mvc4 and use its all functionality.
Using : - MVC 4 , html 5 and c#
Thanks!!
How can i setup kendo ui with mvc4
In exactly the same way you would set it up with PHP. Or with a Java Servlet. KendoUI is a client side framework which is server side agnostic. It doesn't matter which server side technology you are using.
I want use its themas and grid and all controls in my web application.
Great, go ahead. Head over to the documentation, read it, roll up your sleeves and integrate into your application.
Create a new ASP.NET MVC 4 application using the Empty template
Add a HomeController to serve up a view:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
And of course a corresponding ~/Views/Home/Index.cshtml view:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="//cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css" />
</head>
<body>
<input id="dropDownList" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script type="text/javascript">
$("#dropDownList").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Item1", value: "1" },
{ text: "Item2", value: "2" }
]
});
</script>
</body>
</html>
As you can see there's absolutely nothing MVC specific here. You could have served this markup from any server side framework. All you need is pick a theme, reference it from the Kendo CDN, reference the Kendo scripts at the end of your DOM from the CDN and start playing with it.
But the most important thing if you want to have some progress is to RTFM where the guys from Telerik (and colleagues of mine) have spent a lot of time to documenting everything you need to know.
There is a tutorial on the Kendo Docs site that will walk you through it step by step.
Hello Kendo UI - Add Kendo UI
and
Kendo Music Store - Project Setup