Implementation:FlowiseAI Flowise Leads

Knowledge Sources	FlowiseAI Flowise
Domains	Chatbot Configuration, Lead Management
Last Updated	2026-02-12 07:00 GMT

Overview

Leads is a React component that provides a configuration form for enabling and customizing the lead capture feature on a chatflow's chatbot widget.

Description

This component renders a configuration panel with a master "Enable Lead Capture" toggle switch and, when enabled, additional fields for customizing the lead form: a multiline "Form Title" input, a "Message after lead captured" success message input, and individual toggle switches for the Name, Email Address, and Phone form fields. The Save button is disabled when lead capture is enabled but no form fields are selected. On save, the component persists the leads configuration object into the chatflow's chatbotConfig via chatflowsApi.updateChatflow and dispatches SET_CHATFLOW to update Redux state. Default placeholder texts provide friendly example messages for the form title and success message.

Usage

Use this component within the chatflow settings panel to configure the lead capture form that appears to users before they begin chatting.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/extended/Leads.jsx
• Lines: 1-179

Signature

const Leads = ({ dialogProps }) => { ... }

Leads.propTypes = {
    dialogProps: PropTypes.object
}

export default Leads

Import

import Leads from '@/ui-component/extended/Leads'

I/O Contract

Inputs

Name	Type	Required	Description
dialogProps	object	Yes	Configuration object containing chatflow (object with id and chatbotConfig JSON string that may include a leads object with status, title, successMessage, name, email, and phone properties)

Outputs

Name	Type	Description
React Element	JSX.Element	Renders a form with toggle switches, text inputs, and a Save button for lead capture configuration

Usage Examples

Basic Usage

import Leads from '@/ui-component/extended/Leads'

const MyComponent = () => {
    const dialogProps = {
        chatflow: {
            id: 'chatflow-123',
            chatbotConfig: JSON.stringify({
                leads: {
                    status: true,
                    title: 'Welcome! Please tell us about yourself.',
                    successMessage: 'Thanks! How can I help?',
                    name: true,
                    email: true,
                    phone: false
                }
            })
        }
    }

    return <Leads dialogProps={dialogProps} />
}

Related Pages

• Principle:FlowiseAI_Flowise_Lead_Capture