Te przewodniki opisują Toimii po uruchomieniu. Panel i rozliczenia nie są jeszcze dostępne — Toimii ruszy w 2026 roku.

Dodaj formularz kontaktowy do swojej strony statycznej: Astro, Hugo, 11ty, Jekyll

Jeden fragment w szablonie layoutu. Działa w Astro, Hugo, 11ty, Jekyll, Gatsby, Bridgetown i każdym innym generatorze stron statycznych.

<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-contact></toimii-contact>

Czy to naprawdę działa?

Tak — i strony statyczne to najprostszy przypadek. Żadnego sandboxu pluginów, żadnego edytora usuwającego skrypty, żadnych poziomów planu. Dwie linie trafiają do szablonu layoutu dokładnie tak samo jak do zwykłego pliku HTML.

Krok po kroku

Otwórz szablon layoutu

Otwórz szablon layoutu owijający każdą stronę — _layouts/default.html w Jekyll, src/layouts/Base.astro w Astro, layouts/partials/footer.html w Hugo, _includes/layout.njk w 11ty.

Wklej kod osadzania

Wklej dwie linie z dashboardu Toimii wewnątrz <body>. Żeby pokazywać formularz tylko na wybranych stronach, ochroń własny element przez szablonowanie generatora (flaga front matter, sprawdzenie sluga strony itp.); znacznik script może zostać w layoucie.

Uruchom serwer deweloperski

Uruchom serwer deweloperski (npm run dev / hugo server / jekyll serve). Formularz renderuje się natychmiast — żadnej dodatkowej konfiguracji, żadnego pluginu, żadnych @types.

Zbuduj i wdróż

Zbuduj i wdróż jak zwykle (Netlify, Vercel, GitHub Pages, S3 + CloudFront, cokolwiek hostuje Twoją stronę). Formularz nadal działa — CDN Toimii zajmuje się resztą.

Częste pułapki

Większość rendererów Markdown w generatorach statycznych stron domyślnie usuwa surowy HTML. W Jekyll / 11ty / Hugo włącz surowy HTML albo wklej osadzanie do pliku layoutu zamiast do pliku treści.
Hot reload może wielokrotnie ponownie wstrzykiwać skrypt podczas dewelopmentu. To specyfika trybu deweloperskiego; buildy produkcyjne emitują tag raz na stronę.
Niektórzy hostingodawcy dodają restrykcyjne nagłówki Content-Security-Policy (Netlify i Vercel pozwalają je dostosować). Zezwól na cdn.toimii.io i api.toimii.io w script-src i connect-src.
Nie wklejaj fragmentu do <head>. Własny element to tag na poziomie body — trzymaj skrypt w <head> jeśli musisz (z async), ale tag musi być w <body>.

Często zadawane pytania

Jak dodać w Astro?

Wrzuć znacznik script do bazowego komponentu Layout (np. src/layouts/Base.astro) i użyj własnego elementu w dowolnym pliku .astro. Astro renderuje nieznane elementy jako zwykły HTML — sam tag nie potrzebuje dyrektywy client.

Jak dodać w Hugo?

Dodaj fragment do layouts/partials/footer.html (albo tam, gdzie ładujesz własne skrypty) i użyj własnego elementu w plikach treści, szablonach layoutu lub shortcode'ach.

Jak dodać w 11ty (Eleventy)?

Dodaj fragment do bazowego layoutu (_includes/layout.njk w domyślnej konfiguracji Eleventy). Dotyczy każdej strony rozszerzającej layout. Włącz hot-reload; zobaczysz formularz zaraz po przebudowaniu przez serwer deweloperski.

Jak dodać w Jekyll / GitHub Pages?

Dodaj fragment do _layouts/default.html (albo wybranego layoutu). Użyj własnego elementu w dowolnym poście Markdown, włączając html w rendererze Markdown.

Czy spowolni moje budowanie?

Nie. Skrypt ładuje się w czasie wykonywania, a nie podczas budowania — build emituje znacznik script, a przeglądarka pobiera właściwy komponent, gdy odwiedzający otwiera stronę. Astro, Hugo, 11ty, Jekyll: na żaden to nie wpływa.

Osadzasz na innej platformie?

Te same dwie linie kodu, szczegółowo omówione dla każdej platformy.

WordPress

Blok Custom HTML, edytor blokowy lub klasyczny. Bez instalowania pluginu. Jeden haczyk — Twoja rola użytkownika musi mieć uprawnienie unfiltered_html.

Przeczytaj pełny poradnik

Squarespace

Wrzuć Blok Kodu na dowolną stronę. Wymaga planu Core (nowa nazwa Business od 2025) lub wyższego.

Przeczytaj pełny poradnik

Webflow

Element Code Embed mieści do 50 000 znaków. Własny kod wymaga planu Basic lub wyższego. Opublikuj, żeby zobaczyć efekt.

Przeczytaj pełny poradnik

Wix

Wix umieszcza widget Embed w sandboxowym iframe, więc używamy metody split — skrypt w Ustawienia → Własny kod, tag przez Embed a Widget. Uczciwy przewodnik.

Przeczytaj pełny poradnik

Shopify

Dodaj sekcję Custom Liquid do dowolnego motywu — bez instalowania aplikacji. Strony kasy wymagają Shopify Plus.

Przeczytaj pełny poradnik

HTML / Własny

Wystarczy zwykła strona HTML. Otwórz w dowolnym edytorze tekstu, wklej, zapisz, wgraj. Trzy kroki i działa.

Przeczytaj pełny poradnik

React / Vue / Angular

Użyj własnego elementu bezpośrednio w JSX, szablonach Vue lub komponentach Angular. Żadnego komponentu opakowującego, żadnego dodatkowego pakietu.

Przeczytaj pełny poradnik

Gotowy, żeby spróbować?

30-dniowy bezpłatny okres próbny. Bez karty kredytowej. Gotowe w kilka minut.

Bez karty kredytowej. Konfiguracja w 2 minuty.