Widget fails to inject when no script tags present
andreaslarssen opened this issue · 15 comments
The widget should use some other tag to inject itself (head?).
Ping @AlisonVilela. Is this repo maintained?
Yes, I did not understand your question
@AlisonVilela. The widget is injected using this code (shortened):
window.zEmbed || function(e, t) {
var n, o, d, i, s, a = [],
r = document.createElement("iframe");
window.zEmbed = function() {
a.push(arguments)
}, window.zE = window.zE || window.zEmbed,
r.src = "javascript:false",
r.title = "",
r.style.cssText = "display: none",
d = document.getElementsByTagName("script"),
d = d[d.length - 1],
d.parentNode.insertBefore(r, d),
As you can see, it finds script tags in document, and inserts the widget before that last script tag.
Now, if you do not have a script tag in your app (which is my case on some pages), the widget fails to inject itself.
The PR I created (that I f*ckd up while waiting for you to respond to it) injects the widget using the head tag instead (which is always present).
window.zEmbed || function(e, t) {
var n, o, d, i, s, a = [],
r = document.createElement("iframe");
window.zEmbed = function() {
a.push(arguments)
}, window.zE = window.zE || window.zEmbed,
r.src = "javascript:false",
r.title = "",
r.style.cssText = "display: none",
d = document.getElementsByTagName("head"),
d = d[d.length - 1],
d.appendChild(r),
Makes sense?
Now I understand, I will put this parameter in the configuration
@AlisonVilela : Kool. When do you think it will be available?
Now, I deployed version 2.1.0
This change broke it for me.
I reverted to 2.0.0 which works for me
I am getting this error:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'ngxZendeskWebwidgetConfig' of undefined
TypeError: Cannot read property 'ngxZendeskWebwidgetConfig' of undefined
at ngx-zendesk-webwidget.js:78
at NgxZendeskWebwidgetService.push../node_modules/ngx-zendesk-webwidget/ngx-zendesk-webwidget.js.NgxZendeskWebwidgetService.initZendesk (ngx-zendesk-webwidget.js:93)
at new NgxZendeskWebwidgetService (ngx-zendesk-webwidget.js:38)
at _createClass (core.js:20279)
at _createProviderInstance (core.js:20251)
at resolveNgModuleDep (core.js:20215)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20905)
at resolveDep (core.js:21276)
at createClass (core.js:21152)
at createDirectiveInstance (core.js:21027)
at resolvePromise (zone.js:852)
at resolvePromise (zone.js:809)
at zone.js:913
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:26247)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
Weird, I'll try to reproduce
Hello @AlisonVilela
I experienced a similar issue, I created a brand new Angular project and followed the configuration but I always get this output:
ERROR TypeError: this._NgxZendeskWebwidgetService.zE is not a function
at new AppComponent (app.component.ts:13)
at createClass (core.js:31987)
at createDirectiveInstance (core.js:31807)
at createViewNodes (core.js:44210)
at createRootView (core.js:44082)
at callWithDebugContext (core.js:45632)
at Object.debugCreateRootView [as createRootView] (core.js:44848)
at ComponentFactory_.create (core.js:30788)
at ComponentFactoryBoundToModule.create (core.js:25731)
at ApplicationRef.bootstrap (core.js:41008)
My question would be:
- Even if it's not mentioned, I do have to add this script just before the
</body>tag right?
<!-- Start of xxx Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=XXXXX"> </script>
<!-- End of xxxx Zendesk Widget script -->
- By Using the LazyLoad configuration:
constructor(private _NgxZendeskWebwidgetService: NgxZendeskWebwidgetService) {
this._NgxZendeskWebwidgetService_.initZendesk();
}
It always returned me this error:
TS2554: Expected 1 arguments, but got 0.
Am I missing something?
I found what was causing my problem
line 41 in ngx-zendesk-webwidget.service.ts
d = document.getElementsByTagName(this.ngxZendeskWebwidgetConfig.injectionTag ? this.ngxZendeskWebwidgetConfig.injectionTag : "head"),
change this line to this:
d = document.getElementsByTagName(config.injectionTag || "head"),
I created a pull request
function had no access to varable this.ngxZendeskWebwidgetConfig
Thank you!
Is this fix available?
I am still facing this issue with the version 2.1.1
ERROR TypeError: this.NgxZendeskWebwidgetService.zE is not a function
at new AppComponent (app.component.ts:13)
at createClass (core.js:31987)
at createDirectiveInstance (core.js:31807)
at createViewNodes (core.js:44210)
at createRootView (core.js:44082)
at callWithDebugContext (core.js:45632)
at Object.debugCreateRootView [as createRootView] (core.js:44848)
at ComponentFactory.create (core.js:30788)
at ComponentFactoryBoundToModule.create (core.js:25731)
at ApplicationRef.bootstrap (core.js:41008)
I'm also having the ERROR TypeError: this._NgxZendeskWebwidgetService.zE is not a function issue with version 2.1.1, is there any fix?
I too am also having the ERROR TypeError: this._NgxZendeskWebwidgetService.zE is not a function issue with version 2.1.1... following the readme documentation upgrading from a pre-v2.0 implementation... Is there a working example somewhere? The "runKit" button brought up a nearly empty implementation, that with modifications, I was able to use to do some object exploration, which did not indicate a "zE" function's presence ..
Any insights would be much appreciated