Properties

The Chat Component can be customized by configuring various properties or adding events to perform specific actions. To learn how to build a chatbot, refer to the Chat Component Overview guide. For more information on CSAs and Exposed Variables, check out the Component Specific Actions guide.

Properties

Property	Description	Expected Value
Chat Title	Title of the chat component.	String (e.g. ToolJet Support Chatbot)
Initial Chat	Initial messages to be loaded when the chat starts.	Array of Objects ( e.g. {{[ { message: 'Hey! Welcome to ToolJet. How may I help you?' } ]}} )
User Name	Defines the user's name.	String (e.g. John Doe)
User Avatar	Defines the user's avatar.	Image URL
Respondent Name	Defines the respondent's name.	String (e.g. ToolJet Bot)
Respondent Avatar	Defines the respondent's avatar.	Image URL

Message Object Properties

Property	Description	Required	Expected Value
Message	The content of the message.	Required	String (e.g. "Hey! How can I help you?")
Message ID	ID of the message.	Auto-generated	String (e.g. "e3dd6f60-d5e8-46c5-b73b-006f2f4a34f2")
Timestamp	Date and Time of the message.	Auto-generated	DateTime in ISO 8601 format (e.g. "2025-02-05T09:33:32.468Z")
Name	Message sender's name.	Optional	String (e.g. "John Doe")
Avatar	Message sender's avatar.	Optional	Image URL
Type	Type of the message.	Required	Accepted Values: "response", "message" or "error".

Events

Event	Description
On history cleared	Triggers whenever the history is cleared.
On message sent	Triggers whenever a message is sent.

Additional Actions

All the following actions can be enabled or disabled either by using the toggle switch or by dynamically configuring the value by clicking on fx and entering a logical expression.

Action	Description
Visibility	Controls the component's visibility.
Disable input state	Enables or disables the input state.
Histroy loading state	Enables the history loading state, often used with isLoading to indicate progress.
Response loading state	Enables the response loading state, often used with isLoading to indicate progress.
Enable clear history button	Enables or disables the clear history button.
Enable download history button	Enables or disables the delete history button.

Devices

Property	Description	Expected Value
Show on desktop	Makes the component visible in desktop view.	You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Show on mobile	Makes the component visible in mobile view.	You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Styles

Message

Property	Description	Configuration Options
Name	Sets the color for the sender's name.	Select a color from the color picker or set it programmatically using fx.
Message	Sets the color for the message text.	Select a color from the color picker or set it programmatically using fx.
Timestamp	Sets the color for the timestamp.	Select a color from the color picker or set it programmatically using fx.

Field

Property	Description	Configuration Options
Background	Sets the background color of the input field.	Select a color from the color picker or set it programmatically using fx.
Border	Sets the border color of the input field.	Select a color from the color picker or set it programmatically using fx.
Accent	Sets the accent color of the input field.	Select a color from the color picker or set it programmatically using fx.
Text	Sets the text color of the input field.	Select a color from the color picker or set it programmatically using fx.
Send icon	Sets the color of the send icon.	Select a color from the color picker or set it programmatically using fx.

Container

Property	Description	Configuration Options
Background	Sets the background color of the chat container.	Select a color from the color picker or set it programmatically using fx.
Border	Sets the border color of the chat container.	Select a color from the color picker or set it programmatically using fx.
Box shadow	Sets the box shadow color of the chat container.	Select a color from the color picker or set it programmatically using fx.
Border radius	Sets the corner radius of the chat container.	Enter a numeric value (default: 6) or set it programmatically using fx.

info

Any property having fx button next to its field can be programmatically configured.