Forms (Form Concierge)

A Form Concierge is a form you embed on your site with a chat assistant attached to it. Visitors fill in the fields you ask for, and a Help handle on the edge of the form opens a drawer where they can ask questions without losing their place. When they submit, the form creates a lead and the concierge picks up the conversation.

It solves the usual trade-off with contact forms. A short form converts better but tells you nothing; a long form qualifies well but scares people off. Here the form stays short and the concierge collects the rest conversationally — while also answering the questions that would otherwise send a visitor off to hunt through your site.

Forms live on their own admin page, separate from web agents.

Form Concierge vs. a web agent

The important behavioral difference is the third row. A web agent can withhold an answer until it gets a critical field. A Form Concierge never does that, because the form is where required capture happens — so the chat is free to be genuinely helpful while the visitor is still deciding whether to submit.

Setup at a glance

1. Create the Form Concierge and point it at a knowledge base.
2. Add your fields, deciding which appear on the form and which the concierge asks for later.
3. Write the headline, subtitle, submit label, and post-submit handoff message.
4. Add Q&A pairs for anything that needs a word-for-word answer.
5. Test the form and the drawer in the Test tab.
6. Restrict allowed domains, then copy the snippet from Deploy onto your page.

1. Create a Form Concierge

Open Forms in the admin navigation and click New Form Concierge.

New forms are created with sensible defaults: a Submit button, a post-submit handoff message, auto-open chat on submit, and a right-side chat drawer. All of those are editable on the Form tab.

2. Build the form

Everything on the Form tab saves as you go — text fields save when you click out of them, switches and dropdowns save immediately.

Copy and behavior

Fields, and where they live

Fields are split into two sections, and choosing the section is the main decision you make on this tab.

• On the form — fields visitors fill in before they submit. These render on the form card, and required ones are enforced on submit.
• Concierge can ask (not on form) — fields that never render on the form. Chat collects them later, in conversation.

Use the up and down arrows on each row to move a field between the two sections. Required toggles inline on form fields.

The section, along with the required flag, also sets how insistently the concierge pursues a field in chat:

Adding a field

Add field on either section opens the editor.

Use the pencil icon to edit a field later, and the trash icon to remove it.

3. Set up the concierge

The Concierge tab controls the chat side.

The same division of labor as any agent applies: the system prompt is for behavior, the knowledge base is for facts, and Q&A pairs are for wording you cannot let drift. See Knowledge Management for getting content indexed.

4. Q&A pairs

The Q&A Pairs tab manages verbatim answers for this concierge — the same mechanism described in Agent Configuration, available here so you can maintain them without leaving the form.

Each pair has a Question, an Answer, and optional Keywords (comma- or newline-separated). Use the pencil icon to edit an existing pair and the trash icon to delete it.

A pair wins over a generated answer when the visitor's message exactly matches the question, matches one of your keywords, or is a strong paraphrase of the question. Matching is deliberately conservative, so a loosely related question will not trigger a compliance or policy answer by accident.

5. Test it

The Test tab renders the real form and the real drawer: fill in fields, pull the Help handle, submit, and watch the handoff. Reset test clears the form, the chat, and the test conversation.

The Test tab mirrors live behavior with two intentional differences: it skips the allowed-domains check, so you can test before your site is configured, and it does not use the returning-visitor memory that the public embed keeps in the browser. State is preserved only within the current test conversation.

6. Deploy

Settings

Visitor preview gives you a rough sense of the layout. It always draws the drawer on the right regardless of your Chat drawer position setting — use the Test tab to check the real position.

The snippet

Unlike a web agent snippet, the form snippet is paste-once: it includes the mount div, so the whole block goes wherever you want the form to appear on the page.

<!-- YouEx.ai Chat Widget -->
<div id="youex-form-concierge"></div>
<script src="https://engage.youex.ai/embed/youex-widget.js?v=1.1.13"></script>
<script>
  YouExWidget.create({
    agentId: "YOUR_FORM_ID",
    apiBaseUrl: "https://engage.youex.ai",
    position: "bottom-right",
    placement: "hero",
    width: "640px",
    height: "640px",
    launcherStyle: "icon",
    mountId: "youex-form-concierge",
    chatBackgroundColor: "#ffffff",
    chatAccentColor: "#e5e7eb",
    promptTheme: "dark",
    heroMaxHeight: "",
    launcherText: "Ask me anything...",
    launcherTextSizePx: 28,
    promptTextColor: ""
  });
</script>

Copy the real snippet from the Deploy tab rather than adapting this example — it carries your form's id, colors, and mount id.

The form sizes itself to your layout, and it does not inherit your page's text styling: alignment, capitalization, and letter spacing from a surrounding hero or centered section will not distort the form's labels.

Allowed domains

How entries are matched:

A blocked page gets a 403 with Origin not allowed for this agent. If your form works on example.com but not www.example.com, this is why — use the wildcard form.

Content Security Policy

If the host page sends a Content Security Policy, allow YouEx in that policy or the snippet will not run. Full directive table: Agent Configuration → Content Security Policy.

Minimum for a form with chat:

script-src  https://engage.youex.ai https://youex.ai
connect-src https://engage.youex.ai https://youex.ai

If the form has a PDF (file) field, the browser uploads to S3 after YouEx presigns the request. Also add:

https://youex-engage-workspace-private.s3.us-east-1.amazonaws.com
https://*.s3.us-east-1.amazonaws.com

to connect-src. Without those hosts, Choose file looks fine and the upload fails. That is a host CSP (or S3 CORS) issue, not an Allowed domains issue.

What happens when a visitor submits

1. Only the fields on the form are validated. Required ones must be filled, and each value must match its field type.
2. A Lead is created or updated, with lead type website_form and source Form Concierge. It appears in the CRM like any other lead — see Working CRM Records. Filtering on that source is the cleanest way to see what a form is producing.
3. A Conversation is created, or the pre-submit chat conversation is reused, so a visitor who chatted first does not end up split across two threads.
4. The submitted values are recorded as trusted — they came from a real submit rather than from the browser — and are used for personalization and for anything gated on collected info.
5. Your Post-submit chat message is posted, and the drawer opens if Auto-open chat on submit is on.

Two things worth knowing:

• Opening Help is not submitting. A visitor can chat as long as they like without the form counting as submitted. Chat may still create a lead from what they share, as a normal chat lead.
• A duplicate submit is harmless. Re-submitting the same conversation succeeds without posting the handoff message twice.

What visitors see

The Help handle sits on the edge you configured and is the only control in the form's chrome — it opens the drawer when closed and closes it when open. Clicking the dimmed area over the form dismisses the drawer too, as does the Escape key. Side drawers cover part of the form and leave the rest visible; top and bottom drawers cover roughly two-thirds of its height. The form itself never moves.

Because the form stays put behind the drawer, a visitor can open Help mid-way through filling it in, get an answer, and close it without losing what they typed.

Chat fills in the form

When the concierge collects something in chat that also appears on the form, it writes the value into the visible field, so a visitor is never asked the same thing twice.

The rules are conservative:

• Anything the visitor already typed is left alone.
• A value that fails its field's own validation is skipped, rather than dropped into the input for the visitor to fix.
• Select values resolve back to your configured option regardless of casing — "demo" fills in Demo.

This is a convenience only. Values painted into the form still have to pass validation on submit like anything else.

Limits and validation

Field validation

Visitors see Please fill in all required fields. for empty required fields. Values that fail a type check come back from the server as Invalid form field values.

Chat and rate limits

Best practices

• Put no more than three or four fields on the form, and move the rest to Concierge can ask.
• Make the Post-submit chat message open a door: "Want me to walk you through pricing while you're here?" beats "Thanks, we'll be in touch."
• Add Q&A pairs for the objections and policy questions that come up before someone is willing to submit. Those are exactly the questions a form alone loses.
• Put the form on the page where the intent is, not only on a generic contact page.
• Test on staging with allowed domains set, in a real browser, before going live.
• Review real conversations afterward and fold recurring questions back into knowledge or Q&A pairs — see Testing, Deployment, and Conversations.

Troubleshooting