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

Kontaktformular für Ihre statische Website: Astro, Hugo, 11ty, Jekyll

Ein Snippet in Ihrer Layout-Vorlage. Funktioniert mit Astro, Hugo, 11ty, Jekyll, Gatsby, Bridgetown und jedem anderen Static-Site-Generator.

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

Funktioniert das wirklich?

Ja — und statische Websites sind der unkomplizierteste Fall. Kein Plugin-Sandbox, kein Editor, der Scripts entfernt, keine Plan-Einschränkungen. Die zwei Zeilen werden genauso in Ihre Layout-Vorlage eingefügt wie in jede andere HTML-Datei.

Schritt für Schritt

Layout-Vorlage öffnen

Öffnen Sie die Layout-Vorlage, die jede Seite umschließt — _layouts/default.html in Jekyll, src/layouts/Base.astro in Astro, layouts/partials/footer.html in Hugo, _includes/layout.njk in 11ty.

Embed-Code einfügen

Fügen Sie die zwei Zeilen aus Ihrem Toimii-Dashboard innerhalb von <body> ein. Wenn das Formular nur auf bestimmten Seiten erscheinen soll, steuern Sie das Custom Element mit der Template-Logik Ihres Generators (Front-Matter-Flag, Seitenname-Prüfung usw.); das Script-Tag kann im Layout verbleiben.

Dev-Server starten

Starten Sie Ihren Dev-Server (npm run dev / hugo server / jekyll serve). Das Formular wird sofort angezeigt — keine zusätzliche Konfiguration, kein Plugin, keine @types.

Build und Deployment

Erstellen und deployen Sie wie gewohnt (Netlify, Vercel, GitHub Pages, S3 + CloudFront oder wo auch immer Sie hosten). Das Formular funktioniert weiterhin — Toimiis CDN übernimmt den Rest.

Häufige Fallstricke

Die meisten Markdown-Renderer statischer Websites entfernen rohes HTML standardmäßig. In Jekyll / 11ty / Hugo aktivieren Sie rohes HTML, oder fügen Sie den Embed in eine Layout-Datei statt in eine Inhaltsdatei ein.
Hot-Reload injiziert das Script während der Entwicklung manchmal mehrfach. Das ist eine reine Entwicklungsbesonderheit; Production-Builds geben das Tag einmal pro Seite aus.
Manche Hosts setzen strenge Content-Security-Policy-Header (Netlify und Vercel erlauben Anpassungen). Erlauben Sie cdn.toimii.io und api.toimii.io in script-src und connect-src.
Platzieren Sie den Snippet nicht in <head>. Das Custom Element ist ein Tag auf Body-Ebene — das Script darf in <head> bleiben, wenn nötig (mit async), aber das Tag muss sich in <body> befinden.

Häufig gefragt

Wie füge ich es in Astro ein?

Fügen Sie das Script-Tag in Ihre Basis-Layout-Komponente ein (z. B. src/layouts/Base.astro) und verwenden Sie das Custom Element in beliebigen .astro-Dateien. Astro rendert unbekannte Elemente als einfaches HTML — für das Tag selbst ist keine Client-Direktive erforderlich.

Wie füge ich es in Hugo ein?

Fügen Sie den Snippet in layouts/partials/footer.html ein (oder wo auch immer Sie benutzerdefinierte Scripts laden) und verwenden Sie das Custom Element in Ihren Inhaltsdateien, Layout-Vorlagen oder Shortcodes.

Wie füge ich es in 11ty (Eleventy) ein?

Fügen Sie den Snippet in Ihr Basis-Layout ein (_includes/layout.njk bei Eleventy-Standardeinstellungen). Er gilt für jede Seite, die das Layout erweitert. Aktivieren Sie Hot-Reload; Sie sehen das Formular, sobald der Dev-Server neu erstellt hat.

Wie füge ich es in Jekyll / GitHub Pages ein?

Fügen Sie den Snippet in _layouts/default.html ein (oder in das Layout Ihrer Wahl). Verwenden Sie das Custom Element in beliebigen Markdown-Beiträgen, indem Sie HTML im Markdown-Renderer aktivieren.

Verlangsamt es meinen Build?

Nein. Das Script wird zur Laufzeit geladen, nicht zur Build-Zeit — Ihr Build gibt das Script-Tag aus, und der Browser lädt die eigentliche Komponente, wenn ein Besucher die Seite aufruft. Astro, Hugo, 11ty, Jekyll: alle bleiben unbeeinträchtigt.

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

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

React / Vue / Angular

Verwenden Sie das Custom Element direkt in JSX, Vue-Templates oder Angular-Komponenten. Kein Wrapper, kein zusätzliches Paket.

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.