# Live chat

## Setting up the live chat

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

{% hint style="info" %}
 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.
{% endhint %}

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:

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

Include the script in the body of the page:

```javascript
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:

```javascript
'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`):

```javascript
 'predefinedUserInput': {phoneNumber: "+31612312311"}
```

chat shadow of the chat:

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

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

```javascript
'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:&#x20;

```
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:

```javascript
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()`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.omnidesk.io/omnidesk/live-chat.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.