Szybki start

Skrócona wersja dla tych, którzy chcą tylko listę kontrolną. Każdy punkt prowadzi do odpowiedniego kroku Samouczka, gdzie wszystko jest wyjaśnione ze zrzutami ekranu.

1. Konto i organizacja

• Załóż konto na app.frontmail.dev e-mailem i hasłem, przez Google albo GitHub. Potwierdź adres e-mail – do tego czasu możesz rozglądać się po panelu, ale nie wysyłać.
• Utwórz organizację: wypełnij Nazwa organizacji i Kraj rozliczeniowy (ustala VAT i walutę), przy pytaniu Co będziesz wysyłać? wybierz Formularz kontaktowy, E-maile transakcyjne albo Coś innego i kliknij Utwórz organizację.
• Masz plan Free z 300 żądaniami na ten miesiąc. Frontmail pokazuje twój pierwszy klucz prywatny – tylko raz. Skopiuj go do menedżera haseł albo sekretów serwera; potrzebujesz go tylko do wysyłki z serwera. Potem kliknij Przejdź do konfiguracji.

2. Sześć kroków konfiguracji

Strona Pierwsze kroki przeprowadzi cię przez sześć kroków. Każdy możesz pominąć (Pomiń ten krok, Pomiń konfigurację) i wrócić do niego później.

1. Podłącz usługę e-mail – Usługi e-mail → Dodaj usługę, wybierz dostawcę, wpisz dane logowania (albo Połącz przez swoje konto w przypadku Gmaila / Outlooka), Zweryfikuj i zapisz. → Samouczek, krok 1
2. Utwórz szablon – Szablony → Z galerii → Formularz kontaktowy → Użyj szablonu. To jest ustawione na twój adres, Reply-To na odwiedzającego. → Samouczek, krok 2 (i krok 3 dla automatycznej odpowiedzi)
3. Dopuść swoją stronę – Bezpieczeństwo → Dozwolone domeny → Dodaj domenę, np. example.com, *.example.com albo localhost:3000, potem Zapisz. Zalecane: dodaj klucze własnego bezpłatnego widżetu Cloudflare Turnstile w Ochrona przed botami (Turnstile) i kliknij Włącz CAPTCHA we wszystkich szablonach. → Samouczek, krok 4
4. Wyślij testowy e-mail – w edytorze Wyślij test. Za darmo, 20 dziennie. → Samouczek, krok 6
5. Dodaj go na stronę – skopiuj kod z zakładki Kod szablonu (HTML / JS, React, Vue, Svelte, Node.js, cURL). → Samouczek, krok 5
6. Zabezpiecz i zaproś – opcjonalnie włącz weryfikację dwuetapową i zaproś współpracowników (Zespół).

3. Wysyłka z kodu

Zakładka Kod uzupełnia twój klucz publiczny i identyfikatory. Kod w przeglądarce używa klucza publicznego (pk_…), serwery klucza prywatnego (sk_…):

Przeglądarka (npm)

npm install @frontmail/browser

import { init, send } from '@frontmail/browser';

init({ publicKey: 'pk_…' });

const result = await send('svc_…', 'tpl_…', {
  name: 'Jane Cooper',
  email: 'jane@example.com',
  message: 'Hi, I would like a quote.',
});
console.log(result.status); // "queued" (albo "held", jeśli skończyły się kredyty)

Szablon z Wymagaj CAPTCHA (Turnstile) potrzebuje też tokenu Turnstile – kompletny formularz z sendForm() znajdziesz w Budowa formularza.

Serwer (cURL)

curl https://api.frontmail.dev/v1/send \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer sk_…' \
  -d '{
    "service_id": "svc_…",
    "template_id": "tpl_…",
    "template_params": { "name": "Jane", "email": "jane@example.com", "message": "Hi!" }
  }'

Żądania z kluczem prywatnym pomijają sprawdzanie domeny i CAPTCHA. Zobacz przegląd API.

API odpowiada 202 Accepted z message_id; e-mail śledzisz w Historii.

Uwaga

Nigdy nie umieszczaj klucza prywatnego (sk_…) w kodzie frontendu. Zobacz Klucze publiczne i prywatne.

Wolisz wersję z przewodnikiem?Samouczek krok po kroku, ze zrzutami ekranu, buduje formularz kontaktowy z automatyczną odpowiedzią.