You can use the connectOnPageLoad JavaScript
API
to defer the Chat connection until your visitor interacts with the Web Widget.
Using this setting, you can fine-tune your website for performance, while still leveraging all features on specific pages.
This article includes the following topics:
- Understanding the Web Widget-Chat connection
- Understanding the connectOnPageLoad setting's impact
- Adding connectOnPageLoad to your web pages
Related articles:
Understanding the Web Widget-Chat connection
By default, the Web Widget connects to Chat services on page load, for any page where the widget snippet is embedded AND Chat is enabled.
The timing of this connection makes features like proactive chat and conversion tracking possible. However, it can negatively affect performance in a number of ways:
- If you have high visitor traffic volume, these connections can reduce the performance of your chat product, and make it more difficult to identify customers when monitoring your website visitors.
- It impacts Web Widget performance. Connecting to Chat on page load means that more assets need to be delivered, before the Web Widget is interactive on a web page. This can impact your overall web page load speed.
Understanding the connectOnPageLoad setting's impact
When you enable the connectOnPageLoad
setting, there should be no noticeable impact on the end user experience. There may be a slight delay of one to two seconds (at the most) when a customer opens the widget.
However, using connectOnPageLoad
to defer the connection comes with some important trade-offs to consider, before implementation.
When connectOnPageLoad = true
:
- There is no impact on Chat functionality. The Chat experience is the same as if there is no
connectOnPageLoad
setting in the page code.
When connectOnPageLoad = false
:
- You will only be able to monitor visitors who have initiated chat or have clicked on the Web Widget.
- Some of the Chat features may be impacted, such as conversion tracking, proactive triggers, and Web Widget JS APIs which rely on visitors' connections with Chat services.
To learn more about the impact of using connectOnPageLoad
in different configuration scenarios, see ConnectOnPageLoad: Configuration best practices for common Chat use cases.
Adding connectOnPageLoad to your web pages
connectOnPageLoad
to any page with the embedded Web Widget. The setting is added to the source code on each web page, as in the following example:
<script type="text/javascript">
window.zESettings = {
webWidget: {
chat: {
connectOnPageLoad: false
}
}
};
</script>
The setting must be assigned a value, either true or false, which determines how visitors are handled on each page:
connectOnPageLoad: true
: Connects to the Chat service when the page loads, allowing you to engage with every visitor on that web page.connectOnPageLoad: false:
Connects to the Chat service when a user interacts with the widget, allowing you to focus on visitors currently chatting with agents, or who have initiated a chat.
connectOnPageLoad
, see ConnectOnPageLoad: Configuration best practices for common Chat use cases.To include the connectOnPageLoad
setting on your website
- In the source code of the web page, locate the Chat widget code snippet.
- Add the
connectOnPageLoad
setting to your source code, above the widget code snippet:<script type="text/javascript"> window.zESettings = { webWidget: { chat: { connectOnPageLoad: false } } }; </script>
- Set the value of
connectOnPageLoad
astrue
orfalse
depending on your use case. - Save and publish the page.
- Repeat these steps on every page of your website with the widget embedded.
4 Comments
Hi,
I'm trying to use this setting but all it does is delay the loading of "chat-incoming-nootifaction.mp3".
I'm using the following code:
<script type="text/javascript"> window.zESettings = { webWidget: { chat: { connectOnPageLoad: false }, launcher: { chatLabel: { '*': 'Chat met ons!' } } } }; </script>
Delay loading only the mp3 file has no, to allmost no effect on the page load.
Am I doing something wrong?
Regards,
Matthijs
Hi Matthijs,
Thanks for reaching out! Right now, with this setting enabled, it will prevent the Web Widget from establishing a Web Socket connection on page load. The majority of the performance benefits for this feature are most noticeable in the Chat dashboard where agents are handling a large numbers of incoming requests from end users who are both either interacting OR not interacting with the Web Widget. With this new feature turned on, Agents will only be interacting with end users in the Chat dashboard once they have begun interacting with the Web Widget. There are some benefits coming on the client side too.
This work was needed as a precursor step to allow us to start dynamically loading Chat assets only once an end user begins interacting with the Web Widget as well. This should help to reduce initial bundle size and improve load times. This client side work to dynamically load the Chat assets hasn’t been completed yet but it is still on our roadmap for next year (sometime in the first half of the year).
I'll log your details on our side and would be happy to notify you once this work has been completed.
Thanks,
- Miranda.
Miranda Burford I'm also interested in upcoming developments here too. We recently deployed proactive chat more broadly, and since we can't set connectOnPageLoad to false and have proactive working, we're stuck loading the widget's massive JavaScript (our total loaded JS is 5x larger overnight). This is definitely an issue for site performance an SEO.
One suggestion - if there was a simple REST API we could use to determine if proactive chat was even worth loading, that would be a huge lifesaver. Many A/B testing platforms load optimally this way. First, a small request is made to an API with the URL of the current user, then if there's anything to do (e.g. there's an A/B test enabled for that URL, or in this case, if there are agents online and there are triggers that could be relevant for that URL), then the client can start loading more stuff.
In other words, I wish we had an API that took a URL, and let us know if agents are online AND if any triggers could be active for that page. This way, we don't pay the loading price for proactive chat if it's not even possible at the time.
Thank you!
Please sign in to leave a comment.