Class

Chat

Chat

Members

object

# EVENTS

Properties:
Name Type Description
MESSAGES string
MESSAGES_WITH_STATUS_UPDATES string
OPERATOR_TYPING_STATUS_UPDATE string
object

# SENDERS

Properties:
Name Type Description
VISITOR string
OPERATOR string

Methods

# addEventListener(type, listener)

Registers an event listener on the chat. If a listener is added while the chat is processing an event, it will be not triggered with the current event. If multiple identical listeners are registered on the same event type the duplicate instances are discarded. They do not cause the listener to be called twice and do not need to be removed with the removeEventListener method.
Parameters:
Name Type Description
type string The event type for which the user is registering. Must be one of Chat#EVENTS.
listener function The listener function that will be called when the event occurs.

# removeEventListener(type, listener)

Removes an event listener from the chat. If an event listener is removed while the chat is processing an event, it will not be triggered with the current event. An event listener is never invoked after being removed. Calling removeEventListener with arguments which do not identify any currently registered listener has no effect.
Parameters:
Name Type Description
type string The event type for the listener being removed.
listener function The event listener to be removed.

# sendMessage(message, optionsnullable)

Sends a chat message to the operator.
Parameters:
Name Type Attributes Description
message string The message to send to the operator.
options object <nullable>
Options
attachment object The message attachment (see VisitorMessage#attachment).
Example

Sending a message using enter key

  var chatInput = document.querySelector('#chat-input');
  chatInput.addEventListener('keypress', function(event) {
    // Send message on enter
    if (event.keyCode === 13) {
      engagement.chat.sendMessage(event.target.value);

      // clear previous message from the input
      event.target.value = '';
    }
  });

# sendMessagePreview(message)

Sends a message preview to the operator. The latest preview message will always be visible to the operator. This means that operators can use the preview messages as an indication of visitor activity. The operator could also use the preview messages to start preparing a response before the visitor finishes typing, ensuring a fast and seamless communication experience.
Parameters:
Name Type Description
message string The preview message to send to the operator.
Example

Sending message previews using an input field

  var chatInput = document.querySelector('#chat-input');
  chatInput.addEventListener('keyup', function(event) {
    engagement.chat.sendMessagePreview(event.target.value);
  });

Events

# MESSAGES

Triggered when an operator or visitor sends a message. Also triggered for every listener immediately when the listener is added. The event listener will be called with a list of VisitorMessage and OperatorMessage instances. Messages will be ordered with newer messages at the beginning of the list.

Messages can be added elsewhere besides the beginning of the list. This can happen if messages are received out of order due to network instability, for example.

# MESSAGES_WITH_STATUS_UPDATES

Triggered every time either the operator or the visitor sends a message or whenever a message's status changes. Also triggered for every listener immediately when the listener is added. The event listener will be called with a list of VisitorMessage and OperatorMessage instances. Messages will be ordered with newer messages at the beginning of the list.

Messages can be added elsewhere besides the beginning of the list. This can happen if messages are received out of order due to network instability, for example.

This can be useful for giving visitors visual feedback about their message delivery status. For example, visitors can be notified of delivery failures by coloring the messages red.

Example

Displaying chat messages with statuses

  var displayMessages = function(messages) {
    var messageList = document.querySelector('#chat-messages');
    messageList.innerHTML = '';

    messages.forEach(function(message) {
      var messageElement = document.createElement('div');
      messageElement.classList.add(message.status);
      if (message.status === message.STATUSES.FAILED) {
        messageElement.style.color = "red";
      }
      messageElement.innerHTML = message.sender + ': ' + message.content;
      messageList.appendChild(messageElement);
    });
  };

  engagement.chat.addEventListener(
    engagement.chat.EVENTS.MESSAGES_WITH_STATUS_UPDATES,
    displayMessages
  );

# OPERATOR_TYPING_STATUS_UPDATE

Triggered with an OperatorTypingStatus object when the operator starts or stops writing a chat message. Also triggered for every listener immediately when the listener is added.

Example

Showing an indicator when the operator is typing

  var operatorMessagePreview = document.querySelector('#operator-message-preview');
  engagement.chat.addEventListener(
    engagement.chat.EVENTS.OPERATOR_TYPING_STATUS_UPDATE,
    function(status) {
      if (status.typing) {
        operatorMessagePreview.textContent = '...';
      } else {
        operatorMessagePreview.textContent = '';
      }
    }
  );