Chat Widget Documentation

This documentation describes how to include our chat widget on any web page.

Installation

Include the script from our CDN e.g. in the head of a HTML page:

<script defer src="https://cdn.edgetier.com/COMPANY.js" data-id="1"></script>

Where COMPANY.js should be replaced with your company name. By default, if agents are online and “enabled” on chat, the widget will automatically show a button on the page that can be clicked to begin a chat (see data-hidden below if you do not want to show the button by default). 

The script may have the following attributes:

  • data-id (mandatory): The “setup” to use which is a combination of the theme and various forms and settings. This will be created by administrators in Arthur.
  • data-hidden (optional, default: “false”): A value of “true” will mean the chat button will not show unless explicitly triggered. “false” will mean the button will be added automatically. The chat window may be hidden on pages where URL history tracking is required, but chat initiation is not.

Note: If a customer has an ongoing chat the window will re-open when they refresh the page or navigate to another regardless of the value of `data-hidden`.

Methods

After including the script, a global window object EdgeTierChat should be available with various methods. 

All methods take a callback that will be invoked when the operation is finished. The callback will be provided with two parameters:

  • error: A string or null if an error occurred during the operation.
  • data: Any information returned or null.

EdgeTierChat.isAvailable(callback)

Check if chat is turned on for the given data-id and if agents are online for the customer’s language.  Language is determined via the “lang” attribute on the source HTML page. The callback will return a single boolean property isAvailable as a result.

EdgeTierChat.isAvailable((error, data) => {
    if (error) {
        console.error(error);
    } else if (data.isAvailable) {
        // Add a custom "Chat Now" button.
        const button = document.createElement("button");
        button.textContent = "Chat Now";
        button.addEventListener("click", () => EdgeTierChat.open());
        document.body.appendChild(button);
    }
});

EdgeTierChat.showButton(callback)

Display the widget button to start a chat.

// Just try to show the button and ignore the result.
EdgeTierChat.showButton();


// Show the button and do something afterwards.
EdgeTierChat.showButton(error => {
    if (error) {
        console.error(error);
    } else {
        console.log("Button has been rendered");
    }
});


// Show the button after five seconds.
setTimeout(() => EdgeTierChat.showButton(), 5000);

EdgeTierChat.open(callback)

Open the chat window.

// Just open the chat window and ignore the result.
EdgeTierChat.open();


// Open the chat window and do something afterwards.
EdgeTierChat.open(error => {
    if (error) {
        console.error(error);
    } else {
        console.log("Chat window has been opened");
    }
});

Any of these methods can be called independently of each other. For example, you do not need to call isAvailable() before open(), the widget will do that internally for you.

Helpers

EdgeTierChat.Errors

Enum/dictionary of errors for handling specific use cases.

EdgeTierChat.showButton(error => {
    if (error === EdgeTierChat.Errors.Offline) {
        const message = document.createElement("p");
        message.textContent = "No agents are online now, please try again later.";
        document.body.appendChild(message);
    } else {
        // Do something else.
    }
});

 

Scroll to Top