Yuliia Bon

Hi! Yes, the number of unread messages were shown correctly before optimization.

This is a script with some delay in which I form a script tag for the widget and my file.

window.onload = function () {
    const siteUrl = document.location.origin;

    function createScript() {
        const chatConnection = document.createElement("script");
        chatConnection.id = "ze-snippet";

        if(siteUrl === "https://masterofcode.com") {
            chatConnection.src = "https://static.zdassets.com/ekr/snippet.js?key=d34f9844-cba6-4b57-96f5-3b30aaa3d307";
        } else {
            chatConnection.src = "https://static.zdassets.com/ekr/snippet.js?key=60bb6a3f-f42a-4ee1-84bb-48b4939af38d";
        }

        document.getElementById("js-chat-screen").after(chatConnection);
    }

    function createWidgetScripts() {
        const widgetScripts = document.createElement("script");
        widgetScripts.id = "ze-snippet";
        widgetScripts.src = `${siteUrl}/wp-content/themes/moc/js/src/chatwidget/webwidget.js`;

        document.getElementById("widget-script").after(widgetScripts);
    }

    setTimeout(function(){
        createScript();
    }, 4000);

    setTimeout(function(){
        createWidgetScripts();
    }, 5000);
};

And in my file I use a function that checks when the chat is connected so that there is no error that zE is not a function.

var waitForZopim = setInterval(function () {
    if (window.$zopim === undefined || window.$zopim.livechat === undefined) {
        console.log('loading chat');
        return;
    }

    console.log('chat connected');

    zE('webWidget:on', 'chat:unreadMessages', (number) => {
        if (number > 0) {
            $(".lets-chat-button__number").text(number);
            $(".lets-chat-button__text-inner").text("New");

            checkButtonTextWidth();

        } else {
            $(".lets-chat-button__number").text('');
            $(".lets-chat-button__text-inner").text("Let’s Chat");

            checkButtonTextWidth();
        }
    })

    clearInterval(waitForZopim);
}, 100);

We show the number of unread user messages if the widget is closed. But if the user refreshes the page or goes to another page, the data on the number of unread messages is lost. I remember that everything worked fine before, the data on the number of unread messages was not lost.

To increase the speed of the site and the speed of loading the page, I use the delayed loading of the script and form it by the script. Most of all, that's what it takes. How can I get the number of unread messages in this case?

We have custom launcher, and i added number with this script

zE('webWidget:on', 'chat:unreadMessages', (number) => {
    if (number > 0) {
        $(".lets-chat-button__number").text(number);
        $(".lets-chat-button__text-inner").text("New");

        checkButtonTextWidth();

    } else {
        $(".lets-chat-button__number").text('');
        $(".lets-chat-button__text-inner").text("Let’s Chat");
    }
})

https://prnt.sc/26oj773

And I also see that the default launcher displays the number of unread messages after the page reloads.

https://prnt.sc/26ojwgp

I want to remove the inscription "Queue position" that is highlighted on the screen.
Can I do that?
How do I do this?

http://i.prntscr.com/ARuNWe9ySUOzb3nydpQr0Q.png 

We use a Zendesk Web Widget on our site and it greatly affects the performance of the page.
If you check in PageSpeed Insights with a widget, then for us it turns out a critically small number to load the page on mobile. Without the widget, the figure increases by about 50 points.
We want to use the widget and we are all right but we need to do something with the loading speed of the site.
Is there anything you can do to slow down the page load speed?
Our site: https://masterofcode.com/
page Speed: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmasterofcode.com%2F

On our site we have an idea to put a chat widget in place of the form. We want the widget not to be tied to the bottom right corner, but to be located in the block where the form is now.
I give an example of a page 

https://masterofcode.com/webinars/ai-radar-for-e-commerce-businesses

Now the widget is fixed at the bottom of the page but we want it to be in the block where the form is and was pasted as now the form and moved when scrolling. Is it possible to do that?

I agree. I need it too.