Offline chat - create ticket/message

Feature requests
2

I wrote a little workaround for your first problem.

We’re going to implement a chat button and a form button. We’ll insert a custom script to make sure that only if the chat isn’t reachable, the form button is shown.

You’ll need the following javascript:

You should already have that on your site. It loads the chat script. Replace zammad.example.com with your domain.

<script src="https://zammad.example.com/assets/chat/chat.min.js"></script>
<script>
$(function() {
  new ZammadChat({
    background: '#0000ff',
    fontSize: '13px',
    chatId: 1,
    show: false
  });
});
</script>

Now, let’s load the form script. Again, replace zammad.example.com with your own domain.

<script id="zammad_form_script" src="https://zammad.example.com/assets/form/form.js"></script>
<script>
$(function() {
  $('#feedback-form').ZammadForm({
    messageTitle: 'Leave a message',
    messageSubmit: 'Submit',
    messageThankYou: 'Thank you. We'll get back to you as soon as possible.',
    modal: true
  });
});
</script>

Now include this code.

<script>
$(function() {
    setTimeout(function () {
  var x = document.getElementById('open-chat');
  if (window.getComputedStyle(x).display === "none") {
    document.getElementsByClassName('chatclosed')[0]. 
            style.display = 'inline'; 
    document.getElementsByClassName('chatclosed')[1]. 
            style.display = 'inline'; 
  };
}, 3000);
});
</script>

Include the following line in your CSS for the page:

.chatclosed {
    display: none;
}

Now make sure that you give the chat button the ID open-chat. So for example:

<button class="open-zammad-chat" id="open-chat">Chat with us</button>

Now we want to assign the class chatclosed to the form button. Again, this is just an example for a button:

<button id="feedback-form" class="chatclosed">Leave us a message</button>

You can also include additional text, as long as you give it the chatclosed class:

<div class="chatclosed">Our chat is currently unavailable.</div>

Now, in case that no agents are available and the chat button disappears, the form button (and additional text) will get visible. Please note that it takes 3 seconds after loading the page to display the form button and any additional text, if the chat is unavailable.

I hope this helps.

Edit: they were some issues, it should work on WordPress systems too now

1 Like