Live chat

Setting up the live chat

Setting up the live chat is a fairly straight-forward process:

The javascript file gives a lot of configurational options. You can also influence the behaviour of the live chat on your site through available javascript functions.

Place the following script in the HTML of your page and customize it if you want. You can add it directly in your HTML or use a tag manager like GTM. Do not forget to fill in your account token and server token. You can find these at the admin section in the Omnidesk application at Channels > Chat > Tokens. If styling does not go well after installation there might be a conflict with your CSS. We choose not to put the code in an iframe so we can support good responsiveness for mobile devices. Unfortunately because of this it may require an CSS update from your code first.

Include the following in the head of the page:

<script src="https://chat.omnidesk.io/static/chat.js"></script>

Include the script in the body of the page:

document.addEventListener('DOMContentLoaded', () => {
    const chat = new Chat();
    chat.start({
        chatServerURL: '{{ chat.url }}/',
        chatAccountToken: '{{ chat.account_token }}',
        chatServerToken: '{{ chat.server_token }}',
    });
    window.chat = chat;
    chat.showChatStartIcon();
});

Available options trough the application interface

There are a lot of configurable options at the admin section of your Omnidesk environment. Settings > Channels > Live chat > Tokens > Edit

Available options through javascript code

Even more options are available through javascript code. When starting the chat (chat.start(), example above) you can pass other options next to the ones in the previous sample: chatServerURL, chatAccountToken and chatServerToken.

The options include, but are not limited to:

chat background image:

'chatBackgroundImage': 'https://www.mysite.com/image.jpg'

provide a phone number from your application instead of requiring the user to fill it in (options: phoneNumber, emailAddress and customerName):

 'predefinedUserInput': {phoneNumber: "[phone]"}

chat shadow of the chat:

'chatBubbleShadow': '0 2px 0 0 #005d77'

additional data for the agent (the customer will not see this data):

'additionalData': 'Extra information for customer support.'
or using a callback:
'additionalData': function() { return 'Extra information for customer support.' }

Available functions

chat.showChatStartIcon() This function brings the start chat icon on the screen of the visitor

chat.openChatWindow() This function opens the chat window for the visitor. You can call this anywhere in your code to push the window forward.

chat.toggleChatWindow() This function toggles the chat window for the visitor. This is the fundamentally the same as openChatWindow() , but this also handles the logic for closing the window.

Chat availability

You can verify if there are any users available for a chat through the following URL:

https://chat.omnidesk.io/requestChatConfig?chatServerToken={{ Your chat server token}}&chatAccountToken={{ Your chat token }}

One of the available fields in the response is instructions where the following type is present if there are no agents available: hide_reason_no_agents_available. If you want to be in control when the chat shows on your page based on this information you should not run the following line in the initialization script:

chat.showChatStartIcon();

You can do this later, for example when the customer clicks a link on the page that only shows when the chat is available. After the click you can run chat.showChatStartIcon() and probably you should also in this case run chat.showChatWindow().