Disse guider beskriver Toimii, når tjenesten er gået live. Dashboard og fakturering er endnu ikke tilgængelige — Toimii lanceres i 2026.

Indlejr en kontaktformular i React, Vue eller Angular

Webkomponenter er en del af DOM'en. Drop tagget direkte i JSX, Vue-skabeloner eller Angular-komponenter — ingen wrapper nødvendig.

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

Virker dette rent faktisk?

Ja. Webkomponenter er en del af DOM-standarden — React, Vue og Angular renderer ukendte tags som almindelig HTML og lader browseren overtage. Ingen npm install, ingen wrapper-komponent, intet kompatibilitetsskjold.

Trin for trin

Indlæs scriptet

Tilføj script-tagget til din apps HTML-skal — public/index.html i CRA, app/layout.tsx med next/script i Next.js, eller index.html i Vite. Eller indlæs det dynamisk i en useEffect / onMounted hook.

Drop det brugerdefinerede element ind

Brug det brugerdefinerede element-tag direkte i JSX (<toimii-contact />), Vue-skabeloner (<toimii-contact />) eller Angular-skabeloner. Browseren registrerer elementet, når scriptet indlæses.

Fortæl dit framework om det

TypeScript-brugere — erklær tagget i en global.d.ts-fil, så compileren accepterer det. Vue-brugere — markér brugerdefinerede elementer i vite.config.js. Angular-brugere — tilføj CUSTOM_ELEMENTS_SCHEMA. Hver er én linjes ændring.

Byg og kør

Kør din dev-server, og formularen renderes. Ingen wrapper, ingen @types-pakke, intet ekstra byggetrin.

Almindelige faldgruber

I React kan du ikke sende komplekse props (objekter, funktioner) som JSX-attributter — komponenten modtager strengen "[object Object]". Brug en ref + element.config = {...} efter mount.
Strict Mode i React 18+ dobbelt-mounter komponenter under udvikling. Webkomponenter med sideeffekter på connectedCallback kan dobbelttrigges. Toimiis komponenter håndterer dette — men hvis du skriver dine egne rundt om dem, så vær opmærksom.
Vue 3 kræver, at du markerer brugerdefinerede elementer, så den ikke forsøger at løse dem som Vue-komponenter. I vite.config.js skal du tilføje compilerOptions.isCustomElement til at matche /^toimii-/.
Angular kræver CUSTOM_ELEMENTS_SCHEMA i dit moduls schemas-array. Uden det fejler compileren på det ukendte tag.

Ofte stillede spørgsmål

Har jeg brug for en React/Vue/Angular-wrapper-komponent?

Nej. Webkomponenter er en del af DOM-standarden — React, Vue og Angular renderer ukendte tags som almindelig HTML og lader browseren overtage. Ingen npm-pakke, ingen @types, intet at installere.

Hvordan fortæller jeg TypeScript om det brugerdefinerede element?

Ja. Tilføj dette til en global.d.ts-fil: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. Formularen virker uden det — TypeScript holder bare op med at klage.

Hvordan sender jeg props eller konfiguration?

Send dem som almindelige HTML-attributter. Webkomponenter læser attributter fra DOM'en på samme måde, som React læser props fra JSX. For dynamiske værdier kan du bruge en ref og sætte egenskaber imperativt om nødvendigt.

Virker det med Next.js, Remix eller SvelteKit?

Ja. I Next.js tilføjes script-tagget i app/layout.tsx (med next/script-komponenten) eller i pages/_document.tsx. Det brugerdefinerede element renderes på klientsiden — wrap det i en "use client"-grænse, hvis du er i App Router.

Hvad med server-side rendering?

Det brugerdefinerede element renderes på klientsiden, som enhver webkomponent. SSR udsender tagget, browseren registrerer elementet, når scriptet indlæses, og formularen vises. Der er en kort flash af tomt rum — som regel umærkelig.

Indlejrer du på en anden platform?

De samme to linjer kode, gennemgået for hver platform.

WordPress

Custom HTML-blok, Block Editor eller Classic. Ingen plugin-installation. Ét forbehold — din brugerrolle skal have unfiltered_html-rettigheden.

Læs hele guiden

Squarespace

Drop en Code Block på en hvilken som helst side. Kræver Core-abonnementet (2025-omdøbning af Business) eller højere.

Læs hele guiden

Webflow

Code Embed-elementet rummer op til 50.000 tegn. Brugerdefineret kode kræver Basic-abonnementet eller derover. Publicer for at se preview.

Læs hele guiden

Wix

Wix sandboxer Embed-widget'en, så vi bruger en split-metode — script i Indstillinger → Brugerdefineret kode, tag via Embed a Widget. Ærlig guide.

Læs hele guiden

Shopify

Tilføj en Custom Liquid-sektion til et hvilket som helst tema — ingen app-installation nødvendig. Spring checkout-sider over, medmindre du er på Shopify Plus.

Læs hele guiden

Statiske sider

Astro, Hugo, 11ty, Jekyll — de samme to linjer i din layout-skabelon. Builds forbliver hurtige.

Læs hele guiden

HTML / Brugerdefineret

En almindelig HTML-side er nok. Åbn den i en teksteditor, indsæt, gem, upload. Tre trin og du er live.

Læs hele guiden

Klar til at prøve det?

30-dages gratis prøveperiode. Intet kreditkort. Opsætning på få minutter.

Intet kreditkort påkrævet. Klar på 2 minutter.