Passing Form Context from React or Next.js

Last updated: August 11, 2026

Use a client-side submit handler to pass selected React or Next.js form values to Docket before starting the Marketing Agent.

Before You Begin

  • Install the Docket widget script in the application layout or page.

  • Configure the matching fields under Agent > Dynamic Context Ingestion.

  • Keep widget calls in a Client Component. Do not access window during server rendering.

Create a Client-Side Form

'use client';

import { FormEvent, useState } from 'react';

export function DemoRequestForm() {
  const [error, setError] = useState('');

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError('');

    if (!window.AISeller?.setContext || !window.AISeller?.showAndConnect) {
      setError('The conversation experience is still loading.');
      return;
    }

    const form = new FormData(event.currentTarget);
    const result = await window.AISeller.setContext({
      name: String(form.get('name') || ''),
      email: String(form.get('email') || ''),
      company: String(form.get('company') || '')
    });

    if (!result.success) {
      setError(result.message);
      return;
    }

    window.AISeller.showAndConnect();
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" autoComplete="name" required />
      <input name="email" type="email" autoComplete="email" required />
      <input name="company" autoComplete="organization" />
      <button type="submit">Talk to Sales</button>
      {error ? <p role="alert">{error}</p> : null}
    </form>
  );
}

Map fields explicitly. FormData can contain File objects, while Docket accepts only strings, numbers, booleans, or null as context values.

Add TypeScript Types

Add the methods you use to your application types:

declare global {
  interface Window {
    AISeller?: {
      setContext(data: Record<string, string | number | boolean | null>): Promise<{
        success: boolean;
        message: string;
      }>;
      resetContext(): Promise<{ success: boolean; message: string }>;
      showAndConnect(): void;
    };
  }
}

Reset on Logout

Call resetContext() from the client-side logout flow before the next visitor can start a conversation.

await window.AISeller?.resetContext();

Verify the Integration

  1. Load the page in a private browser window.

  2. Confirm the Docket script finishes loading.

  3. Submit documentation-only values.

  4. Confirm the widget opens only after setContext() returns success: true.

  5. Verify the agent uses the configured fields.

  6. Test client-side route changes and logout behavior.

Troubleshooting

Problem

What to check

window is not defined

Move the code to a Client Component and call it only from an event handler or effect.

AISeller methods are unavailable

Confirm the widget script is loaded before enabling the form action.

setContext() returns success: false

Remove files, arrays, nested objects, dates, and undefined values.

The form navigates before context is stored

Call preventDefault() and await setContext().

Old visitor values appear after logout

Await resetContext() in the client-side logout flow.

Related Articles