Skip to main content

Custom Widget

Displays a custom React component widget in chat interfaces.

Common Properties​

  • Name - The custom name of the node.
  • Color - The custom color of the node.
  • Delay Before (sec) - Waits in seconds before executing the node.
  • Delay After (sec) - Waits in seconds after executing node.
  • Continue On Error - Automation will continue regardless of any error. The default value is false.
info

If the ContinueOnError property is true, no error is caught when the project is executed, even if a Catch node is used.

Inputs​

  • Session Id - Unique identifier for the UI client connection.
  • Widget Data - Data object to render input fields default values.

Options​

  • Mode - Specifies the widget mode. Can be either "Interactive" or "Static".
  • Widget content in React Component format - The React component code for the custom widget.

Output​

  • Result - User interaction result from the custom widget (only in Interactive mode).

How It Works​

The Custom Widget node creates a custom React component widget for display in chat interfaces. When executed, the node:

  1. Validates the provided Session ID
  2. Retrieves the widget data
  3. Creates a custom widget with the provided React component code and data
  4. Sends the widget to the client with the specified session ID
  5. In Interactive mode, waits for user interaction
  6. Parses the response as JSON or string
  7. Returns the parsed result as the output

Requirements​

  • A valid session ID for an active client connection
  • Properly configured client interface that can handle custom widgets
  • Valid React component code for the widget content

Error Handling​

The node will return specific errors in the following cases:

  • Empty or invalid Session ID
  • Session not found for the provided ID
  • Failed to send widget to client
  • Timeout while waiting for user interaction (in Interactive mode)
  • Failed to parse user response (in Interactive mode)

Usage Notes​

  • The Session ID must match an active client connection
  • The Widget Data input provides default values for input fields in the custom widget
  • In Interactive mode, the widget can receive user input and return results
  • In Static mode, the widget only displays information without user interaction
  • The returned result will be in the format provided by the client (JSON or string)
  • Custom widgets must be written as valid React components