Class: Chat

Overview

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.

Examples:

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.

Examples:

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 = '';
    }
  }
);

Variables Summary

EVENTS = 
{
  MESSAGES: 'messages',
  MESSAGES_WITH_STATUS_UPDATES: 'messages-with-status-updates',
  OPERATOR_TYPING_STATUS_UPDATE: 'operator-typing-status-update'
}
SENDERS = 
{
  VISITOR: 'visitor',
  OPERATOR: 'operator'
}

Instance Method Summary

Instance Method Details

# (void) addEventListener(type, listener)

This method allows registration of event listeners 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:

  • 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.

# (void) removeEventListener(type, listener)

This method allows the removal of event listeners 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:

  • type ( string ) — The event type for the listener being removed.
  • listener ( function ) — The event listener to be removed.

# (void) sendMessagePreview(message)

Send 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.

Examples:

Sending message previews using an input field 

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

Parameters:

  • message ( string ) — The preview message to send to the Operator.

# (void) sendMessage(message)

Send a chat message to the Operator.

Examples:

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 = '';
  }
});

Parameters:

  • message ( string ) — The message to send to the Operator.

    Quickly fuzzy find classes, mixins, methods, file:

    Control the navigation frame:

    You can focus and blur the search input: