Add a chat widget to your site

The ContactFire chat widget renders your form in a conversational style — one field at a time, like a chat interface. Paste one snippet. Works on any site.

What is the chat widget

Chat form

Your form fields appear as chat messages. The user answers each question and the conversation advances. Higher completion rates than traditional forms.

Live draft saving

Partial answers are saved as the user types. If they close the tab and come back, the form resumes where they left off.

Step 1 — Create the form

The chat widget uses the same forms you build in Form Studio.

Open Form Studio in your dashboard
Create a new form (or use an existing one)
In Form Settings, set Display mode to Chat
Add your fields — each becomes one chat message in sequence
Click Publish
Copy your Form ID from Form Settings (12-character code)

Chat mode works best with short single-answer fields: text, email, select, radio. Avoid long textareas or complex field groups in chat forms.

Step 2a — Astro component

If your site is built with Astro, download the pre-built component. It handles live draft saving and form resume out of the box.

Download the component

In your dashboard, open the form you just published
Click Embed Code in the toolbar
Select the Astro tab
Click Download — saves ContactFireForm.astro to your machine
Copy the file into your Astro project's src/components/ folder

Use it in a page

---
import ContactFireForm from '~/components/ContactFireForm.astro';
---

<main>
  <h1>Get in touch</h1>

  <ContactFireForm
    token="cf_embed_your_token_here"
    formId="your_form_public_id"
  />
</main>

The component is self-contained. It loads the ContactFire embed script, mounts the chat form widget, and manages the live draft session ID in browser storage.

Step 2b — JavaScript snippet

For any other site (HTML, React, Vue, WordPress, Webflow), use the JS snippet. Paste it anywhere in your HTML.

<!-- Container for the chat widget -->
<div id="cf-chat"></div>

<!-- Load the ContactFire embed script -->
<script
  src="https://my.contactfire.com/api/embed-script"
  data-token="cf_embed_your_token_here"
  data-form-id="your_form_public_id"
  data-mode="chat"
  data-container="#cf-chat"
  async
></script>

Chat-specific attributes

Attribute	Default	Description
data-mode	—	Set to "chat" to enable chat widget rendering
data-container	#cf-form	CSS selector for the mount element
data-token	—	Your embed token (required)
data-form-id	—	Your 12-character form public ID (required)

Configuration options

All chat widget configuration lives in Form Studio — the embed snippet picks it up automatically.

Welcome message

The first chat bubble the visitor sees

Form Settings → Welcome message

Bot name

Name shown above the chat (default: your form name)

Form Settings → Display name

Success message

What the chat shows after the user submits

Form Settings → Success message

Theme

Light, dark, or system (follows OS preference)

Form Settings → Appearance

Live draft saving

When enabled, ContactFire saves the user's progress to a draft submission as they type. If they close the tab and return, the chat resumes from where they stopped.

Visitor starts filling out the chat widget

After 10 seconds of inactivity, a partial submission appears in your Inbox → Live tab

If the visitor returns and submits, the draft becomes a full submission

If they never return, the partial submission stays in the Live tab so you can follow up

Enable live draft saving in Form Settings → Live Draft Saving. See Live Form Monitoring for full details.

Previous: Form Builder Next: Embed Tokens