Diese Anleitungen beschreiben Toimii nach dem Start. Das Dashboard und die Abrechnung sind noch nicht verfügbar — Toimii wird 2026 veröffentlicht.

Kontaktformular in React, Vue oder Angular einbetten

Web Components sind Teil des DOM. Fügen Sie den Tag direkt in JSX, Vue-Templates oder Angular-Komponenten ein — kein Wrapper erforderlich.

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

Funktioniert das wirklich?

Ja. Web Components sind Teil des DOM-Standards — React, Vue und Angular rendern unbekannte Tags als einfaches HTML und überlassen dem Browser das Weitere. Kein npm install, keine Wrapper-Komponente, kein Kompatibilitäts-Shim.

Schritt für Schritt

Skript laden

Fügen Sie das Script-Tag in die HTML-Basis Ihrer App ein — public/index.html in CRA, app/layout.tsx mit next/script in Next.js oder index.html in Vite. Oder laden Sie es dynamisch in einem useEffect- bzw. onMounted-Hook.

Custom Element einfügen

Verwenden Sie den Custom-Element-Tag direkt in JSX (<toimii-contact />), Vue-Templates (<toimii-contact />) oder Angular-Templates. Der Browser registriert das Element beim Laden des Skripts.

Framework informieren

TypeScript-Nutzer deklarieren den Tag in einer global.d.ts-Datei, damit der Compiler ihn akzeptiert. Vue-Nutzer kennzeichnen Custom Elements in vite.config.js. Angular-Nutzer fügen CUSTOM_ELEMENTS_SCHEMA hinzu. Jede Anpassung ist eine einzige Zeile.

Bauen und ausführen

Starten Sie Ihren Entwicklungsserver — das Formular wird gerendert. Kein Wrapper, kein @types-Paket, kein zusätzlicher Build-Schritt.

Häufige Fallstricke

In React können Sie keine komplexen Props (Objekte, Funktionen) als JSX-Attribute übergeben — die Komponente erhält dann den String „[object Object]". Verwenden Sie eine Ref und setzen Sie element.config = {...} nach dem Mount.
Der Strict Mode in React 18+ mountet Komponenten in der Entwicklungsumgebung doppelt. Web Components mit Nebeneffekten in connectedCallback können dadurch zweimal ausgelöst werden. Toimiis Komponenten behandeln dies korrekt — achten Sie jedoch darauf, wenn Sie eigene Komponenten darum herum schreiben.
Vue 3 erfordert, dass Sie Custom Elements als solche kennzeichnen, damit Vue sie nicht als Vue-Komponenten aufzulösen versucht. Fügen Sie in vite.config.js compilerOptions.isCustomElement hinzu und matchen Sie auf /^toimii-/.
Angular benötigt CUSTOM_ELEMENTS_SCHEMA im schemas-Array Ihres Moduls. Ohne diese Angabe wirft der Compiler einen Fehler beim unbekannten Tag.

Häufig gefragt

Benötige ich eine React-/Vue-/Angular-Wrapper-Komponente?

Nein. Web Components sind Teil des DOM-Standards — React, Vue und Angular rendern unbekannte Tags als einfaches HTML und überlassen dem Browser das Weitere. Kein npm-Paket, kein @types, nichts zu installieren.

Wie teile ich TypeScript das Custom Element mit?

Ja. Fügen Sie dies in eine global.d.ts-Datei ein: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. Das Formular funktioniert auch ohne diese Angabe — TypeScript hört lediglich auf, sich zu beschweren.

Wie übergebe ich Props oder eine Konfiguration?

Übergeben Sie sie als gewöhnliche HTML-Attribute. Web Components lesen Attribute aus dem DOM genauso, wie React Props aus JSX liest. Für dynamische Werte verwenden Sie eine Ref und setzen Sie Properties bei Bedarf imperativ.

Funktioniert das mit Next.js, Remix oder SvelteKit?

Ja. Fügen Sie in Next.js das Script-Tag in app/layout.tsx (mit der next/script-Komponente) oder in pages/_document.tsx ein. Das Custom Element wird client-seitig gerendert — binden Sie es in eine „use client"-Grenze ein, wenn Sie den App Router verwenden.

Was ist mit serverseitigem Rendering?

Das Custom Element wird client-seitig gerendert, wie jede Web Component. SSR gibt den Tag aus, der Browser registriert das Element beim Laden des Skripts, danach erscheint das Formular. Es gibt einen kurzen Moment mit leerem Raum — der in der Regel kaum auffällt.

Einbetten auf einer anderen Plattform?

Dieselben zwei Codezeilen, für jede Plattform einzeln erklärt.

WordPress

Benutzerdefinierter HTML-Block, Block-Editor oder Classic Editor. Keine Plugin-Installation. Ein Vorbehalt — Ihre Benutzerrolle benötigt die Berechtigung unfiltered_html.

Vollständige Anleitung lesen

Squarespace

Fügen Sie einen Code-Block auf einer beliebigen Seite ein. Erfordert den Core-Plan (2025 umbenannt von Business) oder höher.

Vollständige Anleitung lesen

Webflow

Das Code-Embed-Element fasst bis zu 50.000 Zeichen. Benutzerdefinierter Code erfordert den Basic-Plan oder höher. Zum Anzeigen veröffentlichen.

Vollständige Anleitung lesen

Wix

Wix kapselt das Embed-Widget in einer Sandbox, daher verwenden wir eine geteilte Methode — Script über Einstellungen → Benutzerdefinierter Code, Tag über Widget einbetten. Ein ehrlicher Leitfaden.

Vollständige Anleitung lesen

Shopify

Fügen Sie jedem Theme einen Custom-Liquid-Bereich hinzu – keine App-Installation erforderlich. Überspringen Sie Checkout-Seiten, es sei denn, Sie nutzen Shopify Plus.

Vollständige Anleitung lesen

Statische Websites

Astro, Hugo, 11ty, Jekyll — dieselben zwei Zeilen in Ihrer Layout-Vorlage. Builds bleiben schnell.

Vollständige Anleitung lesen

HTML / Benutzerdefiniert

Eine einfache HTML-Seite genügt. Öffnen Sie sie in einem beliebigen Texteditor, fügen Sie den Code ein, speichern Sie, laden Sie hoch. Drei Schritte — und Sie sind live.

Vollständige Anleitung lesen

Bereit zum Ausprobieren?

30 Tage kostenlos testen. Keine Kreditkarte. In wenigen Minuten eingerichtet.

Keine Kreditkarte nötig. In 2 Minuten startklar.