smooch web messenger embedded mode no longer working? - smooch

I've updated the code for embedded mode according to the smooch documentation
https://docs.smooch.io/guide/web-messenger/#styling-the-conversation-interface
On this page
https://www.vetchat.com.au/smooch/
But it is no longer working, just displays as default.
Has this error in console
Uncaught TypeError: Cannot read property 'appendChild' of null
at Object.render (web-messenger.js:88)
at e.__onWebMessengerHostReady__ ((index):141)
at Object.<anonymous> (index.js:4)
at Object.<anonymous> (smooch.4.0.4.min.js:178)
at e (bootstrap b9ab67f504327dcb9c27:19)
at bootstrap b9ab67f504327dcb9c27:62
at bootstrap b9ab67f504327dcb9c27:62
I'm not much of a dev, was hoping someone advise if i am doing something wrong?

Looking at the source code of your page, it looks like the init part has some errors in it.
Currently, it's :
Smooch.init({appId: '<app-id>'});
embedded: true
Smooch.render(document.getElementById('chat-container'));
when it should be
Smooch.init({
appId: '<app-id>',
embedded: true
});
Smooch.render(document.getElementById('chat-container'));
I hope this helps.

Related

Got css problem when implementing angular calendar

I'm referred to this thread : all is done.
But I got this bellow the table. It seems that the tag ng-template is not working correctly.
The problem was a css issue. I got as warning:
the stylesheet could not be loaded.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/less/normalize.less
Also after clicking on the start date input text: I am getting this error:
ERROR DOMException: CSSStyleSheet.cssRules getter: Not allowed to
access cross-origin stylesheet
I can't figure it out. I don't now what I missed.
Could you please help me solving that issue?.
Thanks in advance.
it seems that you have to add the import #import '../node_modules/flatpickr/dist/flatpickr.min.css'; to your css file.
HTH.

Why I am not getting a new CSS file from gulp-uncss?

I am simply trying to further compress a css file. And I am getting an error which is peculiar. I wondered why I would get a ReferenceError: Can't find variable: jQuery for just a task which solely encompasses selectors from HTML & CSS? Unless it's reading the script tags in my HTML which have selectors?
UPDATE I forgot to mention the task is not spitting out, a new CSS file!
Also I noticed many gulp tasks have ./ preceding the directory, What is the purpose of that?
Anyway, see below:
This is my Gulp file, figured I include it...
gulp.task('uncss', function() {
return gulp.src('site/assets/stylesheets/style.min.81113a5b.css')
.pipe(uncss({
html: [
'site/**/*.html'
]
}))
.pipe(gulp.dest('./out'));
});
This is the error I am getting.
ReferenceError: Can't find variable: jQuery
file:///Users/antonioortiz/Sites/antonioortiz.github.io/site/cookie_control/cookie_example/index.html:12
file:///Users/antonioortiz/Sites/antonioortiz.github.io/site/cookie_control/cookie_example/index.html:43
/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:43
fn = function () { throw arg; };
^
Error: uncss/node_modules/css: unable to parse undefined:
missing '}' near line 1:46497
1: -> ebkit-min-device-pixel-ratio:0){#media{.
at error (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:57:15)
at declarations (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:224:26)
at rule (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:481:21)
at rules (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:103:56)
at atmedia (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:345:35)
at atrule (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:457:10)
at rules (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:103:44)
at stylesheet (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:73:16)
at Object.module.exports [as parse] (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:485:10)
at process (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/src/uncss.js:158:22)
at tryCatcher (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/util.js:26:23)
at Promise._settlePromiseFromHandler (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:501:31)
at Promise._settlePromiseAt (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:577:18)
at Promise._settlePromises (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:693:14)
at Async._drainQueue (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:123:16)
at Async._drainQueues (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:133:10)
Taken from the UnCSS documentation:
How?
The process by which UnCSS removes the unused rules is as follows:
The HTML files are loaded by PhantomJS and JavaScript is executed.
...
This means that your page will be loaded in a headless browser, so that library is able to find which selectors are really used.
I never used UnCSS, but what it seems to me is that:
it will throw JS errors in case they happen;
it will complain in case your CSS is not error-free.
That's why you're getting those errors.
Sounds similar to Issue 157. The solution - try using paths like /site/**/*.html instead of site/**/*.html.
Next thing to try is setting a higher value for the timeout option to give jQuery more time to load.

How to see what's <omitted> in Chrome debug console

I am using Knockout.js, and the most important part of the error message is (nowadays) often hidden under the <omitted> part. I tried hovering over, and clicking a lot of stuff, but I can't find a way to see the full message. Does anyone have a tip?
Thanks in advance!
PS: I'm looking for a fix within the Chrome settings. So without cluttering my code with extra window.onerror stuff or otherwise. I don't want to clutter my code just because the Chrome development team thought it was a good idea to omit debug text :S
For a code hack, see this answer: https://stackoverflow.com/a/22218280/647845
Here's a little bit of code that will output the whole error message:
window.onerror = function (errorMsg, url, lineNumber, columnNumber, errorObject) {
if (errorObject && /<omitted>/.test(errorMsg)) {
console.error('Full exception message: ' + errorObject.message);
}
}
You can execute this in the development console in Chrome, so it doesn't have to be in the actual code of your web page.
Use Firefox. And vote up for this issue in the meantime:
https://code.google.com/p/chromium/issues/detail?id=331971

Html from Silverlight (not out of browser)

I am trying to open HTML file from the local URI which I use as XML Editor, to edit xml data that come from Silverlight application, then close browser window and return back edited xml data to the Silverlight application.
I tried to use HtmlPage.Window.Navigate but I don't quit like it.
I have tried using a method from: http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx
but instanly got an exception "failed to invoke ShowJobPlanIFrame"
Is there any way to handle this task?
"Out of browser" mode doesn't fit.
Thanks.
===========================================================================
Update:
It worked out using IFrame overlay.
Button click invokes the following code in C#:
var scriptObject = (ScriptObject)HtmlPage.Window.GetProperty("ShowJobPlanIFrame");
scriptObject.InvokeSelf(url);
Where "ShowJobPlanIFrame" is as defined at:
http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx
This allowed me to pass data into XML editor and then get it back.
An error with JavaScript function invocation I told above, was my fault in JavaScript code itself.
A very similar scenario: https://stackoverflow.com/a/7919065/384316
Try using an iframe overlay, then you can load any HTML-like content.
There is an excellent explanation of how to do this here:
http://www.wintellect.com/cs/blogs/jlikness/archive/2010/09/19/hosting-html-in-silverlight-not-out-of-browser.aspx
It worked out using IFrame overlay.
Button click invokes the following code in C#:
var scriptObject = (ScriptObject)HtmlPage.Window.GetProperty("ShowJobPlanIFrame");
scriptObject.InvokeSelf(url);
Where "ShowJobPlanIFrame" is as defined at:
http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx
This allowed me to pass data into XML editor and then get it back.
An error with JavaScript function invocation I told above, was my fault in JavaScript code itself.
Did you try NavigationFramework of Silverlight? It's capability may support your needs in a more simple way than using multiple browser pages.

FB.Canvas.setSize stopped working (today?)

This method seems to have stopped working.
App code was tested thoroughly last week and all was well. This morning...scrollbars are appearing on our page tab apps.
Example:
http://www.facebook.com/HondaPowersports/app_329359370439338
Very simple code on this page - it is all static HTML with just one FB method call:
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 810, height: 975 });
}
Anyone else with this same problem? Any ideas?
According to the documentation (FB.Canvas.setSize):
Note: this method is only enabled when Canvas Height is set to "Settable (Default: 800px)" in the Developer App.
Has someone modified the settings of your Facebook app? If it's not configured as stated above then it stops working.
it seems to me it is deprecated and you have to use setAutoGrow... not sure , take a look :)
Related bug: http://developers.facebook.com/bugs/322561887802154