Chat loading before page loads error Cannot read properties of undefined

In this article you will learn how to fix issue when chat is loading before page and throwing error “ Cannot read properties of undefined” in console logs.

if your script is missing “defer” option in <script> tag this might cause Chat Widget to fail loading. If the defer attribute is set, it specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing. That is why sometimes page loads before script and sometimes doesn’t causing following error :

Also If your script tag is in the <head>, the JavaScript is loaded before your HTML, therefore the element you are trying to access does not exist in the DOM yet. To fix this you can either move your script inside <body> find the </body> tag and add the JavaScript code at the end :

<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

<h1>Testing BETA WIDGET</h1>
 
<script src="https://chat-api.spartez-software.com/chat-widget.js" defer></script>
<chat-widget
    jira-id="your jira id"
    service-desk-id="4"></chat-widget>
</body>
</html>

or you will need to add defer option to your script like below :

<script src="https://chat-api.spartez-software.com/chat-widget.js" defer></script>

<chat-widget jira-id="your-jira-id" service-desk-id="4"></chat-widget>