@livechat/agent-app-widget-sdk

Note: if you're developing a new widget, you should use the Agent App SDK instead. This package isn't actively maintained anymore.

LiveChat AgentApp Widget SDK

This SDK allows you to create widget applications that can interact with the AgentApp.

Instalation

The package can be installed directly from NPM.

npm install --save @livechat/agent-app-widget-sdk

Usage

Before performing any actions you have to initialize the SDK by calling the asynchronous init method. Make sure the returned promise resolves.

import LiveChat from '@livechat/agent-app-widget-sdk';

await LiveChat.init();

Now you can send commands or subscribe to events coming from the AgentApp.

Commands

The SDK exposes methods that you can call in order to interact with the AgentApp. All methods return a promise which resolves after the command has been successfully sent.

putMessage(text)

This method will add the given text to the currently opened chat textarea.

await Livechat.putMessage('This text will be added to current chat textarea');

watchMessages()

Subscribe to all incoming and outgoing chat messages. You can listen to the messages using the message event.

Livechat.on('message', message => {
  // handle the message here
});

await Livechat.watchMessages();

modifyCustomerDetailsSection(section)

This method allows you to modify any custom section that you declared in the initial state of widget in the Developers Console. The section argument should be an object conforming to the section defintion schema, for example:

const section = {
  title: 'My section',
  components: [
    // ...
    {
      type: 'button',
      data: {
        label: 'My section button',
        id: 'section-button'
      }
    }
    // ...
  ]
};

await Livechat.modifyCustomerDetailsSection(section);

The given section title must match the one specified in the initial state, otherwise the section won't change. Also, AgentApp ignores commands that do not contain a valid section definition, so make sure that definition you're sending is correct.

Listening for events

The SDK allows you to listen for certain events happening in the AgentApp. You can subscribe to them using the standard event emitter interface.

LiveChat.on(event, eventHandler);

The SDK emits the following events:

customer_profile

Emitted on initialization and on every chat window change, the event contains the currently selected customer's details.

Livechat.on('customer_profile', data => {
  console.log(data);
});

Example output

{
  "id": "S126126161.O136OJPO1",
  "name": "Mary Brown",
  "email": "[e-mail]",
  "chat": {
    "id": "NY0U96PIT4"
  }
}

message

Emitted on every chat message (both outgoing and incoming). You have to subscribe to the events using the watchMessages method first.

Livechat.on('message', data => {
  console.log(data);
});

Example output

{
  "chat": "PL0B4IDJIO",
  "message": "Message content",
  "message_id": "edu65huxyk",
  "message_source": "visitor"
}

customer_details_section_button_click

Emitted when a button within custom defined section is clicked in Customer Details. It contains a buttonId property, which reflects the id specified for the button in the section definition.

Livechat.on('customer_details_section_button_click', ({ buttonId }) => {
  console.log(buttonId);
});