Offline chat - create ticket/message

  1. Integrate the Form modal with the Chat modal. It is common nowadays that when a chat facility is offline, clients can leave a message by submitting a ticket. Right now Zammad is hiding the chat button instead.

  2. Add a feature where clients can start chats even without an agent present and if there is no response their Chat the conversation is auto-converted into a ticket. To do this, the client should be able to add their name and email address before starting the chat, and maybe even a ticket/support case number/subject.

Zammad seems like a really really good product! We use Livezilla at the moment but we are looking to change as they have closed there devlopment. but without being able to start a ticket if the chat is offline breaks the whole case.

1 Like

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

Hi Benmo!

Thank you so much for that, it have helped a bit, but I do not understand where I should add the;

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>* *

This is the default chat button which is generated by Zammad. This is the button you have already on your page to open the chat.
<button class="open-zammad-chat">Chat with us</button>

We want to add the open-chat id to that button:
<button class="open-zammad-chat" id="open-chat">Chat with us</button>


With this code, you tell the page where to display the Form button in case that the chat is not available. So you might want to add this directly under the Chat button.
<button id="feedback-form" class="chatclosed">Leave us a message</button>


If you want to include additional text in case your chat is not available (e.g. to inform your customers that the live chat is only available on business days).
<div class="chatclosed">Sorry, our chat is only available on business days.</div>


Your final HTML page with the button could look like this. Of course, you would have to include the CSS and JS too.
<button class="open-zammad-chat" id="open-chat">Chat with us</button>
<div class="chatclosed">Sorry, our chat is only available on business days.</div>
<button id="feedback-form" class="chatclosed">Leave us a message</button>

If the chat is available, it will display the “Chat with us” button:
[Chat with us]

If the chat is unavailable, it will look like this:
Sorry, our chat is only available on business days.
[Leave us a message]

HI Benmo, thank you so much for your help.

I try to add the code to to my scripts footer before the

But i get it to look like this (see screen shit) and also it dont show anything when chat is online

this is what i have in my. footer before the . im using it on a WP site with the plugin “Insert Headers and Footers” didnt have any problems before with example livezilla or zoopim.

im trying in a test site im using. www.charterparty.se

CHATTA MED OSS

Sorry, our chat is only available on business days.
Leave us a message

Replace the custom script with this:

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

Do not change the value 3000 as it might take some time for the chat button to disappear. If the script is executed to early, it won’t have any effect.

It also seems like there is so kind of problem with your footer. Try to put the whole configuration before the footer. In WP, you should be able to accomplish this with the HTML block.

Hej Benmo, tried to put it in a html elemnt on the first side but it dont seem to work still.

My big problem is we use this theme on several different sites, so its important i get it to work on this theme, (Thefox from tranmautritam ), we use it , ungdomsresan.se, eventsayianapa.se, efi-hotel.com etc…
I will try to install it on another theme we use and get back to you.

Thank you for all your help so far!