Nämä ohjeet kuvaavat Toimiita julkaisun jälkeen. Hallintapaneeli ja laskutus eivät ole vielä käytössä — Toimii julkaistaan vuonna 2026.

Upota yhteydenottolomake Reactiin, Vueen tai Angulariin

Web-komponentit ovat osa DOM:ia. Pudota tagi suoraan JSX:ään, Vue-templateihin tai Angular-komponentteihin — wrapperia ei tarvita.

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

Toimiiko tämä oikeasti?

Kyllä. Web-komponentit ovat osa DOM-standardia — React, Vue ja Angular renderöivät tuntemattomat tagit tavallisena HTML:nä ja antavat selaimen hoitaa loput. Ei npm-asennusta, ei wrapper-komponenttia, ei yhteensopivuusshim-paketteja.

Vaihe vaiheelta

Lataa script

Lisää script-tagi sovelluksesi HTML-runkoon — public/index.html CRA:ssa, app/layout.tsx (next/script-komponentilla) Next.js:ssä, tai index.html Vitessä. Tai lataa se dynaamisesti useEffect / onMounted -hookissa.

Pudota mukautettu elementti

Käytä mukautettua elementtitagia suoraan JSX:ssä (<toimii-contact />), Vue-templateissa (<toimii-contact />) tai Angular-templateissa. Selain rekisteröi elementin kun script latautuu.

Kerro frameworkillesi siitä

TypeScript-käyttäjät — määrittele tagi global.d.ts-tiedostossa, jotta kompilaattori hyväksyy sen. Vue-käyttäjät — merkitse mukautetut elementit vite.config.js:ssä. Angular-käyttäjät — lisää CUSTOM_ELEMENTS_SCHEMA. Jokainen on yhden rivin muutos.

Buildaa ja aja

Käynnistä dev-palvelin ja lomake renderöityy. Ei wrapperia, ei @types-pakettia, ei ylimääräistä build-vaihetta.

Yleiset sudenkuopat

Reactissa et voi välittää monimutkaisia propseja (objekteja, funktioita) JSX-attribuutteina — komponentti saa merkkijonon "[object Object]". Käytä refiä + element.config = {...} -asetusta mountin jälkeen.
React 18+:n Strict Mode tuplamounttaa komponentteja kehitysvaiheessa. Web-komponentit, joilla on sivuvaikutuksia connectedCallbackissa, voivat laueta kahdesti. Toimii-palvelun komponentit hoitavat tämän — mutta jos kirjoitat oman wrapperin, muista varoa.
Vue 3 vaatii että merkitset mukautetut elementit, jotta se ei yritä ratkaista niitä Vue-komponentteina. Lisää vite.config.js-tiedostoon compilerOptions.isCustomElement joka osuu /^toimii-/-säännöllisyyteen.
Angular vaatii CUSTOM_ELEMENTS_SCHEMA:n moduulisi schemas-taulukkoon. Ilman sitä kompilaattori virheilee tuntemattomasta tagista.

Usein kysyttyä

Tarvitsenko React/Vue/Angular wrapper-komponentin?

Et. Web-komponentit ovat osa DOM-standardia — React, Vue ja Angular renderöivät tuntemattomat tagit tavallisena HTML:nä ja antavat selaimen hoitaa loput. Ei npm-pakettia, ei @types-tyyppejä, ei mitään asennettavaa.

Miten kerron TypeScriptille mukautetusta elementistä?

Lisää tämä global.d.ts-tiedostoon: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. Lomake toimii ilmankin — TypeScript vain lakkaa valittamasta.

Miten välitän propseja tai konfiguraatiota?

Anna ne tavallisina HTML-attribuutteina. Web-komponentit lukevat attribuutteja DOM:ista samalla tavalla kuin React lukee propseja JSX:stä. Dynaamisille arvoille käytä refiä ja aseta ominaisuudet imperatiivisesti tarvittaessa.

Toimiiko Next.js:n, Remixin tai SvelteKit:n kanssa?

Kyllä. Next.js:ssä lisää script-tagi app/layout.tsx-tiedostoon (next/script-komponentilla) tai pages/_document.tsx-tiedostoon. Mukautettu elementti renderöityy client-puolella — käytä "use client" -boundaryä jos olet App Routerissa.

Entä server-side rendering?

Mukautettu elementti renderöityy client-puolella, kuten kaikki web-komponentit. SSR tulostaa tagin, selain rekisteröi elementin kun script latautuu, sitten lomake ilmestyy. Tyhjää tilaa vilahtaa hetken — yleensä huomaamaton.

Upotat eri alustalle?

Sama kaksi riviä koodia, jokaiselle alustalle eri ohjeet.

WordPress

Custom HTML -lohko, Block-editori tai perinteinen. Ei lisäosia. Yksi mutka — käyttäjäroolisi tarvitsee unfiltered_html-oikeuden.

Lue koko opas

Squarespace

Pudota koodilohko mille tahansa sivulle. Vaatii Core-tilauksen (vuoden 2025 uusi nimi Businessille) tai uudemman.

Lue koko opas

Webflow

Code Embed -elementtiin mahtuu 50 000 merkkiä. Mukautettu koodi vaatii Basic-tilauksen tai uudemman. Julkaise nähdäksesi tuloksen.

Lue koko opas

Wix

Wix sandboxaa Embed-widgetin, joten käytämme jaettua menetelmää — script Settings → Custom Code -kohtaan, tagi Embed a Widget -lohkoon. Rehellinen ohje.

Lue koko opas

Shopify

Lisää Custom Liquid -osio mihin tahansa teemaan — sovellusta ei tarvita. Kassasivu vaatii Shopify Plus -tilauksen.

Lue koko opas

Staattiset sivustot

Astro, Hugo, 11ty, Jekyll — sama kaksi riviä layout-tiedostoon. Buildit pysyvät nopeina.

Lue koko opas

HTML / Muu

Pelkkä HTML-sivu riittää. Avaa tekstieditorissa, liitä, tallenna, lataa palvelimelle. Kolme askelta ja toimii.

Lue koko opas

Valmis kokeilemaan?

30 päivän ilmainen kokeilu. Ei luottokorttia. Valmis minuuteissa.

Ei luottokorttia. Valmis kahdessa minuutissa.