Przykłady

Publiczne repozytorium SDK frontmail-dev/frontmail-js zawiera w katalogu examples/ działający przykład dla każdego SDK. Każdy to formularz kontaktowy z błędami walidacji, stanem wstrzymanej wiadomości i Turnstile – ten sam przepływ co w poradniku o formularzu kontaktowym.

Przykład	Stos	Pokazuje
examples/vanilla	Czysty HTML + @frontmail/browser (CDN)	sendForm, Turnstile, załącznik, odpytywanie getStatus
examples/react	Vite + React + @frontmail/react	FrontmailProvider, FrontmailForm, useSendEmail, typowane parametry
examples/react-native	Expo + React Native + @frontmail/react-native	FrontmailProvider, useSendEmail, TurnstileWebView, limitRate z 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, klucze idempotencji

Uruchomienie przykładu

git clone https://github.com/frontmail-dev/frontmail-js.git
cd frontmail-js
corepack enable                 # pnpm 10
pnpm install
pnpm build                      # zbuduje SDK, z których korzystają przykłady
echo "VITE_FRONTMAIL_PUBLIC_KEY=pk_…" > examples/react/.env.local   # + ID usługi i ID szablonu
pnpm --filter @frontmail/example-react dev

README każdego przykładu wymienia parametry szablonu, których oczekuje. Najszybciej zdobędziesz pasujący szablon, biorąc z galerii Formularz kontaktowy.

Aplikacje natywne: Android (Kotlin), iOS (Swift) i Flutter

Natywne SDK mają własne publiczne repozytoria i nie mają jeszcze przykładowego projektu. Strona każdego SDK przeprowadza krok po kroku przez ten sam formularz kontaktowy – instalacja, wysyłka, stan wstrzymania, status doręczenia i Turnstile w WebView – z kodem, który wkleisz do swojej aplikacji:

SDK	Repozytorium	Pokazuje
Android (Kotlin) – dev.frontmail:frontmail	frontmail-dev/frontmail-kotlin	send z viewModelScope, AcceptedStatus.HELD, getStatus, Turnstile w WebView
iOS i platformy Apple (Swift) – pakiet Frontmail	frontmail-dev/frontmail-swift	send z async/await, .held, status doręczenia, Turnstile w WKWebView (SwiftUI + UIKit)
Flutter i Dart – frontmail na pub.dev	frontmail-dev/frontmail-flutter	send, DeliveryStatus.held, status doręczenia, Turnstile w webview_flutter (kompletny widget z formularzem)

Wszystkie wymagają włączonego Zezwól na aplikacje mobilne i akceptują tylko klucz publiczny. Aplikacje wieloplatformowe mogą użyć @frontmail/react-native i projektu examples/react-native powyżej.

Fragmenty kodu z panelu

Strona każdego szablonu w panelu ma zakładkę Kod, która generuje gotowy do wklejenia kod dla vanilla JS, Reacta, Vue, Svelte, Node i cURL, z twoimi identyfikatorami i wszystkimi parametrami szablonu (łącznie z typami i przykładowymi wartościami).

Uwagi do frameworków

• Next.js / Nuxt / SvelteKit: wysyłaj z komponentów klienckich z kluczem publicznym albo z server actions / tras API z kluczem prywatnym i @frontmail/node.
• Generatory stron statycznych (Astro, Hugo, Eleventy, Jekyll): użyj wersji z CDN i sendForm.
• WordPress i kreatory no-code: wklej fragment z CDN do bloku własnego HTML.
• Aplikacje mobilne: użyj natywnych SDK dla Androida (Kotlin), iOS (Swift), Fluttera albo @frontmail/react-native z kluczem publicznym i włącz Zezwól na aplikacje mobilne, ewentualnie wołaj REST API ze swojego backendu z kluczem prywatnym. Nigdy nie umieszczaj klucza prywatnego w aplikacji.