Deze handleidingen beschrijven Toimii zodra het live is. Het dashboard en de facturering zijn nog niet beschikbaar — Toimii lanceert in 2026.

Contactformulier toevoegen aan je statische site: Astro, Hugo, 11ty, Jekyll

Één snippet in je layout-template. Werkt in Astro, Hugo, 11ty, Jekyll, Gatsby, Bridgetown en elke andere static site generator.

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

Werkt dit echt?

Ja — en statische sites zijn het meest eenvoudige geval. Geen plugin-sandbox, geen editor die scripts verwijdert, geen abonnementsniveau. De twee regels gaan in je layout-template op dezelfde manier als in een gewoon HTML-bestand.

Stap voor stap

Open je layout-template

Open het layout-template dat elke pagina omhult — _layouts/default.html in Jekyll, src/layouts/Base.astro in Astro, layouts/partials/footer.html in Hugo, _includes/layout.njk in 11ty.

Plak de insluitcode

Plak de twee regels van je Toimii Dashboard in <body>. Om het formulier alleen op bepaalde pagina's te tonen, gebruik je de templating van je generator (front matter-vlag, pagina-slug-controle, enz.); de script-tag kan in de lay-out blijven.

Start de dev-server

Start je dev-server (npm run dev / hugo server / jekyll serve). Het formulier wordt direct weergegeven — geen extra configuratie, geen plugin, geen @types.

Bouwen en deployen

Bouw en deploy zoals gewoonlijk (Netlify, Vercel, GitHub Pages, S3 + CloudFront, waar je ook host). Het formulier blijft werken — Toimii's CDN regelt de rest.

Veelvoorkomende valkuilen

De meeste Markdown-renderers van statische sites verwijderen ruwe HTML standaard. In Jekyll / 11ty / Hugo schakel je ruwe HTML in of plak je het insluiten in een lay-outbestand in plaats van een inhoudsbestand.
Hot reload injecteert het script soms meerdere keren opnieuw tijdens development. Dat is een dev-only eigenaardigheid; productiebuilds sturen de tag eenmaal per pagina mee.
Sommige hosts voegen agressieve Content-Security-Policy-headers toe (Netlify en Vercel laten je aanpassen). Sta cdn.toimii.io en api.toimii.io toe in script-src en connect-src.
Zet het snippet niet in <head>. Het custom element is een tag op body-niveau — je kunt het script in <head> bewaren als je wilt (met async), maar de tag moet in <body> staan.

Veelgestelde vragen

Hoe voeg ik het toe in Astro?

Zet de script-tag in je basis Layout-component (bijv. src/layouts/Base.astro) en gebruik het custom element in elk .astro-bestand. Astro rendert onbekende elementen als gewone HTML — voor de tag zelf is geen client-directive nodig.

Hoe voeg ik het toe in Hugo?

Voeg het snippet toe aan je layouts/partials/footer.html (of waar je ook aangepaste scripts laadt) en gebruik het custom element in je inhoudsbestanden, layout-templates of shortcodes.

Hoe voeg ik het toe in 11ty (Eleventy)?

Voeg het snippet toe aan je basislay-out (_includes/layout.njk in Eleventy-standaarden). Het geldt voor elke pagina die de lay-out uitbreidt. Zet hot-reload aan; je ziet het formulier zodra de dev-server herbouwt.

Hoe voeg ik het toe in Jekyll / GitHub Pages?

Voeg het snippet toe aan _layouts/default.html (of je gekozen lay-out). Gebruik het custom element in elk Markdown-bericht door html in te schakelen in de Markdown-renderer.

Vertraagt het mijn build?

Nee. Het script laadt tijdens runtime, niet tijdens de bouw — je build stuurt de script-tag mee en de browser haalt de eigenlijke component op wanneer een bezoeker de pagina bezoekt. Astro, Hugo, 11ty, Jekyll: allemaal onbeïnvloed.

Insluiten op een ander platform?

Dezelfde twee regels code, uitgelegd voor elk platform.

WordPress

Aangepast HTML-blok, Blok-editor of Klassiek. Geen plugin-installatie. Eén kanttekening — je gebruikersrol heeft de unfiltered_html-capability nodig.

Lees de volledige gids

Squarespace

Voeg een Codeblok toe op elke pagina. Vereist het Core-abonnement (de 2025-hernoeming van Business) of hoger.

Lees de volledige gids

Webflow

Het Code Embed-element bevat tot 50.000 tekens. Aangepaste code vereist het Basic-abonnement of hoger. Publiceer om te bekijken.

Lees de volledige gids

Wix

Wix sandboxt het Embed-widget, dus we gebruiken een gesplitste methode — script in Instellingen → Aangepaste code, tag via Embed een widget. Eerlijke gids.

Lees de volledige gids

Shopify

Voeg een Custom Liquid-sectie toe aan elk thema — geen app-installatie vereist. Sla kassapagina's over tenzij je Shopify Plus hebt.

Lees de volledige gids

HTML / Aangepast

Een gewone HTML-pagina is genoeg. Open hem in een teksteditor, plak, sla op, upload. Drie stappen en je bent live.

Lees de volledige gids

React / Vue / Angular

Gebruik het custom element rechtstreeks in JSX, Vue-templates of Angular-componenten. Geen wrapper-component, geen extra pakket.

Lees de volledige gids

Klaar om het te proberen?

30 dagen gratis. Geen creditcard. Binnen minuten ingesteld.

Geen creditcard nodig. Binnen 2 minuten klaar.