Bädda in ett kontaktformulär i React, Vue eller Angular
Webbkomponenter är en del av DOM. Släpp in taggen direkt i JSX, Vue-mallar eller Angular-komponenter — ingen wrapper behövs.
<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-your-code></toimii-your-code>
Steg för steg
Fallgropar
Vanliga frågor
Behöver jag en React/Vue/Angular wrapper-komponent?
Nej. Scriptet definierar elementet i webbläsaren, så ditt ramverk behöver bara rendera taggen — och ingenting i ditt bygge ändras när vi släpper en ny version.
Hur berättar jag för TypeScript om det anpassade elementet?
Deklarera den i JSX:s IntrinsicElements, med den tagg som din egen komponent använder. React 19 flyttade den namnrymden och rätt form beror på jsx-inställningen i din tsconfig, så hämta den aktuella från Reacts uppgraderingsguide. Formuläret fungerar utan den.
Hur skickar jag props eller config?
Det finns ingenting att skicka. Vad formuläret frågar efter och vart meddelandena levereras ställs in i Toimii och bakas in i paketet som scriptet laddar — det är därför taggen inte har några attribut.
Fungerar det med Next.js eller något annat React-ramverk?
Ja. I Next.js laddar du det med next/script från rotlayouten — den dokumenterade platsen för ett script som hela webbplatsen behöver. En "use client"-gräns behövs bara om du kopplar på en load- eller error-hanterare; själva taggen kräver ingen.
Vad händer med server-side rendering?
Det anpassade elementet renderas på klientsidan, precis som alla webbkomponenter. SSR skickar taggen, webbläsaren registrerar elementet när scriptet laddas, sedan visas formuläret. Det kan blinka tomt ett ögonblick — oftast omärkbart.
Bäddar du in på en annan plattform?
Samma två rader kod, förklarade för varje plattform.
Redo att prova?
30 dagars gratis provperiod. Inget kreditkort. Klar på minuter.
Inget kreditkort krävs. Klar på 2 minuter.