This diagram shows the components of the chat widget.
An understanding of these components is essential to the use of our JavaScript API.
Components
Snippet Code
Every form has a snippet code associated with it. The chat widget will only become active on a website after adding this code to your website's source code.
Launcher
As indicated in the diagram, this component contains the avatar of the chat widget. This is the first component to appear on the site after the snippet code is loaded.
Widget
This refers to the popup modal that appears when the launcher is clicked and contains the conversation that you have scripted. Please note that in the embedded form, only this modal appears.
Welcome Message
The first question of your form, shown as a preview bubble above the Launcher before a visitor opens the widget. Clicking it opens the Widget with that question as the conversation's starting point.
Launcher Text
A custom greeting message shown next to the Launcher, in place of the Welcome Message. It's enabled through code via the launcherText setting, and only works when the Welcome Message is turned off.
Form ID
Every form is uniquely identified by an alpha-numeric constant. Example: 5b19cfc6c1c4a554898f53d4
Response
A response is a conversation between the user and the form. It can be Completed (the user finished) or Incomplete (the user dropped off partway). Both types are recorded and viewable under Results > Responses.
Global Variable
The API revolves around the global variable collectchat. All the methods and callbacks are invoked from this variable.
Use Cases
With the help of our JavaScript API, you can perform the following:
Accept parameters from Email Campaigns to identify a user ↗️
Add custom data to the response for a logged in user ↗️
Customise the welcome message shown to visitors ↗️
Create webpage interactions based on how the user interacts with the form ↗️
Push analytical information to custom tools using callbacks ↗️
Have multiple forms on the same webpage ↗️
Remove the welcome message for repeating visitors ↗️
If you have found another use case, please share it with us.
What's Next: Continue to Initializing.