Toimii jest w fazie cichego startu — usługa działa, a rejestracja jest otwarta. Wypróbuj za darmo →

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.

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.

<!-- Dodaj to gdziekolwiek na swojej stronie -->
<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-your-code></toimii-your-code>
Czy to naprawdę działa?

Tak — to standardowy własny element: nic do zainstalowania, żadnego wrappera do napisania. React nie wymaga żadnej konfiguracji. Vue i Angular potrzebują po jednej linii, która mówi ich kompilatorowi, że ten tag nie jest ich — obie znajdziesz poniżej.

Krok po kroku

1
Załaduj skrypt
Dodaj znacznik script do szablonu HTML, z którego serwowana jest Twoja aplikacja — do pliku index.html, od którego zaczyna się build, albo do głównego layoutu Twojego frameworka.
2
Wrzuć własny element
Umieść tag tam, gdzie ma być formularz; JSX oraz szablony Vue i Angulara przyjmują go bez zmian. Skopiuj go ze strony swojego komponentu w Toimii — na końcu ma własny kod tego komponentu.
3
Zbuduj i wdróż
Zbuduj i wdróż jak zwykle, a potem wyślij sobie testową wiadomość z opublikowanej strony, a nie z serwera deweloperskiego — zgłoszenia są przyjmowane tylko z domeny wskazanej przez Ciebie w Toimii.

Pułapki

  • Vue wymaga oznaczenia tagu jako własnego elementu — inaczej próbuje rozpoznać go jako komponent Vue i wypisuje ostrzeżenie. isCustomElement przyjmuje funkcję, więc sprawdzaj prefiks toimii-, bo reszta tagu zależy od komponentu.
  • Angular wymaga CUSTOM_ELEMENTS_SCHEMA w tablicy schemas — samodzielnego komponentu standalone albo, w starszej aplikacji, jego modułu NgModule. Bez tego kompilator zgłosi błąd dla nieznanego tagu.

Często zadawane pytania

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

Nie. Skrypt definiuje element w przeglądarce, więc Twój framework tylko renderuje tag — a gdy wydajemy nową wersję komponentu, w Twoim buildzie nic się nie zmienia.

Jak poinformować TypeScript o własnym elemencie?

Zadeklaruj go w IntrinsicElements w JSX, podając tag, którego używa Twój komponent. React 19 przeniósł tę przestrzeń nazw, a poprawna postać zależy od ustawienia jsx w tsconfigu — aktualną znajdziesz w przewodniku aktualizacji Reacta. Formularz działa bez tego.

Jak przekazywać propsy lub konfigurację?

Nie ma czego przekazywać. To, o co pyta formularz i dokąd trafiają wiadomości, ustawiasz w Toimii, a wszystko to jest wbudowane w bundle ładowany przez skrypt — dlatego tag nie ma żadnych atrybutów.

Czy działa z Next.js lub innym frameworkiem Reacta?

Tak. W Next.js załaduj go za pomocą next/script w głównym layoucie — to udokumentowane miejsce na skrypt potrzebny na całej stronie. Granica "use client" jest wymagana tylko wtedy, gdy podpinasz obsługę load lub error; sam tag jej nie potrzebuje.

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.

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.