De här guiderna beskriver Toimii när tjänsten har lanserats. Instrumentpanelen och faktureringen är inte tillgängliga ännu – Toimii lanseras 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.

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

Fungerar det faktiskt?

Ja. Webbkomponenter är en del av DOM-standarden — React, Vue och Angular renderar okända taggar som vanlig HTML och låter webbläsaren ta över. Ingen npm-installation, ingen wrapper-komponent, inget kompatibilitetsshim.

Steg för steg

Ladda scriptet

Lägg till script-taggen i din apps HTML-skal — public/index.html i CRA, app/layout.tsx med next/script i Next.js, eller index.html i Vite. Eller ladda det dynamiskt i en useEffect / onMounted-hook.

Släpp in det anpassade elementet

Använd den anpassade elementtaggen direkt i JSX (<toimii-contact />), Vue-mallar (<toimii-contact />) eller Angular-mallar. Webbläsaren registrerar elementet när scriptet laddas.

Berätta för ditt ramverk om det

TypeScript-användare — deklarera taggen i en global.d.ts-fil så att kompilatorn accepterar den. Vue-användare — markera anpassade element i vite.config.js. Angular-användare — lägg till CUSTOM_ELEMENTS_SCHEMA. Var och en är en enrads-ändring.

Bygg och kör

Kör din dev-server och formuläret renderas. Ingen wrapper, inget @types-paket, inget extra byggsteg.

Vanliga fallgropar

I React kan du inte skicka komplexa props (objekt, funktioner) som JSX-attribut — komponenten tar emot strängen "[object Object]". Använd en ref + element.config = {...} efter montering.
Strict Mode i React 18+ dubbelmonterar komponenter i dev. Webbkomponenter med sidoeffekter i connectedCallback kan köras dubbelt. Toimiis komponenter hanterar detta — men om du skriver egna omslutningar, håll koll på det.
Vue 3 kräver att du markerar anpassade element så att det inte försöker tolka dem som Vue-komponenter. I vite.config.js, lägg till compilerOptions.isCustomElement för att matcha /^toimii-/.
Angular behöver CUSTOM_ELEMENTS_SCHEMA i din moduls schemas-array. Utan det ger kompilatorn fel på den okända taggen.

Vanliga frågor

Behöver jag en React/Vue/Angular wrapper-komponent?

Nej. Webbkomponenter är en del av DOM-standarden — React, Vue och Angular renderar okända taggar som vanlig HTML och låter webbläsaren ta över. Inget npm-paket, inga @types, inget att installera.

Hur berättar jag för TypeScript om det anpassade elementet?

Ja. Lägg till det här i en global.d.ts-fil: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. Formuläret fungerar utan det — TypeScript slutar bara klaga.

Hur skickar jag props eller config?

Skicka dem som vanliga HTML-attribut. Webbkomponenter läser attribut från DOM:en på samma sätt som React läser props från JSX. För dynamiska värden, använd en ref och sätt egenskaper imperativt vid behov.

Fungerar det med Next.js, Remix eller SvelteKit?

Ja. I Next.js, lägg till script-taggen i app/layout.tsx (med next/script-komponenten) eller i pages/_document.tsx. Det anpassade elementet renderas på klientsidan — omslut det i en "use client"-gräns om du är i App Router.

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örklarat för varje plattform.

WordPress

Custom HTML-block, Block Editor eller klassisk. Ingen plugin-installation. En hake — din användarroll behöver unfiltered_html-kapacitet.

Läs hela guiden

Squarespace

Lägg till ett kodblock på vilken sida som helst. Kräver Core-plan (2025 namnbyte från Business) eller högre.

Läs hela guiden

Webflow

Code Embed-elementet rymmer upp till 50 000 tecken. Anpassad kod kräver Basic-planen eller högre. Publicera för att förhandsgranska.

Läs hela guiden

Wix

Wix sandboxar Embed-widgeten, så vi använder en delad metod — script i Inställningar → Custom Code, tagg via Bädda in en widget. Ärlig guide.

Läs hela guiden

Shopify

Lägg till ett Custom Liquid-avsnitt i vilket tema som helst — ingen app-installation krävs. Undvik kassasidor om du inte är på Shopify Plus.

Läs hela guiden

Statiska webbplatser

Astro, Hugo, 11ty, Jekyll — samma två rader i din layoutmall. Byggen förblir snabba.

Läs hela guiden

HTML / Eget

En vanlig HTML-sida räcker. Öppna i valfri textredigerare, klistra in, spara, ladda upp. Tre steg och du är igång.

Läs hela guiden

Redo att prova?

30 dagars gratis provperiod. Inget kreditkort. Klar på minuter.

Inget kreditkort krävs. Klar på 2 minuter.