Chat widget: Lead capture form

How to capture leads from a form on your own page and greet the visitor in the widget. Other topics: Installation, Pre-chat form, JavaScript API.

What it does

A lead capture form lives on your landing page. When a visitor submits it, Flutch:

1. Creates or links a visitor and saves their name, email, and phone.
2. Creates a contact, including any extra fields from the form.
3. Syncs the contact to your CRM (Twenty / МойКласс) when one is connected and enabled.
4. Shows a personalised greeting bubble next to the chat button.

The visitor's identity carries into the widget, so a follow-up chat is the same contact, not a fresh anonymous visitor. You need the widget already installed on the page.

No-code setup

Mark your form with data-flutch-lead — the widget handles the submit:

html
actions.copy
<form data-flutch-lead>
  <input name="name"  placeholder="Name" required />
  <input name="email" type="email" placeholder="Email" />
  <input name="phone" placeholder="Phone" />
  <input name="goal"  placeholder="Your goal" />
  <button type="submit">Sign up</button>
</form>

Fields map by their name: name (required, used in the greeting), email, phone, and any other field (like goal) is saved on the contact and sent to your CRM.

• data-flutch-greet="false" — capture the lead but skip the bubble.
• The form fires flutch:lead (success) and flutch:lead-error (failure) DOM events, so you can add your own thank-you screen or redirect.

Configure the greeting bubble

Set the bubble text per agent in Web channel → Landing form greeting, using {name} for the visitor's first name:

{name}, thanks! We got your request — let's pick a plan right now.

Optionally choose what a click does — open the chat, send a message, or open a link. Leave it empty and the lead is still captured, just without the bubble.

Custom integration

For full control — custom validation, multi-step forms, your own UI — submit the lead yourself and trigger the bubble:

html
actions.copy
<script>
  async function submitLead(name, email) {
    const res = await fetch("https://api.flutch.ai/public/widget/lead", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Widget-Key": "wp_your_public_key",
      },
      credentials: "include",
      body: JSON.stringify({ name, email, fields: { source: "hero-form" } }),
    });
    const data = await res.json();
    window.FlutchWidget?.greet({ name, identityToken: data.identityToken });
  }
</script>

The endpoint returns { "ok": true, "identityToken": "…" }. Pass that token to FlutchWidget.greet() so the chat continues as the contact you just created.

Submissions are restricted to your whitelisted domains — see Allowed domains & security.

Need help? Write to support@flutch.ai or use the support chat in the console.