# Introduction

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
[https://collect.chat/help/article/1004-how-to-add-chat-widget-to-website] 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
[https://collect.chat/help/article/1005-how-to-embed-your-form-in-a-webpage]
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
[https://collect.chat/help/article/1124-where-can-i-see-my-form-id] 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
[https://collect.chat/help/article/1104-what-is-a-response].



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 ↗️
   [https://collect.chat/help/article/1110-identify-a-user-in-email-or-sms-campaigns]

 * Add custom data to the response for a logged in user ↗️
   [https://collect.chat/help/article/1112-add-custom-data-in-your-form-response]

 * Customise the welcome message shown to visitors ↗️
   [https://collect.chat/help/article/1063-how-to-add-a-welcome-message-to-your-chat-widget]

 * Create webpage interactions based on how the user interacts with the form ↗️
   [https://collect.chat/help/article/1062-how-to-redirect-to-a-url-based-on-user-choice]

 * Push analytical information to custom tools using callbacks ↗️
   [https://collect.chat/help/article/1113-track-your-form-using-custom-analytics]

 * Have multiple forms on the same webpage ↗️
   [https://collect.chat/help/article/1111-load-a-new-form-on-the-same-webpage]

 * Remove the welcome message for repeating visitors ↗️
   [https://collect.chat/help/article/1123-hide-welcome-message-for-repeating-visitors]

If you have found another use case, please share it with us
[developers@collect.chat].

What's Next: Continue to Initializing
[https://collect.chat/help/developer/article/1179].