Toimii jest w fazie cichego startu, więc te poradniki opisują usługę, w której możesz się zarejestrować i z której możesz korzystać już dziś. Kilka elementów jest jeszcze w drodze — aplikacje na iOS i Androida pojawią się jeszcze 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 i każdym innym generatorze stron statycznych.

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

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 owijający każdą stronę — ten, w którym jest już Twój tag <body>.

Wklej kod osadzania

Wklej dwie linie ze strony swojego komponentu w Toimii wewnątrz <body>. Żeby pokazywać formularz tylko na wybranych stronach, obejmij obie linie warunkiem swojego generatora — skrypt i tag należą do siebie.

Zbuduj i wdróż

Zbuduj i wdróż jak zwykle. Potem otwórz opublikowaną stronę i wyślij sobie testową wiadomość.

Pułapki

Umieść tag w szablonie, a nie w pliku treści w Markdownie. To, czy surowy HTML przetrwa Markdown, zależy od ustawienia konkretnego generatora — w Hugo trzeba do tego markup.goldmark.renderer.unsafe — natomiast szablon w ogóle nie przechodzi przez Markdown.
Astro bundluje znaczniki script, których jedynym atrybutem jest src. Nasz ma również async, a każdy atrybut poza src sprawia, że Astro zostawia tag w spokoju — działa więc dokładnie tak, jak go wkleisz. Jeśli kiedyś okroisz go do samego src, dodaj is:inline.
Hostingi statyczne domyślnie nie dodają Content-Security-Policy. Jeśli ustawisz ją sam — jako nagłówek odpowiedzi HTTP albo tag <meta> — zezwól na cdn.toimii.io w script-src i api.toimii.io w connect-src.

Często zadawane pytania

Jak dodać go w Astro, Hugo, 11ty lub Jekyll?

Nic się między nimi nie różni — kroki powyżej to cała procedura we wszystkich czterech. Celowo nie podajemy ścieżki do pliku szablonu: każdy generator nazywa go inaczej, a nazwy zmieniały się między wersjami, więc sprawdź dokumentację swojego generatora.

Czy działa na GitHub Pages, Netlify, Vercel lub Cloudflare Pages?

Tak, i na każdym innym hostingu, który serwuje pliki statyczne — po Twojej stronie nic nie działa. Ważniejszy od hostingu jest adres: zgłoszenia są przyjmowane tylko z domeny wskazanej przez Ciebie w Toimii, więc podglądowy build na subdomenie samego hostingu wyrenderuje formularz, ale odrzuci wiadomość.

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ć Code Block na dowolną stronę. Wymaga planu, w którym bloki kodu mogą uruchamiać JavaScript.

Przeczytaj pełny poradnik

Webflow

Przeciągnij element Code Embed i wklej dwie linie. Własny kod to w Webflow funkcja płatna — to jedyny warunek.

Przeczytaj pełny poradnik

Wix

Użyj Custom Element od Wix: adres skryptu Twojego komponentu w polu Server URL, jego tag w polu Tag Name. Osadzanie HTML nie zadziała — to sandboxowy iframe.

Przeczytaj pełny poradnik

Shopify

Dodaj sekcję Custom Liquid w edytorze motywu Shopify — bez instalowania aplikacji, bez edycji kodu motywu. Strony kasy to jedyne miejsce, w którym jej nie umieścisz.

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.

Rozpocznij bezpłatny okres próbny

Bez karty kredytowej. Konfiguracja w 2 minuty.