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
Related
my website loading time is too much for zendesk chat, when i remove zendesk chat the website loading time under 2 seconds
here is my zendesk code
<script>
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s= d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set._.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");$.src="//v2.zopim.com/?14mOH4BM2323DFADFSAS";z.t=+new Date;$.type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
To combat this, a common practice is putting your scripts at the bottom of your body, so that the visual aspects of the website load first before the scripts.
For example:
<html>
<body>
<h1>My Website Contents</h1>
<script>console.log('My scripts go down here');</script>
</body>
</html>
I was following the section "How do I use a web component?" from
What are web components?
end very soon I realized that node and npm it's a must. On top of that you have to run node to serve it.
Code
<html>
<head>
<script type="module" src="node_modules/#polymer/paper-button/paper-button.js"></script>
</head>
<body>
<paper-button raised class="indigo">raised</paper-button>
</body>
</html>
What is the simplest - no node - way to run this simple web component?
Disregard everything "Polymer",
better yet... burn it down, throw your coffee over every monitor you see that title.
It was based on the V0 implementation of Web Components;
which basically was Google's lets-throw-something-at-the-wall-and-see-if-other-vendors-adopt-it attempt at forcing Web Components on us.
That whole V0 era is what gave "Web Components" a bad reputation, and catchy blog titles like
"The Broken Promise of Web Components"
(but everyone involved learned what not to do)
Since years, all Browsers vendors work together on V1
Web Components run in all modern Browsers.. period.. so all you need is a Browser..
no built steps.. no bundlers.. no parcel.. no Svelte-compiler... no Rome... no fuss
Use any online editor like JSFiddle or CodePen, or your own IDE, or use your F12 Sources panel
and with a few lines of code you are started
<my-component name="Alex"></my-component>
<script>
customElements.define("my-component", class extends HTMLElement {
connectedCallback() {
this.innerHTML = `<h2>${this.getAttribute("name")} his very first Custom Element!</h2>`;
}
});
</script>
The 3 distinct (each can be used without the other) technologies making up "Web Components" help you built more complex Components
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Soon you will read about Lit and Hybrids and Stencil and uCe, and all types of tools that make developing Web Components "easier"...
They are just that... tools; You pick one or two once you fully understand the technology
The simplest way would probably be to just include the script via a CDN like UNPKG https://unpkg.com/.
<html>
<head>
<script
type="module"
src="https://unpkg.com/#polymer/paper-button#3.0.1/paper-button.js?module"></script>
</head>
<body>
<paper-button raised class="indigo">raised</paper-button>
</body>
</html>
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 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>
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