Widget

The Widget component provides a flexible framework for integrating interactive UI elements into agent workflows. It enables agents to display, manipulate, and retrieve data from various custom widget types directly within chat interfaces. The component serves as a bridge between agent logic and UI interactions, allowing developers to create rich, interactive experiences such as forms, visualizations, selection interfaces, and dynamic content displays. With simple dropdown selection instead of manual ID entry, built-in methods for data operations, and event handling capabilities, the Widget component streamlines the implementation of complex user interfaces and makes them easily accessible within conversation flows.

Skill Level

Basic understanding of Agent's Client Side APIs and widget concepts, with the ability to implement simple JavaScript for data handling.

How to use

Overview

The Widget component allows you to add interactive elements to your agent's chat interface. You select from existing widgets in the dropdown or create your own using the UI Builder. These widgets appear in the chat and let users interact with your agent through forms, buttons, and other visual elements. You can display these widgets, collect user inputs, and use the data in your agent's workflow.

Input

Methods

Events

Typical Chaining of Components

Source Components

Target Components

Implementation Example

Follow this step to implement the Widget component in your agent flow:

1. Drag the Widget component from the component palette to your design canvas.

2. Select the required widget from the dropdown menu instead of manually entering the widget ID.

3. Configure any necessary data mappings between the widget and other components.

To prepare data for a widget, use a Custom Script component with code as follows:

// Store data in agent state for widget to accessthis.agent.data["widgetData"] = [ { id: 1, name: "Item 1", value: 100 }, { id: 2, name: "Item 2", value: 200 }, { id: 3, name: "Item 3", value: 300 } ];

In your widget's onLoad event, add this script to retrieve the data:

// Access data from agent state data.items = component.getAgent()?.getActiveAgent()?.parent?.data?.widgetData || []; // Log data for debuggingconsole.log("Widget data loaded:", data.items);

The above code uses several agent methods to access data:

• component.getAgent() - Returns the agent instance for the current UI component.

• getActiveAgent() - Gets the current active agent controlling the UI.

• parent - Accesses the parent agent that started this agent.

• data - Accesses the agent data object (key-value pairs storage).

For more detailed information about agent methods and properties, see Agent API Documentation.

Best Practices

• Widget Creation: Before using this component, ensure that you have created the required widget in Contineo's UI Builder. If you need help creating widgets, see Widget Creation Documentation.

• Data Management: Store data in the agent data using this.agent.data["variableName"] = value for widgets to access.

• Descriptive Naming: Use descriptive names for widgets to make them easier to identify in the dropdown.

• Data Access: Properly handle data returned from widgets to ensure smooth workflow execution.

• Testing: Test different widget interactions thoroughly to ensure they behave as expected.

Common Use Cases