Overview

Front Chat Widget

The Front Chat Widget is a chat box Front built that opens up to your site's visitors so they can get real time help from you and your team. Front makes it easy for you to host the widget on your web or desktop app and then manage those conversations in Front.

Installation

Enabling the Front Chat Widget on your Website

For instructions on how to enable the Front Chat Widget on your website, please read our article on Using Front Chat documentation.

Enabling the Front Chat Widget in a Mobile App

To install the Front Chat Widget in a mobile app, you'll need to leverage a web view. Refer to Install the Chat Widget in a Mobile App for details.

How the Front Chat Widget works

Under the hood, Front Chat launches on your webpage in two steps:

1. Running the chat.bundle.js script, which instantiates the Front Chat SDK on your webpage. Once the script has finished running, the window.FrontChat function will be available to interact with the SDK and pass commands to the chat widget.
2. Calling window.FrontChat(‘init’, {chatId, …options}) to initialize the chat widget. This will:
   1. Create an iframe and load the chat widget application inside.
   2. Connect the SDK to the internal application, allowing commands to be passed through the iframe layer to the chat widget.
   3. Launch the chat application using the options provided in the init command.

When running Front Chat on your webpage, the Front Chat widget is instantiated in an iframe so that its runtime is isolated from your webpage or application. This means that you can apply stylesheets and run your application without affecting the chat widget. Also, this modularity ensures that Front can push updates to the chat widget while ensuring that it will not inadvertently affect your content.

The modularity of iframes does mean that additional effort is required to manually interact with the behavior of the chat widget while not using the official SDK commands. Rather than circumvent the iframe barrier to achieve custom behaviors, we recommend reaching out to Front with requests for product changes on our community, as we can only guarantee that the official ways of using the SDK will remain supported in the future.

Using Front Chat

Once the chat is installed on your website, the FrontChat Javascript object will become available. This object responds to a few methods that allow you to manipulate the chat window. Learn more at Chat Widget SDK Reference.