JavaScript SDK in Live Chat

Live Chat offers a JavaScript SDK that enables you to interact with the widget in various ways. For example, the following snippet will initialize the widget:

 
liveChat('init', '85ea1938-f457-496d-8532-8fa489beea63', (error, result) => {
    if (error) {
        console.log('init error: ', error);
    } else {
        console.log('init result: ', result);
    }
});
 

• liveChat(...); is the public function (in the global scope window) called to interact with the widget. It will always be the same and all interactions will have to use it.

• 'init' is the first parameter passed to the liveChat function. This is called a command and it tells the widget what you want to do with it. In this case, the widget is initialized. For more details, see the Commands section.

• '85ea1938-f457-496d-8532-8fa489beea63' is the second parameter passed to the liveChat function. This is called a command argument and it provides additional information for a command. A command can have no arguments, an optional argument or a required argument. It can also differ in type. Both the type and the requirement of the argument depends on specific commands. In this case, it is an optional argument of type string. For more details, see the Commands section.

• (error, result) => { ... }˙ is the third parameter passed to the liveChat function. This is a callback function, which will be invoked once the execution of the command finishes. The callback is a function of two parameters - the first parameter represents an error and the second one represents a result. At most, only one will be defined depending on the execution result. The error parameter will always be defined in case of failure, but the result type again depends on the command. Some commands can return object results, but some will return undefined.

You can call this function from anywhere in your code where Live Chat has been initialized using the snippet provided on your Infobip account.

The definition of any SDK interaction in Typescript syntax is as follows:

liveChat(command: string, arg?: any, callback?: (e?: any, r?: any) => any);

Commands

Read the sections below and find out more about the available commands.

Init

Example usage

liveChat('init', '85ea1938-f457-496d-8532-8fa489beea63', myInitCallback);

Details

This command should be called as the first one, before any other commands. The argument expects the ID of the widget you would like to initialize. If you would like to initialize with another widget ID without reloading the page, you will have to call either the Clear or the Log out command first.

Auth

Example usage

liveChat('auth', generateJwt(), myAuthCallback);

Details

This command authenticates the current user using data provided in the JWT. Users authenticated this way are automatically treated as customers in the system. This means that by authenticating, users can verify their identity and access their previous history.

For more info on how to generate the JWT, check this page (opens in a new tab).

Log out

Example usage

liveChat('logout', null, myLogoutCallback);

Details

This command is used to log out of a currently authenticated user session (this means that the Auth command has to be called first). In addition to logging out of the current session, the browser's local storage entries associated with Live Chat will be cleared and the widget will reload itself. This effectively means that the widget will reset itself to the default state.

Clear

Example usage

liveChat('clear', '85ea1938-f457-496d-8532-8fa489beea63', myClearCallback);

Details

This command is very similar to the Log out command. The difference is in the optional Widget ID argument. If the Widget ID is provided, the widget will clear its local storage and attempt to log out the user. If the Widget ID is not provided, the widget will clear its local storage and reload itself to the default state.

Show

Example usage

liveChat('show', null, myShowCallback);

Details

This command simply opens (shows) the widget itself, meaning the widget will expand if it is not expanded yet.

Hide

Example usage

liveChat('hide', null, myHideCallback);

Details

This command simply hides (closes) the widget itself, meaning the widget will collapse if it is not collapsed yet.

Show launcher

Example usage

liveChat('show_launcher', null, myShowLauncherCallback);

Details

This command simply shows the widget launcher, but it will not expand the widget itself.

Hide launcher

Example usage

liveChat('hide_launcher', null, myHideLauncherCallback);

Details

This command simply hides the widget launcher, which means that if the widget is expanded, it will collapse, and the launcher will also disappear.

Set theme

Example usage

liveChat('set_theme', 'dark');

Details

This command is useful for applying the theme by theme name. It is important to note that themes must be configured for the widget in the Infobip account, under Channels → Live Chat (opens in a new tab).