Moments SDK

Moments allows you to open any web apps right in the chat window. From a developer point of view, it’s an embedded website in iframe which is shown during a chat. Click here to read more.

How it works?

1. The customer receives a rich message with the webview button
2. The customer clicks button
3. Moment is shown, web application loads
4. Customer performs activities in the web application
5. Moment is closed either by:
   • Web application (method call)
   • User (close button)

Sample use cases

Schedule meeting - give the customer an option to choose the available term. Send a message with “choose term” button, open web application with data picker component, then send back chosen term to chat conversation as customer’s message.

Payment system - send customer “Pay” button, open web application with payment provider billing form, send payment id to chat after successful fulfillment.

Seat picker - let the customer choose a seat in stadium or restaurant. Prepare custom component with seat’s placement visualization, send back preferred option to the agent.

Articles view - send case-related materials from your knowledge base. Let customer quickly read them without the need of opening a new tab.

Moments let you embed almost every web application in chat widget, but it shouldn’t be treated as a place to surf the web. Moments should allow a customer to focus on a particular task, complete it in a straightforward way and back to the chat. You shouldn’t redirect the customer to the complex web application with multiple views, complicated forms or web.

How to start

You should start by preparing your first Moment app. You can use one of our examples or use our bootstrap project build on Glitch platform - it’s ready to publish, integrated with Moments SDK and easy to fork and adjust to own needs.

Installation

To get started with creating your Moments app simply add @livechat/moments-sdk as dependency to your project:

npm install @livechat/moments-sdk

and then import createMomentsSDK function which is exported as default from package.

import createMomentsSDK from "@livechat/moments-sdk";

Methods

createMomentsSDK

Initialized method for the Moments SDK. You can pass additional properties:

• title - Application title, will be placed on Moment’s titlebar
• icon - URL to Application icon, will be placed on Moments title bar

import createMomentsSDK from "@livechat/moments-sdk";
createMomentsSDK({ title: "My App" }).then(momentsSDK => {
  // your code
});

sendMessage

Sends a message as a visitor in currently active chat. Parameters:

• text - Message text

momentsSDK.sendMessage({ text: "Chosen date: 19.12.2009" });

setAttributes

Set customer’s properties. Parameters:

• customProperties - customer’s additional data object

momentsSDK.setAttributes({ clientId: "SJ3CJ6JVNMK42A", source: "Organic" });

close

Close Moment app.

This method has no parameters.

momentsSDK.close();