Beispiele

Das öffentliche SDK-Repository frontmail-dev/frontmail-js enthält im Verzeichnis examples/ ein lauffähiges Beispiel für jedes SDK. Jedes davon ist ein Kontaktformular mit Validierungsfehlern, einem Zustand für zurückgehaltene Nachrichten und Turnstile – derselbe Ablauf wie im Rezept zum Kontaktformular.

Beispiel	Stack	Zeigt
`examples/vanilla`	Reines HTML + `@frontmail/browser` (CDN)	`sendForm`, Turnstile, Dateianhang, Polling mit `getStatus`
`examples/react`	Vite + React + `@frontmail/react`	`FrontmailProvider`, `FrontmailForm`, `useSendEmail`, typisierte Parameter
`examples/react-native`	Expo + React Native + `@frontmail/react-native`	`FrontmailProvider`, `useSendEmail`, `TurnstileWebView`, `limitRate` mit AsyncStorage
`examples/vue`	Vite + Vue 3 + `@frontmail/vue`	Plugin, `<FrontmailForm>`, `useSendEmail`
`examples/svelte`	Vite + Svelte 5 + `@frontmail/svelte`	`createFrontmail`, `use:frontmailForm`
`examples/node`	Node.js + `@frontmail/node`	`send`, `sendBatch`, `history`, Idempotency Keys

Ein Beispiel starten

git clone https://github.com/frontmail-dev/frontmail-js.git
cd frontmail-js
corepack enable                 # pnpm 10
pnpm install
pnpm build                      # baut die SDKs, auf die die Beispiele verweisen
echo "VITE_FRONTMAIL_PUBLIC_KEY=pk_…" > examples/react/.env.local   # + Dienst-ID und Vorlagen-ID
pnpm --filter @frontmail/example-react dev

Die README jedes Beispiels nennt die Vorlagenparameter, die es erwartet. Am schnellsten kommen Sie zu einer passenden Vorlage über die Galerie – Kontaktformular.

Native Apps: Android (Kotlin), iOS (Swift) und Flutter

Die nativen SDKs haben eigene öffentliche Repositories und noch kein Beispielprojekt. Die Seite jedes SDKs führt aber Schritt für Schritt durch denselben Kontaktformular-Ablauf – Installation, Versand, der Zustand „zurückgehalten“, Zustellstatus und Turnstile in einer WebView – mit Code, den Sie direkt in Ihre App übernehmen können:

SDK	Repository	Zeigt
Android (Kotlin) – `dev.frontmail:frontmail`	`frontmail-dev/frontmail-kotlin`	`send` aus `viewModelScope`, `AcceptedStatus.HELD`, `getStatus`, Turnstile in einer `WebView`
iOS & Apple-Plattformen (Swift) – Paket `Frontmail`	`frontmail-dev/frontmail-swift`	`send` mit `async`/`await`, `.held`, Zustellstatus, Turnstile in einer `WKWebView` (SwiftUI + UIKit)
Flutter & Dart – `frontmail` auf pub.dev	`frontmail-dev/frontmail-flutter`	`send`, `DeliveryStatus.held`, Zustellstatus, Turnstile in `webview_flutter` (ein vollständiges Formular-Widget)

Alle SDKs setzen voraus, dass Mobile Apps erlauben eingeschaltet ist, und akzeptieren nur den öffentlichen Schlüssel. Für plattformübergreifende Apps gibt es @frontmail/react-native und das Projekt examples/react-native oben.

Snippets aus dem Dashboard

Jede Vorlagenseite im Dashboard hat einen Tab Snippets, der kopierfertigen Code für Vanilla JS, React, Vue, Svelte, Node und cURL erzeugt – mit Ihren IDs und allen Vorlagenparametern (samt Typen und Beispielwerten) bereits ausgefüllt.

Hinweise zu Frameworks

Next.js / Nuxt / SvelteKit: Senden Sie aus Client-Komponenten mit dem öffentlichen Schlüssel oder aus Server Actions / API-Routen mit dem privaten Schlüssel und @frontmail/node.
Static Site Generators (Astro, Hugo, Eleventy, Jekyll): Verwenden Sie den CDN-Build und sendForm.
WordPress und No-Code-Baukästen: Fügen Sie das CDN-Snippet in einen eigenen HTML-Block ein.
Mobile Apps: Verwenden Sie die nativen SDKs für Android (Kotlin), iOS (Swift) und Flutter oder @frontmail/react-native mit dem öffentlichen Schlüssel und schalten Sie Mobile Apps erlauben ein – oder rufen Sie die REST-API mit einem privaten Schlüssel aus Ihrem Backend auf. Ein privater Schlüssel gehört niemals in eine App.