Přeskočit na obsah

Příklady

Veřejný repozitář SDK frontmail-dev/frontmail-js obsahuje spustitelný příklad pro každé SDK v adresáři examples/. Každý z nich je kontaktní formulář s validačními chybami, stavem pro zadrženou zprávu a Turnstile – stejný postup jako v návodu na kontaktní formulář.

Příklad Stack Ukazuje
examples/vanilla Čisté HTML + @frontmail/browser (CDN) sendForm, Turnstile, přílohu souboru, polling přes getStatus
examples/react Vite + React + @frontmail/react FrontmailProvider, FrontmailForm, useSendEmail, typované parametry
examples/react-native Expo + React Native + @frontmail/react-native FrontmailProvider, useSendEmail, TurnstileWebView, limitRate s 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, idempotenční klíče
Terminál
git clone https://github.com/frontmail-dev/frontmail-js.git
cd frontmail-js
corepack enable # pnpm 10
pnpm install
pnpm build # sestaví SDK, na která příklady odkazují
echo "VITE_FRONTMAIL_PUBLIC_KEY=pk_…" > examples/react/.env.local # + ID služby a ID šablony
pnpm --filter @frontmail/example-react dev

README každého příkladu uvádí, jaké parametry šablony očekává. Nejrychleji získáte odpovídající šablonu z galerie – Contact form.

Každá stránka šablony v dashboardu má záložku Snippet, která vygeneruje kód připravený ke zkopírování pro vanilla JS, React, Vue, Svelte, Node a cURL – s vašimi ID a všemi parametry šablony (včetně typů a ukázkových hodnot) už vyplněnými.

Poznámky k frameworkům

Sekce “Poznámky k frameworkům”
  • Next.js / Nuxt / SvelteKit: posílejte z klientských komponent s public key, nebo ze server actions / API routes s private key a @frontmail/node.
  • Generátory statických webů (Astro, Hugo, Eleventy, Jekyll): použijte CDN build a sendForm.
  • WordPress a no-code buildery: vložte CDN snippet do vlastního HTML bloku.
  • Mobilní aplikace: použijte @frontmail/react-native s public key a zapněte Povolit mobilní aplikace, nebo volejte REST API ze svého backendu s private key. Private key do aplikace nikdy nedávejte.