I am new to Azure bot - I have tried to create sample Q&A chat bot. I have embed Chatbot to Sharepoint. Can someone help me how to update the default "Chat" name.
Also, I would like to see in sharepoint how can I implement functionality, so I can expand and collapse the chat window.
For this to happen usually you have to override css and JS functionality. You can find the CSS and JS file here
https://cdn.botframework.com/botframework-webchat/latest/botchat.css
https://cdn.botframework.com/botframework-webchat/latest/webchat.js
You should create your own HTML file where you can host IFRAME and these two files. Sample index.html below
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Using Web Chat v3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--
If you want to continue to use the deprecated Web Chat v3, you can use our bundle "botchat.js" or "botchat-es5.js".
Please note that v3 does not have similar customizability and style options as in v4.
-->
<link rel="stylesheet" href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.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>
(async function() {
// In this demo, we are using Direct Line token from MockBot.
// Your client code must provide either a secret or a token to talk to your bot.
// Tokens are more secure. To learn about the differences between secrets and tokens
// and to understand the risks associated with using secrets, visit https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0
const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
const { token } = await res.json();
BotChat.App(
{
directLine: { token },
user: { id: 'userid' },
bot: { id: 'botid' },
resize: 'detect'
},
document.getElementById('webchat')
);
})().catch(err => console.error(err));
</script>
</body>
</html>
Reference : https://github.com/microsoft/BotFramework-WebChat/blob/master/samples/webchat-v3/
NOTE: You have to make necessary changes in JS and CSS by inspecting the browser chat window
Related
I'm trying to learn NodeJS and I am at the session part ( see if a user is logged in or not )
I wrote a code stating that IF HE IS logged in, it shows a page and IF HE IS NOT, it shows another one :
app.get('/home', function(request, response) {
// If the user is loggedin
if (request.session.loggedin) {
// show the home page of logged users
response.sendFile(path.join(__dirname+'/views/loggedin/index.html'));
} else {
// Not logged in
response.send('Please login to view this page! login');
}
//response.end();
});
It works properly except ONE LITTLE THING. It doesn't want to load the scripts.
It is the exact same code at the home page but it doesn't allow me to load it.
The console errors
HTML :
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body p-0 m-0>
<div id="header"></div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js" defer></script>
<div class="w-full text-gray-700 dark:text-gray-200 dark:bg-gray-900">
<div class="w-full grid place-items-center text-5xl h-screen">GACHA GAME IN NODEJS
</div>
<div class="container" align="center">
</div> <!-- container -->
</body>
</html>
<script>
$("#header").load("navbar");
</script>
The error that you provided says that was not able to load the scripts due the Content Security Policy, So i think you should set the content security policy with any external script:
app.get('/home', function(request, response) {
// If the user is loggedin
if (request.session.loggedin) {
response.sendFile(path.join(__dirname+'/views/loggedin/index.html'));
} else {
// setting the header here
res.set({"Content-Security-Policy": "script-src-elem self https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js https://code.jquery.com/jquery-3.6.0.min.js https://cdn.tailwindcss.com;"})
response.send('Please login to view this page! login');
}
});
or you can add a meta tag in your html file as well, see this question. But be aware with this approach because it can allow XSS attacks.
I was following this tutorial
(https://learn.microsoft.com/en-us/learn/modules/create-your-first-iot-central-app/)
In unit 4, I followed all the steps but what I could see was just a blank page like this
Unit 4 exercise result
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas-service.min.js"></script>
<script>
function GetMap() {
//Instantiate a map object
var map = new atlas.Map("myMap", {
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: 'mB~~~~~~(I wrote my maps primary key here)'
}
});
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#myMap {
width: 100%;
height: 100%;
}
</style>
</head>
<body onload="GetMap()">
<div id="myMap"></div>
</body>
</html>
Azure Maps Resource
This feedback page also doesn't work...
(https://feedback.azuremaps.com/)
Feedback Maps
Also, in this website, when I press "Open In New Tab", I cannot see anything...
(https://azuremapscodesamples.azurewebsites.net/)
Code samples Maps
I had spent almost 4 hours but couldn't find out the solution...
What should I need to do to see proper Maps on those pages?
If all the different sites that use Azure Maps doesn't work for you its likely one of the following reasons:
Make sure you are in a supported region. Azure Maps is not available to users who are located in China or South Korea, and the requests to the platform are actively blocked.
You are using an unsupported browser: https://learn.microsoft.com/en-us/azure/azure-maps/supported-browsers
WebGL is either disabled in your browser, or isn't working. Try this sample: https://azuremapscodesamples.azurewebsites.net/Map/Detect%20if%20browser%20is%20supported.html
Your graphic card has issues, try updating the drivers.
check how the map starts
$(document).ready(function () {
InitMap();
});
function InitMap() {
var map = new atlas.Map('myMap', {
center: [-73.98235, 40.76799],
zoom: 10,
language: 'en-US',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: 'key1*****'
}
});
}
$(document).ready(function () {
InitMap();
});
We have some SharePoint (SP 2013 and SP Online) applications developed in Angular which are uploaded to a document library and access SP data via SP's web services (REST). Is there a way
to utilize JSOM from such an application (i.e. not a 'SharePoint Addin' or SPFX)? I've been looking at SharePointPlus and it's pretty nice and I got it working from Angular pretty easily but there's so much existing material (discussions, examples, etc) on SP.js that it would be nice to use it directly if it was straight forward to do.
They are client side APIs, you could use either of them.
Sample demo(Or REST api demo from here):
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharepointplus/browser/sharepointplus.js"></script>
<script type="text/javascript">
var spApp = angular
.module("spApp", [])
.controller("viewItemsController", function ($scope) {
$SP().list('Contacts').get({
fields: "Title,sNumber,Name,Amount,ID"
})
.then(function (data) {
var jsonResult = [];
for (var i = data.length; i--;) {
jsonResult.push({ ID: data[i].getAttribute("ID"), Title: data[i].getAttribute("Title"), sNumber: data[i].getAttribute("sNumber"), Name: data[i].getAttribute("Name"), Amount: data[i].getAttribute("Amount") });
}
$scope.$apply(function () {
$scope.contacts = jsonResult;
});
});
})
</script>
<h3>View Contacts</h3>
<hr />
<div ng-app="spApp">
<div ng-controller="viewItemsController">
<div ng-repeat="contact in contacts">
{{contact.ID}}: {{contact.Title}}, {{contact.sNumber}}, {{contact.Name}}, {{contact.Amount}}
<br />
</div>
</div>
</div>
I've cloned the repository from https://github.com/microsoft/BotFramework-WebChat and was able to build the project after some changes with the below npm command
npm run build
However, this build has not generated the botchat.css and botchat.js files that the earlier versions of web chat used to generate. The reason for my custom build is that I need to be able to display HTML formatting on the web chat. Any steps on how to get the .css and .js files would be really helpful.
Suggestions from #tdurnford on WebChat repo worked out well. Giving the final html code below:
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%
}
body {
margin: 0;
}
#webchat {
height: 100%;
width: 100%;
}
</style>
<script src="https://unpkg.com/markdown-it#8.4.2/dist/markdown-it.min.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
<script>
</script>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
// const markdownIt = new MarkdownIt({ html: true, linkify: true, typographer: true });
const markdownIt = window.markdownit({ html: true, linkify: true, typographer: true });
window.WebChat.renderWebChat(
{
username: username,
userID: userid,
locale: 'en-US',
directLine: window.WebChat.createDirectLine({
secret: [YOUR_SECRET],
}),
renderMarkdown: markdownIt.render.bind(markdownIt),
styleOptions: {
bubbleMaxWidth: 1200,
botAvatarInitials: 'M',
userAvatarInitials: 'V',
}
// Passing 'styleOptions' when rendering Web Chat
},
document.getElementById('webchat')
);
</script>
</body>
</html>
Setting the markdown renderer with html:true is the the key here.
const markdownIt = window.markdownit({ html: true, linkify: true, typographer: true });
Web Chat no longer generates custom CSS files from the build. I would recommend looking at the Web Chat v3 to v4 Migration Sample and Web Chat's other customization samples - specifically the Custom Branding Styling sample.
I am a new to OAuth.
I just doing some work on that.
I have done following code. but the problem is that it opens the new window and then redirect in to the same window, it is not coming on the browser window from which (parent) it calls.
Also, can anyone tell me how can i get UserName and Email of Gmail account in to my application.
My sample code is........
<form id="form1" runat="server">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
google.load("identitytoolkit", "1.0", { packages: ["ac"] }); </script> <script type="text/javascript">
$(function () {
window.google.identitytoolkit.setConfig({
developerKey: "AIzaSyAj99p8A9p5ay9E89jRHKuYZRrN3fSWp90",
companyName: "tatvasoft",
callbackUrl: "http://localhost:51749/Logins/Result.aspx",
realm: "",
userStatusUrl: "http://localhost:51749/Logins/Login.aspx",
loginUrl: "http://localhost:51749/Logins/Login.aspx",
signupUrl: "http://localhost:51749/Logins/Result.aspx",
homeUrl: "http://localhost:51749/Logins/Default.aspx",
logoutUrl: "http://localhost:51749/Logins/Default.aspx",
language: "en",
idps: ["Gmail", "Hotmail"],
tryFederatedFirst: true,
useCachedUserStatus: false
});
$("#navbar").accountChooser();
});
this should get you started
http://havethunk.wordpress.com/2011/08/10/google-identity-toolkit-asp-net-mvc3/
The important part is what's on your page at:
http://localhost:51749/Logins/Result.aspx
You need to have some javascript to reload the parent page, or handle the log in action in the parent window. Something like the following will work:
<html>
<head>
<script type='text/javascript'>
function notify() {
window.opener.location.reload();
// or you could use a redirect:
// window.opener.location = "/"
window.close();
}
</script>
</head>
<body onload='notify();'>
</body>
</html>
If you are looking for a full guide for implementing Google Identity Toolkit in MVC3, I would follow the link Ali suggests: http://havethunk.wordpress.com/2011/08/10/google-identity-toolkit-asp-net-mvc3/
Alternatively, just follow the documentation on the GITKit website: http://code.google.com/apis/identitytoolkit/v1/getting_started.html