Site Connect Status API

[Coming Soon]

The documentation is not complete yet. 

In order to implement tight integrations with sights it is important to know the status of the channel.me chat widget on the page. During it's lifetime the widget can have various states. This document explains how this status information can be retrieved.

The element in which the chat widgets is placed on the page has the id "wwwchannelme-siteconnect-container".

<div id="channelme-siteconnect-container">
    ...
</div>

The state of the widget will be set as data-attributes on this element. This makes it possible to easily access the information from javascript, and with the MutationObserver it is possible to get notifications on state changes. For more information on accessing data attributes and using the MutationObserver API see: [add ref]

State Attributes

The channelme siteconnect container will use data attributes to indicate its state to the page it is embedded in. 

data-state-display (stateDisplay):

Possible values:

• hidden: The widget is not displayed.
• shown: The widget is displayed. The entire content is visible.
• minimised: The widget is not displayed. Only a small part of the content is visible.

data-state-widget-type (stateWidgetType):

Possible values:

• proactive: The proative widget is loaded. See: [Ref to proactive chat documentation]
• chat-request: The chat request widget is loaded. See: [Ref to chat request documentation]
• chat: The chat widget is loaded. See: [Ref to the chat widget documentation]
• chat-rating: The chat rating widget is displayed. See: [Ref to the chat rating widget documentation]

Example:

<div id="channelme-siteconnect-container"
     data-state-display="shown"
     data-state-widget-type="chat">
   ...
</div>

data-state-widget-groupname (stateWidgetGroupname):

Set to the groupname for which the widget is running. It is always set in combination with the widget type.

<div id="channelme-siteconnect-container"
     data-state-display="minimised"
     data-state-widget-type = "chat"
     data-state-widget-groupname = "support">
   ...
</div>

More Examples

Determine if the widget is shown 

function isChannelMeShown() {
    const channelContainer = document.getElementById("channelme-siteconnect-container");

    if(!channelContainer) 
 return false;

    return channelContainer.dataset.stateDisplay === "shown";
}

Use the MutationObserver

[TODO]