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
