Adding Chat Buttons to Your Site

This document explains how you can add chat buttons to your website.

Initialisation Process

It is possible to place one or more chat buttons or links on the site by placing an element on the with the class channelme-chat-btn and an attribute data-group with the name of the group you want to accept incoming chat requests.

Example:

<button class="channelme-chat-btn" data-group="your-group-id">Chat with us</button>

After the elements have been placed it is important they are initialised by the site_connect script. This is done automatically after the site_connect script is loaded on the page, and the page is ready. Note: when you place the chat button elements after the site_connect script is initialised, you have to call the site_connect widget manger. The widget manager will initialise your chat button. This is explained later.

During the initialisation phase, the class waiting is added to the element.

Example:

<button class="channelme-chat-btn waiting" data-group="your-group-id">Chat with us</button>

The site_connect script has now sent the initialisation request of the button to the channel.me server. The server will check if there are users in chat application which are member of the group. When there are users which are available in accept incoming chat request, the server will return this information to the page. The site connect script will then remove the waiting class, and replace it with the class enabled or disabled.

Example:

<button class="channelme-chat-btn enabled" data-group="your-group-id">Chat with us</button>

When the chat button is enabled, it is possible to click on the button. The site connect script will then open the chat request window.

When there is no agent in the chat application, or when there all agents are busy with chats the button will be disabled. This reduces the number of incoming chat requests.

Example:

<button class="channelme-chat-btn disabled" data-group="your-group-id">Chat with us</button>

The different classes make it possible to style the button differently when it is enabled or disabled. It is possible to use your own custom styling.

Multiple Chat Buttons

It is also possible to add multiple chat buttons on the page.

Example:

<button class="channelme-chat-btn" data-group="support">Chat with Support</button>
<button class="channelme-chat-btn" data-group="sales">Chat with Sales</button>

This example places two buttons to different groups on the page. Both buttons will be initialised individually depending on the availability of users which are member of the groups. Note: it is also possible to place multiple buttons to the same group, and use different html elements.

Example:

<button class="channelme-chat-btn" data-group="support">Chat with Support</button>
...
<footer>
   <a href="#" class="channelme-chat-btn" data-group="support">Contact support via chat</a>
   ...
</footer>

Initialisation Process Details

It is important that the buttons are initialised properly. To make sure this happens you can do two things.

Make sure the buttons are on the page before loading the siteconnect script. The buttons will be initialised automatically when the site_connect script and the page is ready.
When you can't do this, make sure you call siteconnect.widget_manager() when the buttons are available on the page.

When you use javascript frameworks which manipulate the dom-tree extensively like React and VUE.js, special care has to be taken. You should make sure the framework adds the dom elements once, and does not manipulate the elements after initialisation with site_connect.