Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Document the pre-chat form

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#70 5 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@masyarakatai arbeitet bereits daran.

Seit 16.10.2026.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
88/100
Issue-Typ
Dokumentation
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
typescript
Bereich
documentation

Rechercherichtung

Lies packages/widget/src/widget.ts und packages/widget/src/dom/prechat-form.ts, um die Konfiguration und das Verhalten zu verstehen, und sieh dir dann packages/widget/dev.html als Beispiel an. Füge website/src/content/docs/widget/pre-chat-form.mdx hinzu und aktualisiere website/src/content/docs/widget/configuration.mdx sowie die Seitenleiste in website/astro.config.mjs; fertig bist du, wenn die aufgeführten Optionen, das Verhalten, die Ereignisse und die Callbacks dokumentiert sind und pnpm --filter @chatcops/website build erfolgreich ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

documentation good first issue hacktoberfest widget

The widget now has a configurable pre-chat form that collects details like name and email before the conversation starts. It shipped in @chatcops/widget 0.4.0, but the docs site only mentions it in the request schema on the Server Setup page. The WidgetConfig reference on the Configuration page also leaves out preChatForm, onLeadCaptured and onPreChatSubmit.

Where to look

  • packages/widget/src/widget.ts (PreChatField, PreChatFormConfig, WidgetConfig, handlePreChatSubmit, showChatView)
  • packages/widget/src/dom/prechat-form.ts (field types and validation)
  • packages/widget/dev.html (a working example config)
  • website/src/content/docs/widget/configuration.mdx
  • website/astro.config.mjs (sidebar)

Acceptance criteria

  • New page website/src/content/docs/widget/pre-chat-form.mdx, added to the Widget section of the sidebar
  • Documents enabled, title, subtitle, submitLabel, and each field option: name, type (text, email, select or textarea), label, placeholder, required, options
  • Explains how the form behaves:
    • it only shows when there is no saved conversation and it hasn't been submitted in this browser session
    • required fields and email format are validated
    • a field named name personalizes the welcome message
    • a field named message is sent as the first chat message
    • answers go to the server as userData (up to 50 fields, names up to 100 characters, each value up to 500 characters) with the next chat request, and are re-sent if that request fails
    • the server saves the answers with the conversation's first message and uses the saved ones from then on, so later requests can't change them. The server's preChatFields option (packages/server/src/config.ts:45) keeps only the listed fields. Link to it on the Server Setup page instead of documenting it again
  • Documents onPreChatSubmit and the preChatSubmit event
  • Notes that the form can only be configured from JavaScript (there are no data-* attributes for it)
  • WidgetConfig in configuration.mdx includes preChatForm, onLeadCaptured and onPreChatSubmit
  • pnpm --filter @chatcops/website build succeeds
  • Docs only, no changeset needed

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off dev, and open your PR against dev with Closes #<this issue number>. Setup notes (pnpm, build before test) are in CONTRIBUTING.md.

Vorherrschende Sprache
TypeScript
Sterne
13
Forks
7
Ø Merge
3 Std. 41 Min.
Gemergte PRs (30 T.)
155

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus codercops/chatcops

Alle Issues in codercops/chatcops

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.