Component Specific Actions & Exposed Variables
This guide covers component-specific actions for the Chat Component and its exposed variables. To learn how to build a chatbot, refer to the Chat Component Overview guide. For more information on Chat Component Properties, check out the Properties guide.
Component Specific Actions (CSA)​
Action | Description | How to Access |
|---|---|---|
| sendMessage( ) | Sends a message in the chat. | Employ a RunJS query (for e.g. components.chat1.sendMessage({message: "Hey! How can I help you?", type: "response"}))Â or trigger it using an event. |
| clearHistory( ) | Resets the chat history to the Initial chat value. | Employ a RunJS query (for e.g. components.chat1.clearHistory())Â or trigger it using an event. |
| downloadChat( ) | Download the chat in JSON format. | Employ a RunJS query (for e.g. components.chat1.downloadChat())Â or trigger it using an event. |
| setHistory( ) | Sets the chat history. | Employ a RunJS query (for e.g. components.chat1.setHistory(History Object))Â or trigger it using an event. |
| appendHistory( ) | Appends chat history. | Employ a RunJS query (for e.g. components.chat1.appendHistory(Message Object))Â or trigger it using an event. |
| setResponderAvatar( ) | Sets Responder's Avatar. | Employ a RunJS query (for e.g. components.chat1.setResponderAvatar(Image URL))Â or trigger it using an event. |
| setUserAvatar( ) | Sets User's Avatar. | Employ a RunJS query (for e.g. components.chat1.setUserAvatar(Image URL))Â or trigger it using an event. |
| setVisibility( ) | Shows or hides the component. | Employ a RunJS query (for e.g. components.chat1.setVisibility(false)) or trigger it using an event. |
| setInputDisable( ) | Disables or enables the message input and send button. It can't enable the input while the Disable input state property is on. | Employ a RunJS query (for e.g. components.chat1.setInputDisable(true)) or trigger it using an event. |
| setError( ) | Shows an error message after the chat history. It isn't added to history, and is removed when the history changes. Defaults to Some error occurred. Please retry. | Employ a RunJS query (for e.g. components.chat1.setError("Something went wrong")) or trigger it using an event. |
| setResponseLoading( ) | Shows a typing indicator for the respondent. Messages can't be sent while it's on. | Employ a RunJS query (for e.g. components.chat1.setResponseLoading(true)) or trigger it using an event. |
| setHistoryLoading( ) | Shows a loading state in place of the chat history. | Employ a RunJS query (for e.g. components.chat1.setHistoryLoading(true)) or trigger it using an event. |
sendMessage() and clearHistory() called from a query or event don't trigger the On message sent and On history cleared events.
Exposed Variables​
| Variable | Description | How to Access |
|---|---|---|
| history | Access the chat history. | Accessible dynamically with JS (for e.g., {{components.chat1.history}}). |
| isHistoryLoading | Indicates if the history is loading. | Accessible dynamically with JS (for e.g., {{components.chat1.isHistoryLoading}}). |
| isResponseLoading | Indicates if the response is loading. | Accessible dynamically with JS (for e.g., {{components.chat1.isResponseLoading}}). |
| isInputDisabled | Indicates if the input is disabled. | Accessible dynamically with JS (for e.g., {{components.chat1.isInputDisabled}}). |
| isVisible | Indicates if the component is visible. | Accessible dynamically with JS (for e.g., {{components.chat1.isVisible}}). |
| lastMessage | Holds the last message object of type message in the array. | Accessible dynamically with JS (for e.g., {{components.chat1.lastMessage}}). |
| lastResponse | Holds the last message object of type response in the array. | Accessible dynamically with JS (for e.g., {{components.chat1.lastResponse}}). |