How to inject script tag into header?

Question

Background
I am using ZenDesk's Web Widget (Classic) to show restricted content on the page. As per documentation

You can specify settings for the widget by defining a window.zESettings object. Make sure you add any settings before the Web Widget (Classic) snippet.

That means window.zESettings must be set BEFORE script is loaded. The Web Widget (Classic) snippet is loaded using script URL looks like https://static.zdassets.com/ekr/snippet.js?key=xyz

For restricted content to show inside the widget, I will have to set jwt token to window.zESettings and that needs to happen before script is loaded. The jwt token is generated on server.

Zendesk expect that window.zESettings needs to be set and the script needs to be loaded on each page. Which is kind of ridiculous because 90+% of the time user would not use Zendesk help on the page.

Issue
I would like do it on demand when user clicks on a button.

$("#myHelpWidget").click(function () {            
        window.zESettings = {
            webWidget: {
                authenticate: {
                    jwtFn: function (callback) {
                        // Fetch your jwt token and then call our supplied callback below.
                        $.ajax({
                            type: "POST",
                            url: "/myaccount/jwtticket"
                        })
                            .done(function (data, textStatus, jqXHR) {
                                callback(data.Token);
                            })

                    }
                },
                contactForm: {
                    attachments: true,
                    fields: [
                        { id: 'name', prefill: { '*': 'foo bar' } },
                        { id: 'email', prefill: { '*': 'foobar@example.com' } }
                    ]
                }
            }
        };

        // dynamically create script tag here
        var s;
        s = document.createElement('script');
        s.id = "ze-snippet";
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(s);
        s.type = 'text/javascript';
        s.src = "https://static.zdassets.com/ekr/snippet.js?key=xyz";
        
        
        //ERROR:  Get error at line below  zE is not defined ****
        zE('webWidget', 'show'); 
        zE('webWidget', 'open');
        zE('webWidget:on', 'close', function () {
            zE('webWidget', 'hide');
        });
                    
    })

The code above throws error zE is not defined. Is there a way to inject a script tag into header and wait till its loaded completely. (Note that jQuery's $.getScript did not work.)

hi, not sure if this might be of interest https://develop.zendesk.com/hc/en-us/community/posts/360001653307-Live-Chat-Script-Resulting-In-Uncaught-ReferenceError — jspcal, Aug 24 '21 at 19:18

score 0 · Answer 1 · answered Aug 24 '21 at 19:20

Put all the zE calls in the script.load event:

var s;
s = document.createElement('script');
s.id = "ze-snippet";
var head = document.getElementsByTagName("head")[0];
head.appendChild(s);
s.type = 'text/javascript';
s.src = "https://static.zdassets.com/ekr/snippet.js?key=xyz";

s.onload = function() {
     zE('webWidget', 'show'); 
     zE('webWidget', 'open');
     zE('webWidget:on', 'close', function () {
         zE('webWidget', 'hide');
     });
}

How to inject script tag into header?

1 Answers1