Toimii is van start gegaan met een soft launch — de dienst is live en je kunt je aanmelden. Probeer het gratis →

Toimii is van start gegaan met een soft launch, dus deze gidsen beschrijven een dienst waarvoor je je vandaag kunt aanmelden en die je meteen kunt gebruiken. Een paar onderdelen zijn nog onderweg — de iOS- en Android-apps verschijnen later 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.

<!-- Voeg dit toe aan je pagina -->
<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-your-code></toimii-your-code>
Werkt dit echt?

Ja — het is een standaard custom element: niets te installeren, geen wrapper te schrijven. React heeft helemaal geen configuratie nodig. Vue en Angular hebben elk één regel nodig die hun compiler vertelt dat de tag niet van hen is — allebei hieronder.

Stap voor stap

1
Laad het script
Voeg de script-tag toe aan de HTML-shell waaruit je app wordt geserveerd — de index.html waar je build mee begint, of de root layout van je framework.
2
Voeg het custom element in
Zet de tag op de plek waar je het formulier wilt; JSX-, Vue- en Angular-templates nemen hem zoals hij geschreven is. Kopieer hem van de pagina van je component in Toimii — hij eindigt met de eigen code van die component.
3
Bouwen en deployen
Bouw en deploy zoals je dat normaal doet en stuur jezelf daarna een testbericht vanaf de gepubliceerde pagina in plaats van vanaf de dev-server — inzendingen worden alleen geaccepteerd vanaf het domein dat je in Toimii hebt opgegeven.

Valkuilen

  • Vue vereist dat de tag als custom element wordt gemarkeerd, anders probeert het de tag als Vue-component te herkennen en geeft het een waarschuwing. isCustomElement neemt een functie — test op het voorvoegsel toimii-, want de rest van de tag verschilt per component.
  • Angular heeft CUSTOM_ELEMENTS_SCHEMA nodig in een schemas-array — die van de standalone component zelf, of die van de NgModule in een oudere app. Zonder dat geeft de compiler een fout op de tag die het niet kent.

Veelgestelde vragen

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

Nee. Het script definieert het element in de browser, dus je framework hoeft alleen de tag te renderen — en er verandert niets in je build wanneer wij een nieuwe versie uitbrengen.

Hoe vertel ik TypeScript over het custom element?

Declareer hem in IntrinsicElements van JSX, met de tag die je eigen component gebruikt. React 19 heeft die namespace verplaatst en de juiste vorm hangt af van de jsx-instelling in je tsconfig, dus haal de actuele vorm uit de upgrade guide van React. Het formulier werkt er ook zonder.

Hoe geef ik props of configuratie mee?

Je hoeft niets mee te geven. Wat het formulier vraagt en waar het de inzendingen aflevert, leg je vast in Toimii, en dat zit ingebakken in de bundle die het script laadt — daarom heeft de tag geen attributen.

Werkt het met Next.js of een ander React-framework?

Ja. In Next.js laad je hem met next/script vanuit de root layout — de gedocumenteerde plek voor een script dat de hele site nodig heeft. Een "use client"-grens is alleen nodig als je er een load- of error-handler aan hangt; de tag zelf heeft er geen nodig.

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.

Klaar om het te proberen?

30 dagen gratis. Geen creditcard. Binnen minuten ingesteld.

Geen creditcard nodig. Binnen 2 minuten klaar.