I want to implement BotFramework in a WordPress but in any way or form, it's not working properly.
I used different scripts but got to the same wrong result.
one:
<script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='height: 38px; position: fixed;
bottom: 0; z-index: 1000; background-color: red'>
<div id='botTitleBar' style='height: 38px; width: 400px;
position:fixed; cursor: pointer;'></div>
[advanced_iframe src="https://webchat.botframework.com/embed/..."
width="100%" height="600"]</div>";
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#botTitleBar')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = botDiv.style.height == '600px' ? '38px' : '600px';
};
});
}());
</script>
it's giving me the banner but not opening the chat when pressed.
in other case the script:
<!DOCTYPE html>
<html>
<body>
<div id="webchat" role="main"></div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token: 'key' }),
userID: 'YOUR_USER_ID',
username: 'Web Chat User',
locale: 'en-US',
botAvatarInitials: 'WC',
userAvatarInitials: 'WW'
}, document.getElementById('webchat'));
</script>
</body>
</html>
but in this case, it's doing nothing.
help, please :(
I don't know how your environment is structured, so hopefully, this translates but I was able to accomplish this. I'm running this locally having spun up a WP site on a WAMP server.
First, I generate a token by making an API call to
https://directline.botframework.com/v3/directline/tokens/generate.
If you're already generating a token, then skip to the next section. If not, you can reference this code, found here (if of interest).
On WP, I am using a plugin called 'WP Coder' This allows you to enter in the necessary components while letting the plugin 'make it work' in the page. I tried hand-coding it in, but the WP page wasn't playing nice and this plugin was.
Once the plugin is installed, put this in the 'HTML code' section:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WebChat</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="webchat" role="main"></div>
</body>
</html>
Followed by this in the 'CSS code' section:
html,
body {
height: 100%
}
body {
margin: 0
}
#webchat,
#webchat>* {
height: 500px;
width: 100%;
}
Btw, if you set the height to 100% for '#webchat' the chat will continuously scroll down the page, as entries are made, forcing the user to have to 'scroll after it'. Outside of that, adjust it as you will.
Under 'JS Code', add the following. Please note, that I'm generating a token locally. You will need to update this to match your method of token generation:
( async function () {
const res = await fetch( 'http://localhost:3979/directline/token', { method: 'POST' } );
const { token } = await res.json();
window.WebChat.renderWebChat( {
directLine: window.WebChat.createDirectLine( { token } )
}, document.getElementById( 'webchat' ) );
} )();
Next, under 'Include files' enter the two following JS files as URLs (individually):
https://unpkg.com/markdown-it/dist/markdown-it.min.js
https://cdn.botframework.com/botframework-webchat/master/webchat.js
Lastly, take the Publish 'shortcode' (mine looks like this [WP-Coder id="1"]) and place it on your page. This is found in the WP Coder plugin.
At this point, it should work for you. If not, I would look closely at how you are generating and passing the token.
Hope of help!
Related
I have tried to do a basic example with QWebEngineView and Openlayers but it does not work.
My steps:
I created the basic example in HTML from Openlayers
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.5.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.5.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
This works on Chrome.
I created a new Project in QT with webenginewidgets in pro file. In MainWindow, I put the following code:
QWebEngineView *view = new QWebEngineView(parent);
view->page()->settings()->setAttribute(QWebEngineSettings::LocalContentCanAccessRemoteUrls, true);
view->page()->settings()->setAttribute(QWebEngineSettings::AutoLoadImages, true);
view->page()->settings()->setAttribute(QWebEngineSettings::AllowGeolocationOnInsecureOrigins, true);
view->page()->settings()->setAttribute(QWebEngineSettings::AllowRunningInsecureContent, true);
view->page()->settings()->setAttribute(QWebEngineSettings::AllowWindowActivationFromJavaScript, true);
view->load(QUrl::fromLocalFile("C:/TEST/test_webeng/openlayers.html"));
view->show();
I tried to put all these attributes because without them I get messages of this type:
Access to image at 'https://a.tile.openstreetmap.org/4/10/8.png' from origin 'file: //' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ", Source: file: /// C: /TEST/test_webeng/openlayers.html
With or without attributes, the map images are not displayed.
Any solution?
The problem is similar to the one in this post but with openlayers instead of openstreetmap, so the solution is to create a QWebEngineUrlRequestInterceptor that injects the Accept-Language header.
class Interceptor: public QWebEngineUrlRequestInterceptor{
public:
using QWebEngineUrlRequestInterceptor::QWebEngineUrlRequestInterceptor;
void interceptRequest(QWebEngineUrlRequestInfo & info){
info.setHttpHeader("Accept-Language", "en-US,en;q=0.9,es;q=0.8,de;q=0.7");
}
};
Interceptor *interceptor = new Interceptor(view);
view->page()->profile()->setUrlRequestInterceptor(interceptor);
view->load(QUrl::fromLocalFile("C:/TEST/test_webeng/openlayers.html"));
I have a component that uses teleport to , the test html doesn't seem to be working as expected. I can't find any documentation on this particular use. Here's my test:
describe('MetaHead', () => {
it('dynamic metadata tags contain custom text', () => {
let title = 'My Page';
let description = 'Some description about my page';
// This component uses Vue3's teleport to tag <head>
// we must modify wrapper to contain such tag
document.body.innerHTML = `
<head>
<div id="app"></div>
</head>
`
const wrapper = mount(MetaHead, {
attachTo: document.getElementById('app'),
props: {
title,
description
},
global:{
mocks: {
$route:{fullPath: 'full/path'}
}
}
})
expect(wrapper.html()).toContain(title)
expect(wrapper.html()).toContain(description)
})
})
and the minimal component looks like this:
<template>
<teleport to="head">
<title>{{title}}</title>
<meta property="og:site_name" :content="title">
<meta name="description" :content="description">
</teleport>
</template>
Am I missing something?
the problem here is wrapper.html() only returns HTML in your component - since you are teleporting outside your component, that markup won't show up when you call wrapper.html().
You have a few options. One would be making an assertion against document.body.outerHTML. Another would be using a neat trick with findComponent, I wrote about it here and posted a video about it here.
Another thing you could try that I just thought of (but have not tested) would be:
mount({
template: `
<div id="app" />
<MetaHead />
`,
components: { MetaHead }
})
I don't know if that will work, but worth a try.
I have been extensively searching in here but every solution I tried kept failing, so here's my problem:
I have developed locally a basic Express server to display a static page until I finished my full integration.
My site structure is :
/node_modules
/public/
css/
styles.css
images/
Logo-large.jpg
/views/
partials/
footer.ejs
header.ejs
contact.ejs
home.ejs
signup.ejs
.env
index.js
package-lock.json
package.json
Here's the result:
Locally on my Mac
When deployed onto my Ubuntu sever and node started, here's the result remotely:
Remotely on the server
index.js
//jshint esversion:6
require('dotenv').config();
const http = require("http");
const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const _ = require("lodash");
const mongoose = require("mongoose");
const app = express();
app.use(express.static(__dirname + '/public'));
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));
mongoose.connect("mongodb://localhost:27017/contactDB", {useNewUrlParser: true});
// <===== DECLARING DATABASE SCHEMA =====>
const contactSchema = new mongoose.Schema ({
name: String,
company: String,
phone: String,
email: String
});
// <===== DECLARING DATABASE MODEL =====>
const Contact = new mongoose.model("Contact", contactSchema);
// <===== ROUTES =====>
app.get("/", function(req, res) {
res.render("home");
});
app.get("/contact", function(req, res) {
res.render("contact");
});
app.get("/signup", function(req, res) {
res.render("signup");
});
let port = process.env.PORT;
if (port == null || port == "") {
port = 3000;
}
app.listen(port, function() {
console.log("Server started on port " + port);
});
styles.css
body {
font-family: 'Montserrat', sans-serif;
}
h1 {
margin: 50px auto 50px;
text-align: center;
color: grey;
}
h3 {
margin: 50px auto 50px;
color: grey;
text-align: center;
}
#main-logo {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
width: 20%;
display: block;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
header.ejs
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Lub + Glass Consulting by Thierry Di Lenarda</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="/css/styles.css" type="text/css">
</head>
<body>
home.ejs
<%- include('partials/header') %>
<h1>Welcome to Lub + Glass Consulting!<br>We are under construction...</h1>
<img id="main-logo" src="/images/Logo-large.jpg" alt="Logo TLGC">
<h3>Come back soon to learn more about the services I can provide.<br><br><em>Thierry Di Lenarda</em></h3>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<%- include('partials/footer') %>
footer.ejs
</body>
<footer>
</footer>
</html>
contact.ejs and signup.ejs are empty. I want this "home.ejs" page to render properly before getting started with everything else.
Can someone see if/where I did wrong? Every answer that I found in stackoverflow failed until now. Impossible to access or display anything from the 'public' folder.
Thanks for the help!
[EDIT]
I have "GET 502 (Proxy Error)" for the image,
and "GET net::ERR_ABORTED 502 (Proxy Error)" for the css file.
Solved by adding a "/" at the end of the ProxyPass in the Vhost thanks to here
ProxyPass http://127.0.0.1:3000/
ProxyPassReverse http://127.0.0.1:3000/
[/EDIT]
1 This issue is related to your links, check the links.
2 Your server is not responding for these links there is some error in accessing to these links due to which your files are not usable. kindly check them.
I'm trying to get firebase auth working with electron. I already have it working with iOS and Android and would like to use the same for the desktop version of the app.
What I'm mainly trying with is the google sign in. Using firebase's web version ends up with a failure where localhost isn't accepted for signing in. I have tried the node.js version of the code but I can't get that working either.
Google this: https://www.google.com/search?q=firebase+auth+electron
And you'll see all I have tried and all stackoverflow questions I have looked through. Some people say they have it working but I have found no working examples. Is this a lost cause or could someone point me in the right direction?
A lot of people seems to have the same issue but no answers.
you will have to set nativeWindowOpen to true inside webPreferences in your main windows. Like so:
mainWindow = new BrowserWindow(
{
width: 1280,
height: 720,
webPreferences: {
nodeIntegration: false,
preload: path.join(__dirname, 'preload.js'),
nativeWindowOpen: true
}
}
);
One way to make this work is to run a local server which serves the page you want to display. Then in your electron window load that local server url.
Because the Firebase libraries will complain if loaded directly in an electron window, but you can get around it using a local server like this:
import {
app,
BrowserWindow
} from 'electron'
import ex from 'express'
import path from 'path'
const express = ex()
let win
const port = 12345
const appPath = app.getAppPath()
express.use(require('express').static(path.join(appPath, '/')))
express.get('/', (_, res) => res.sendFile(path.join(appPath, '/index.html')))
express.listen(port, () => console.log('Running on ' + port))
function getWindow () {
if (win === undefined) {
// Create the browser window.
win = new BrowserWindow({
frame: false,
transparent: true,
alwaysOnTop: true,
width: 1280,
height: 768,
center: true
})
win.loadURL('http://localhost:' + port)
}
return win
}
app.on('ready', () => {
getWindow().show()
})
The above code would be your index.js which you'd run when you run electron. Then in index.html which is served over the local webserver you load the firebase web libraries.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Example</title>
</head>
<body>
<script src="/__/firebase/6.3.0/firebase-app.js"></script>
<script src="/__/firebase/6.3.0/firebase-auth.js"></script>
</body>
</html>
what you could look into is something that achieves what you need but not exactly what you want. Whilst the google sign in module is iffy to say the least with electron, I've found success using the createUserWithEmailAndPassword function with Firebase auth, check that out
I was facing the same problem when connecting firebase and electron.js with React.js but there's a simple way that allows you to use firebase popup authentication. Inside the main process when creating a new browserWindow. Under webPreferences object add or set the property nativeWindowOpen to true. Make sure that your webPreferences object has the property nativeWindowOpen set to true.
Example
window = new electron.BrowserWindow({
width: 1200,
height: 650,
webPreferences:{
nodeIntegration: true,
enableRemoteModule: true,
nativeWindowOpen: true, // this allows you to use popups when doing authentication using firebase in an electron app
}
})
Good luck ✔✔✨✨
I am getting the error: "Uncaught referenceError: App is not defined" in my JS console when loading this Enyo app on my localhost. I am brand new to Enyo so I am still trying to learn the concepts of kinds and components.
app.js (in source folder):
enyo.kind({
name: "App",
kind: "FittableRows",
classes: "enyo-fit enyo-unselectable",
components: [
{
kind: "onyx.Toolbar",
layoutKind:"FittableColumnsLayout",
components: [
{
kind:onyx.Button,
style:"width:80px;background:green;",
ontap:"handleBtnBack",
content:"Back"
},
{
content:"Header",
style:"text-align:center;",
fit:true
},
{
kind:onyx.Button,
style:"width:80px;background:red;",
ontap:"handleBtnNext",
content:"Next"
}
]
},
{
kind: "Scroller",
horizontal:"hidden",
touch:true,
fit:true,
thumb:true,
components:[
{
tag:"h1",
//This is how we insert css class.
classes:"padding15px",
content:"This is content area...Hello World!!!"
}
]
},
{
kind: "onyx.Toolbar",
// The footer
layoutKind:"FittableColumnsLayout",
components:[
{
kind:"onyx.Button",
content:"Go Next Page",
ontap:"handleBtnNextPage",
fit:true
}
]
}
],
create: function(){
this.inherited(arguments);
console.log("App is created in memory");
},
rendered : function(){
this.inherited(arguments);
console.log("App is created in rendered into DOM");
},
handleBtnNextPage : function(inSender,inEvent){
new Page2().renderInto(document.body);
},
handleBtnNext: function(inSender,inEvent){
new Page2().renderInto(document.body);
},
handleBtnBack: function(inSender,inEvent){
//For each enyo event handler comes with inSender, the control that sends the event and the inEvent the actual event itself.
alert("Back Button");
}
});
package.js (in source folder):
enyo.depends(
// Layout library
"$lib/layout",
// Onyx UI library
"$lib/onyx", // To theme Onyx using Theme.less, change this line to $lib/onyx/source,
//"Theme.less", // uncomment this line, and follow the steps described in Theme.less
// CSS/LESS style files
"../assets/css/app.css",
// Include our default entry point
"App.js",
"Page2.js"
);
index.html (in root folder):
<!--My Copy-->
<!DOCTYPE html>
<html>
<head>
<title>IsGoodStuff.com Tutorial #2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="assets/favicon.ico"/>
<script src="enyo/enyo.js" type="text/javascript"></script>
<!-- -->
<script src="package.js" type="text/javascript"> </script>
</head>
<body>
<script type="text/javascript">
new App().renderInto(document.body);
</script>
</body>
</html>
If your index.html is in your root folder, but the main package.js is in the source folder, it's probably your script tag that loads package.js. Try:
<script src="source/package.js" type="text/javascript"> </script>
You haven't supplied Page2 but it appears the code would work as-is.
Here's a fiddle showing the working page: http://jsfiddle.net/kgxvg7Lw/1/
Some thoughts:
1) Are you using a case-sensitive file system? You show app.js but your package.js has App.js (capitalized).
2) Are you certain there are no parse errors in the console?
Now, that said... You probably don't want to reload a new app for every 'page' switch. Usually, you would use something like Panels to allow the app to control the content that appears on the screen and just navigate among the panels as needed.