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

Een contactformulier insluiten in React, Vue of Angular

Web components zijn onderdeel van de DOM. Plaats de tag rechtstreeks in JSX, Vue-templates of Angular-componenten — geen wrapper nodig.

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

Werkt dit echt?

Ja. Web components zijn onderdeel van de DOM-standaard — React, Vue en Angular renderen onbekende tags als gewone HTML en laten de browser de rest afhandelen. Geen npm-installatie, geen wrapper-component, geen compatibiliteitsshim.

Stap voor stap

Laad het script

Voeg de script-tag toe aan de HTML-shell van je app — public/index.html in CRA, app/layout.tsx met next/script in Next.js, of index.html in Vite. Of laad hem dynamisch in een useEffect / onMounted hook.

Voeg het custom element in

Gebruik de custom element-tag rechtstreeks in JSX (<toimii-contact />), Vue-templates (<toimii-contact />) of Angular-templates. De browser registreert het element wanneer het script laadt.

Vertel je framework erover

TypeScript-gebruikers — declareer de tag in een global.d.ts-bestand zodat de compiler hem accepteert. Vue-gebruikers — markeer custom elements in vite.config.js. Angular-gebruikers — voeg CUSTOM_ELEMENTS_SCHEMA toe. Elk is een wijziging van één regel.

Bouwen en uitvoeren

Start je dev-server en het formulier wordt weergegeven. Geen wrapper, geen @types-pakket, geen extra bouwstap.

Veelvoorkomende valkuilen

In React kun je geen complexe props (objecten, functies) doorgeven als JSX-attributen — de component ontvangt dan de string "[object Object]". Gebruik een ref + element.config = {...} na het mounten.
Strict Mode in React 18+ mount components dubbel in dev. Web components met neveneffecten op connectedCallback kunnen twee keer afvuren. Toimii's components handelen dit af — maar als je je eigen wrappers schrijft, let er dan op.
Vue 3 vereist dat je custom elements markeert zodat het ze niet probeert op te lossen als Vue-componenten. Voeg in vite.config.js compilerOptions.isCustomElement toe om te matchen met /^toimii-/.
Angular heeft CUSTOM_ELEMENTS_SCHEMA nodig in de schemas-array van je module. Zonder dat geeft de compiler een fout op de onbekende tag.

Veelgestelde vragen

Heb ik een React/Vue/Angular wrapper-component nodig?

Nee. Web components zijn onderdeel van de DOM-standaard — React, Vue en Angular renderen onbekende tags als gewone HTML en laten de browser de rest afhandelen. Geen npm-pakket, geen @types, niets te installeren.

Hoe vertel ik TypeScript over het custom element?

Ja. Voeg dit toe aan een global.d.ts-bestand: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. Het formulier werkt er ook zonder — TypeScript stopt dan alleen met klagen.

Hoe geef ik props of configuratie mee?

Geef ze mee als gewone HTML-attributen. Web components lezen attributen uit de DOM op dezelfde manier als React props leest uit JSX. Voor dynamische waarden gebruik je een ref en stel je eigenschappen imperatief in indien nodig.

Werkt het met Next.js, Remix of SvelteKit?

Ja. In Next.js voeg je de script-tag toe in app/layout.tsx (met de next/script-component) of in pages/_document.tsx. Het custom element wordt client-side weergegeven — gebruik een "use client"-grens als je in de App Router werkt.

Wat met server-side rendering?

Het custom element wordt client-side weergegeven, zoals elk web component. SSR stuurt de tag mee, de browser registreert het element wanneer het script laadt, dan verschijnt het formulier. Er is een korte flits van lege ruimte — doorgaans nauwelijks merkbaar.

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

Statische Sites

Astro, Hugo, 11ty, Jekyll — dezelfde twee regels in je layout-template. Builds blijven snel.

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

Klaar om het te proberen?

30 dagen gratis. Geen creditcard. Binnen minuten ingesteld.

Geen creditcard nodig. Binnen 2 minuten klaar.