Chat popup not showing

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>

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:

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.

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.

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.