Toimii har mjuklanserats — tjänsten är igång och registreringen är öppen. Prova gratis →

Toimii har mjuklanserats, så de här guiderna beskriver en tjänst som du kan registrera dig för och använda redan idag. Några delar är fortfarande på väg — apparna för iOS och Android kommer senare under 2026.

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.

<!-- Lägg till detta var som helst på din sida -->
<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-your-code></toimii-your-code>
Fungerar det faktiskt?

Ja — det är ett vanligt anpassat element: inget att installera, ingen wrapper att skriva. React behöver ingen konfiguration alls. Vue och Angular behöver var sin rad som talar om för kompilatorn att taggen inte är deras — båda finns nedan.

Steg för steg

1
Ladda scriptet
Lägg till script-taggen i det HTML-skal som din app serveras från — den index.html som ditt bygge utgår från, eller ditt ramverks rotlayout.
2
Släpp in det anpassade elementet
Placera taggen där du vill ha formuläret; JSX samt Vue- och Angular-mallar tar den som den är. Kopiera den från din komponents sida i Toimii — den slutar med komponentens egen kod.
3
Bygg och publicera
Bygg och publicera som du brukar, och skicka sedan ett testmeddelande till dig själv från den publicerade sidan i stället för från dev-servern — inlämningar tas bara emot från den domän du angett i Toimii.

Fallgropar

  • Vue kräver att taggen markeras som ett anpassat element, annars försöker Vue hitta en Vue-komponent och ger en varning. isCustomElement tar en funktion — testa på prefixet toimii-, eftersom resten av taggen varierar från komponent till komponent.
  • Angular kräver CUSTOM_ELEMENTS_SCHEMA i en schemas-array — den standalone-komponentens egen, eller dess NgModules i en äldre app. Utan den ger kompilatorn ett fel på taggen den inte känner igen.

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.