Chat Widget SDK Reference

FrontChat('init', options)

By default, the chat launcher will become visible immediately after the page loads. This is not always desirable if you want to use an alternative button or delay when the chat becomes available. If you don't call the init method, useDefaultLauncher will be true by default.

Note: You should only call init once per page load unless you are using the shutdown method.

 FrontChat('init', {
    useDefaultLauncher: false // optional
  });

Options you can pass through init

  • shouldShowWindowOnLaunch
    Automatically opens the chat window on initialization.
  • shouldExpandOnShowWindow
    Opens the chat in the expanded state by default.
  • shouldHideCloseButton
    Ensures that the close chevron button is hidden on initialization.
  • shouldHideExpandButton
    Ensures that the Expand button is hidden on initialization.
  • welcomeMessageAppearance
    By default, the welcome message is displayed upon initialization. If you include this option with the value hidden, the welcome message is hidden on initialization.
  • isMobileWebview
    Indicates to the widget that it has been launched in a mobile webview. For now, this automatically prevents the attachments button from attempting to open the file in a new window, and instead fallbacks to a normal file download.
  • useDefaultLauncher
    By default, the chat launcher will become visible immediately after the page loads. This is not always desirable if you want to use an alternative button or delay when the chat becomes available. If a useDefaultLauncher parameter is not included in the options, it will be true by default.
  • onInitCompleted
    This is a callback function that will be run once the chat application has fully initialized. This can be used to ensure that subsequent SDK commands are only run once the chat widget is ready to begin receiving them.
  • Verified identity options

All of the options shown are optional. The snippet below displays the default values.

FrontChat('init', {
  useDefaultLauncher: true, // optional
  shouldShowWindowOnLaunch: false, // optional
  shouldHideCloseButton: false, // optional
  isMobileWebview: false, // optional
  welcomeMessageAppearance: 'hidden', //optional
  onInitCompleted: () => console.log('initialized') // optional
});

FrontChat('shutdown', options)

You can use shutdown to remove the chat widget from your page after starting it. The chat widget will disappear from the page until init is called again (or the page is reloaded). If the chat widget is reinitialized later, the previous conversation will be resumed.

 FrontChat('shutdown');

Shutdown and clear session

When calling shutdown, you can optionally clear the existing chat session. This will remove the Front Chat cookies associated with the chat session and clear any previously supplied identity information. Any initialization call after clearing the session will begin a fresh conversation.

 FrontChat('shutdown', {clearSession: true});

FrontChat('show')

This will open the main FrontChat messenger panel.

FrontChat('show');

FrontChat('hide')

This will close the main FrontChat messenger panel. If useDefaultLancher was set to false, the launcher will not appear.

FrontChat('hide');

FrontChat('onUnreadChange', handler)

This method allows you to register a function (the handler) that will be called when the current number of unread messages changes. The handler is expected to be a function that will receive an object like {unread_count: 1} as its first parameter. The handler will always be called immediately to pass an initial value.

It will return an unbind function that you can call to unregister the handler.

const unbind = FrontChat('onUnreadChange', handler);

FrontChat('onInboundMessageReceived', handler)

This method allows you to register a function (the handler) that will be called when an inbound message arrives at the chat widget. The handler is expected to be a function that has no parameters.

It will return an unbind function that you can call to unregister the handler.

const unbind = FrontChat('onInboundMessageReceived', handler);

Accessing chat messages through the Core API

Like all communication channels in Front, messages sent and received through Front Chat can be accessed through the Core API . The Message object for Front Chat messages also includes a metadata.chat_visitor_url property that denotes the URL that the chat visitor was on when they sent the message. Front Chat messages sent by Front users do not contain this property.

FrontChat('onWindowVisibilityChanged', handler)

This method allows you to register a function (the handler) that will be called when the visibility of the chat window changes. The handler is expected to be a function that will receive an object like {is_window_visible: 1} as its first parameter. The handler will always be called immediately to pass an initial value.

It will return an unbind function that you can call to unregister the handler.

const unbind = FrontChat('onWindowVisibilityChanged', handler);