Chat popup not showing

Technical assistance
1

Infos:

  • Used Zammad version: 5.1.1
  • Used Zammad installation type: docker-compose
  • Operating system: Windows 11
  • Browser + version: Chrome 100.0.4896.127

Expected behavior:

  • Chat popup to show on the website once agents are online and chat is enabled.

Actual behavior:

  • Once the chat button is pressed, a Zammad chat session opens properly for the agent, but in the client browser no chat window appears.

Steps to reproduce the behavior:

  • create this test HTML page, replace XXXXXXXX with your Zammad URL and press the button to Chat
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="XXXXXXXX/assets/chat/chat.min.js"></script>
<script>
$(function() {
  new ZammadChat({
    background: '#0b2b4a',
    fontSize: '12px',
    chatId: 1,
    show: false
  });
});
</script>
</head>
<body>
<button class="open-zammad-chat">Chat with us</button>
</body>
</html>
2

Hi,

You need to move the two script parts into the body part (just before the closing body tag).
Furthermore there is no need for a button. At least I’ve never seen this. :slight_smile:

3

Hi,
I’m not sure if that resolved the issue. Without the button, nothing appears we can push to initiate the (non-appearing) Chat window.

4

Ah, I just noticed, there is a variant with a button to manually open the chat.

Anyway, here is a simple, tested example:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Hello Zammad Chat</title>
  <style type="text/css">
    body { font-family: sans-serif; background-color:aliceblue; }
    div.content { font-weight: 400; font-size: 32px; line-height: 1.05; }
  </style>
</head>
<body>
<div class="main">
  <div class="content">
    <p>Hello Zammad Chat</p>
  </div>
  <div class="footer">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://zammad.yourdomain.tld/assets/chat/chat.min.js"></script>
    <script>
    $(function() {
      new ZammadChat({
        background: '#222222',
        fontSize: '12px',
        chatId: 1
      });
    });
    </script>
  </div>
</div>
</body>
</html>

Now at least one agent has to turn on the customer chat, then it shows up on the page.

5

This other embedding method you linked indeed works, but this is not the manually-open-with-a-button approach, which seems not to work, unfortunately.

6

This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.