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-your-code></toimii-your-code>
Stap voor stap
Valkuilen
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.