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

Osadź formularz kontaktowy w React, Vue lub Angular

Web components są częścią DOM. Wrzuć tag bezpośrednio do JSX, szablonów Vue lub komponentów Angular — bez żadnego wrappera.

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

Czy to naprawdę działa?

Tak. Web components są częścią standardu DOM — React, Vue i Angular renderują nieznane tagi jako zwykły HTML i pozwalają przeglądarce przejąć sterowanie. Żadnego npm install, żadnego komponentu opakowującego, żadnego shima zgodności.

Krok po kroku

Załaduj skrypt

Dodaj znacznik script do szablonu HTML aplikacji — public/index.html w CRA, app/layout.tsx z next/script w Next.js lub index.html w Vite. Możesz też załadować go dynamicznie w hooku useEffect / onMounted.

Wrzuć własny element

Użyj własnego tagu elementu bezpośrednio w JSX (<toimii-contact />), szablonach Vue (<toimii-contact />) lub szablonach Angular. Przeglądarka rejestruje element po załadowaniu skryptu.

Poinformuj framework o elemencie

Użytkownicy TypeScript — zadeklaruj tag w pliku global.d.ts, żeby kompilator go zaakceptował. Użytkownicy Vue — oznacz własne elementy w vite.config.js. Użytkownicy Angular — dodaj CUSTOM_ELEMENTS_SCHEMA. Każda z tych zmian to jedna linia.

Zbuduj i uruchom

Uruchom serwer deweloperski, a formularz się wyrenderuje. Żadnego wrappera, żadnego pakietu @types, żadnego dodatkowego etapu budowania.

Częste pułapki

W React nie możesz przekazywać złożonych propsów (obiektów, funkcji) jako atrybutów JSX — komponent otrzyma ciąg znaków "[object Object]". Użyj refa + element.config = {...} po zamontowaniu.
Strict Mode w React 18+ podwójnie montuje komponenty w trybie deweloperskim. Web components z efektami ubocznymi w connectedCallback mogą uruchamiać się dwukrotnie. Komponenty Toimii obsługują to — ale jeśli piszesz własny wrapper, miej to na uwadze.
Vue 3 wymaga oznaczenia własnych elementów, żeby nie próbował rozpoznawać ich jako komponentów Vue. W vite.config.js dodaj compilerOptions.isCustomElement, które pasuje do /^toimii-/.
Angular wymaga CUSTOM_ELEMENTS_SCHEMA w tablicy schemas Twojego modułu. Bez tego kompilator zgłosi błąd dla nieznanego tagu.

Często zadawane pytania

Czy potrzebuję komponentu opakowującego React/Vue/Angular?

Nie. Web components są częścią standardu DOM — React, Vue i Angular renderują nieznane tagi jako zwykły HTML i pozwalają przeglądarce przejąć sterowanie. Żadnego pakietu npm, żadnych @types, nic do instalowania.

Jak poinformować TypeScript o własnym elemencie?

Tak. Dodaj to do pliku global.d.ts: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. Formularz działa bez tego — TypeScript po prostu przestaje narzekać.

Jak przekazywać propsy lub konfigurację?

Przekazuj je jako zwykłe atrybuty HTML. Web components odczytują atrybuty z DOM tak samo, jak React odczytuje propsy z JSX. Dla wartości dynamicznych użyj refa i ustaw właściwości imperatywnie w razie potrzeby.

Czy działa z Next.js, Remix lub SvelteKit?

Tak. W Next.js dodaj znacznik script w app/layout.tsx (za pomocą komponentu next/script) lub w pages/_document.tsx. Własny element renderuje się po stronie klienta — owiń go w granicę "use client", jeśli używasz App Routera.

A co z renderowaniem po stronie serwera?

Własny element renderuje się po stronie klienta, jak każdy web component. SSR emituje tag, przeglądarka rejestruje element po załadowaniu skryptu, następnie pojawia się formularz. Przez chwilę widać puste miejsce — zazwyczaj niezauważalne.

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

Strony statyczne

Astro, Hugo, 11ty, Jekyll — te same dwie linie w szablonie layoutu. Budowanie pozostaje szybkie.

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

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.