Intelligent Form (React)
Add an intelligent form UI directly on a dedicated React powered page.
Overview
The Intelligent Form component is designed to help deflect support tickets at creation time in a tasteful way.
If the AI is confident, it'll attempt to deflect the user's question prior to ticket creation.
If it's not confident - it can still be helpful by taking a user's input and prefilling other parts of the form. Useful for simplifying your form while extracting structured information needed by your ticketing platform.
How It Works
- Primary Screen: Users enter their initial information (name, email, question/details)
- AI Deflection: The AI assistant analyzes the user's input
- If confident it can help: The user is shown an answer. They can continue to the secondary screen if it doesn't resolve their question.
- If not confident: User proceeds directly to the secondary screen
- Secondary Screen: Contains additional fields to collect structured information
- These fields can be automatically pre-filled by AI based on the user's initial input
- User reviews and confirms the information
- Submission: When the user submits the form, your custom callback function is triggered
- Your callback receives all form data and conversation context
- You can connect this to your ticketing system, CRM, or other backend systems
This flow aims to reduce support tickets in an elegant way that also simplifies the end-user experience.
Quick Start
Install the component library
Define the component
Props
Prop | Type | Required | Description |
---|---|---|---|
baseSettings | object | Yes | Core configuration settings. See Base Settings for details. |
formSettings | object | Yes | Form configuration settings. See below for details. |
Form Settings
The formSettings
object configures the behavior, layout, and functionality of the Intelligent Form widget. The form is divided into primary and secondary sections, with additional settings for success messages and submission handling.
Configuration Structure
Assistant Name
An optional name that's displayed in the form header:
Primary Section
The initial form fields that are always displayed to the user:
Property | Type | Required | Description |
---|---|---|---|
fields | IntelligentFormField[] | Yes | Array of form fields to display initially |
description | string | No | Optional description text shown above the fields |
Example
Secondary Section
Additional fields that can be conditionally shown, typically used for AI-enhanced form fields:
Property | Type | Required | Description |
---|---|---|---|
fields | IntelligentFormField[] | Yes | Array of form fields to display in the secondary section |
description | string | DescriptionObject | No | Description text or object with confidence-based messages |
Example
Form Fields
All form fields share these common properties:
Property | Type | Required | Description |
---|---|---|---|
name | string | Yes | Unique identifier for the field |
label | string | Yes | Display label for the field |
isRequired | boolean | No | Whether the field is required |
isHidden | boolean | No | Whether to hide the field |
description | string | No | Helper text shown below the field |
shouldPrefillWithAI | boolean | No | Determines if the field gets pre-generated by AI based on the user's initial query |
Text Field
Email Field
Textarea Field
Checkbox Field
Select Field
File Field
When using a file
field in your form, you may need to convert the files to Base64 before sending to your backend or an external API, this can be done by using the following snippet.
Success View
Configuration for the view shown after successful form submission:
Property | Type | Required | Description |
---|---|---|---|
heading | string | Yes | Success message heading |
message | string | Yes | Detailed success message |
icon | InkeepCustomIcon | No | Custom icon to display |
Example
Button Configuration
The buttons
property configures the form's submit button: