Disse veiledningene beskriver Toimii etter at tjenesten er lansert. Dashbordet og faktureringen er ikke tilgjengelig ennå — Toimii lanseres i 2026.

Bygg inn et kontaktskjema i React, Vue eller Angular

Webkomponenter er en del av DOM. Slipp taggen rett inn i JSX, Vue-maler eller Angular-komponenter — ingen wrapper nødvendig.

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

Fungerer dette faktisk?

Ja. Webkomponenter er en del av DOM-standarden — React, Vue og Angular gjengir alle ukjente tagger som vanlig HTML og lar nettleseren ta over. Ingen npm-installasjon, ingen wrapper-komponent, ingen kompatibilitets-shim.

Steg for steg

Last inn skriptet

Legg til script-taggen i appens HTML-skall — public/index.html i CRA, app/layout.tsx med next/script i Next.js, eller index.html i Vite. Eller last den inn dynamisk i en useEffect / onMounted-hook.

Slipp inn det egendefinerte elementet

Bruk det egendefinerte elementet direkte i JSX (<toimii-contact />), Vue-maler (<toimii-contact />) eller Angular-maler. Nettleseren registrerer elementet når skriptet lastes inn.

Fortell rammeverket ditt om det

TypeScript-brukere — deklarer taggen i en global.d.ts-fil så kompilatoren godtar den. Vue-brukere — flagg egendefinerte elementer i vite.config.js. Angular-brukere — legg til CUSTOM_ELEMENTS_SCHEMA. Hvert er en endring på én linje.

Bygg og kjør

Kjør dev-serveren og skjemaet gjengis. Ingen wrapper, ingen @types-pakke, ingen ekstra byggtrinn.

Vanlige fallgruver

I React kan du ikke sende komplekse props (objekter, funksjoner) som JSX-attributter — komponenten vil motta strengen "[object Object]". Bruk en ref + element.config = {...} etter montering.
Strict Mode i React 18+ dobbeltmonterer komponenter under utvikling. Webkomponenter med sideeffekter på connectedCallback kan avfyres dobbelt. Toimiis komponenter håndterer dette — men hvis du skriver dine egne rundt dem, vær oppmerksom på det.
Vue 3 trenger at du flagger egendefinerte elementer så det ikke prøver å løse dem som Vue-komponenter. I vite.config.js legger du til compilerOptions.isCustomElement for å matche /^toimii-/.
Angular trenger CUSTOM_ELEMENTS_SCHEMA i modulens schemas-array. Uten det gir kompilatoren feil på den ukjente taggen.

Ofte stilte spørsmål

Trenger jeg en React/Vue/Angular wrapper-komponent?

Nei. Webkomponenter er en del av DOM-standarden — React, Vue og Angular gjengir alle ukjente tagger som vanlig HTML og lar nettleseren ta over. Ingen npm-pakke, ingen @types, ingenting å installere.

Hvordan forteller jeg TypeScript om det egendefinerte elementet?

Ja. Legg dette til i en global.d.ts-fil: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. Skjemaet fungerer uten det — TypeScript slutter bare å klage.

Hvordan sender jeg props eller konfigurasjon?

Send dem som vanlige HTML-attributter. Webkomponenter leser attributter fra DOM-en på samme måte som React leser props fra JSX. For dynamiske verdier, bruk en ref og sett egenskaper imperativt ved behov.

Fungerer det med Next.js, Remix eller SvelteKit?

Ja. I Next.js legger du til script-taggen i app/layout.tsx (med next/script-komponenten) eller i pages/_document.tsx. Det egendefinerte elementet gjengis på klientsiden — wrap det i en "use client"-grense hvis du er i App Router.

Hva med server-side rendering?

Det egendefinerte elementet gjengis på klientsiden, som enhver webkomponent. SSR sender ut taggen, nettleseren registrerer elementet når skriptet lastes inn, deretter vises skjemaet. Det er et kort glimt av tom plass — vanligvis umerkelig.

Bygger du inn på en annen plattform?

Samme to linjer kode, tilpasset for hver plattform.

WordPress

Egendefinert HTML-blokk, blokkeditor eller klassisk. Ingen plugin-installasjon. Én hake — brukerrollen din trenger unfiltered_html-kapabilitet.

Les hele guiden

Squarespace

Slipp en kodeblokk på en hvilken som helst side. Krever Core-planen (2025-omdøping av Business) eller høyere.

Les hele guiden

Webflow

Code Embed-elementet rommer opptil 50 000 tegn. Egendefinert kode krever Basic-planen eller høyere. Publiser for å forhåndsvise.

Les hele guiden

Wix

Wix sandbox-er Embed-widgeten, så vi bruker en delt metode — skript i Innstillinger → Egendefinert kode, tag via Bygg inn en widget. Ærlig guide.

Les hele guiden

Shopify

Legg til en Custom Liquid-seksjon i et hvilket som helst tema — ingen appinstallasjon nødvendig. Hopp over kassesider med mindre du er på Shopify Plus.

Les hele guiden

Statiske nettsteder

Astro, Hugo, 11ty, Jekyll — samme to linjer i layoutmalen din. Byggene forblir raske.

Les hele guiden

HTML / Egendefinert

En vanlig HTML-side er nok. Åpne den i en teksteditor, lim inn, lagre, last opp. Tre steg og du er live.

Les hele guiden

Klar til å prøve det?

30-dagers gratis prøveperiode. Inget kredittkort. Klar på minutter.

Ingen kredittkort nødvendig. Klar på 2 minutter.