ZenDesk Chat

How to Install

1. Go to Portal’s Control Panel, Tags Manager;
2. Click “Create Tag” and select “Custom JS”;
3. Give it a name (e.g. “ZenDesk”), give a description;
4. Assign a “On App Init” condition to this tag
5. Insert the following contents of the Tag:

In case you are using Web Widget (Classic)

(async () => {
    const loadingZenDeskScript = function (onload, onerror) {
        var script = document.createElement('script');
        script.id = 'ze-snippet';
        script.src = 'https://static.zdassets.com/ekr/snippet.js?key=<inert your key from zendesk>';
        script.type = 'text/javascript';
        script.onload = onload;
        script.onerror = onerror;
        document.getElementsByTagName('head')[0].appendChild(script);
    };

    /* In case you would like for one of your buttons to open the chat, add class="open-live-chat" */
    document.body.addEventListener('click', (event) => {
        const target = event.target.closest('.open-live-chat');

        if (target) {
            zE('webWidget', 'open');
        }
    });
    
    await new Promise((resolve, reject) => loadingZenDeskScript(resolve, reject));

    if (Playtech.API.user.isLoggedIn()) {
        window.zE?.(() => window.zE?.show());
    } else {
        window.zE?.(() => window.zE?.hide());
    }

    const handler = async () => {
        const response = await Playtech.API.server.getJWTToken();
        const jwtToken = response && response.data && response.data.jwtToken;

        if (!jwtToken) {
            return;
        }

        window.zE?.show();

        window.zESettings = {
            webWidget: {
                authenticate: {
                    chat: {
                        jwtFn: (callback) => callback(jwtToken)
                    }
                }
            }
        };

        zE('webWidget', 'updateSettings', window.zESettings);
        zE('webWidget', 'chat:reauthenticate');
    };

    Playtech.on(Playtech.Events.LOGGED_OUT, () => zE.hide());
    Playtech.on(Playtech.Events.LOGGED_IN, handler);
    
    if (Playtech.API.auth.isLoggedIn) {
        handler();
    }
})();

In case you are using Web Widget (New Messenger API)

(async () => {
    const loadingZenDeskScript = function (onload, onerror) {
        var script = document.createElement('script');
        script.id = 'ze-snippet';
        script.src = 'https://static.zdassets.com/ekr/snippet.js?key=<inert your key from zendesk>';
        script.type = 'text/javascript';
        script.onload = onload;
        script.onerror = onerror;
        document.getElementsByTagName('head')[0].appendChild(script);
    };

    /* In case you would like for one of your buttons to open the chat, add class='open-live-chat' */
    document.body.addEventListener('click', (event) => {
        const target = event.target.closest('.open-live-chat');

        if (target) {
            window.zE?.('messenger', 'show')
        }
    });

    await new Promise((resolve, reject) => loadingZenDeskScript(resolve, reject));

    if (Playtech.API.user.isLoggedIn()) {
        window.zE?.(() => window.zE?.('messenger', 'show'));
    } else {
        window.zE?.(() => window.zE?.('messenger', 'hide'));
    }

    const handler = async () => {
        window.zE?.('messenger', 'show');

        window.zE?.('messenger', 'loginUser', async (callback) => {
            const response = await Playtech.API.server.getJWTToken();
            const jwtToken = response && response.data && response.data.jwtToken;
            callback(jwtToken)
        });
    };

    Playtech.on(Playtech.Events.LOGGED_OUT, () => {
        window.zE?.('messenger', 'logoutUser');
        window.zE?.('messenger', 'hide');
    });
    Playtech.on(Playtech.Events.LOGGED_IN, handler);

    if (Playtech.API.auth.isLoggedIn) {
        handler();
    }
})();