Toimii on julkaistu hiljaisesti, joten nämä ohjeet kuvaavat palvelua, johon voit rekisteröityä ja jota voit käyttää jo nyt. Muutama osa on vielä matkalla — iOS- ja Android-sovellukset julkaistaan vielä vuoden 2026 aikana.

Upota yhteydenottolomake Reactiin, Vueen tai Angulariin

Web-komponentit ovat osa DOM:ia. Lisää 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-your-code></toimii-your-code>

Toimiiko tämä oikeasti?

Kyllä — kyseessä on tavallinen mukautettu elementti: mitään ei tarvitse asentaa eikä wrapperia kirjoittaa. React ei vaadi lainkaan konfiguraatiota. Vue ja Angular tarvitsevat kumpikin yhden rivin, joka kertoo kääntäjälle, ettei tagi ole niiden — molemmat alla.

Vaihe vaiheelta

Lataa script

Lisää script-tagi siihen HTML-runkoon, josta sovelluksesi tarjoillaan — index.html-tiedostoon, josta build lähtee, tai frameworkisi juurilayoutiin.

Lisää mukautettu elementti

Sijoita tagi siihen kohtaan, johon haluat lomakkeen; JSX sekä Vue- ja Angular-templatet ottavat sen sellaisenaan. Kopioi se komponenttisi sivulta Toimiissa — tagin loppuosa on komponentin oma koodi.

Buildaa ja julkaise

Buildaa ja julkaise kuten tavallisesti, ja lähetä sitten itsellesi testiviesti julkaistulta sivulta äläkä dev-palvelimelta — lähetykset hyväksytään vain siitä verkkotunnuksesta, jonka olet Toimiissa määrittänyt.

Sudenkuopat

Vue vaatii, että tagi merkitään mukautetuksi elementiksi — muuten se etsii Vue-komponenttia ja varoittaa. isCustomElement-kääntäjäasetus ottaa funktion, joten testaa etuliitettä toimii-, sillä loppuosa vaihtelee komponenteittain.
Angular vaatii CUSTOM_ELEMENTS_SCHEMA:n schemas-taulukkoon — standalone-komponentin omaan tai vanhemmassa sovelluksessa sen NgModulen. Ilman sitä kompilaattori antaa virheen tuntemattomasta tagista.

Usein kysyttyä

Tarvitsenko React/Vue/Angular wrapper-komponentin?

Et. Script määrittelee elementin selaimessa, joten frameworkisi tehtävä on vain renderöidä tagi — eikä buildissasi tarvitse muuttaa mitään, kun julkaisemme komponentista uuden version.

Miten kerron TypeScriptille mukautetusta elementistä?

Määrittele se JSX:n IntrinsicElements-rajapintaan sillä tagilla, jota oma komponenttisi käyttää. Emme tulosta määrittelyä tähän: React 19 siirsi kyseisen nimiavaruuden, ja oikea muoto riippuu tsconfigin jsx-asetuksesta — ota se Reactin omasta päivitysoppaasta. Lomake toimii ilmankin.

Miten välitän propseja tai konfiguraatiota?

Mitään ei tarvitse välittää. Se, mitä lomake kysyy ja minne se toimittaa viestit, määritetään Toimiissa ja leivotaan siihen bundleen, jonka script lataa — siksi tagissa ei ole attribuutteja.

Toimiiko Next.js:n tai muun React-frameworkin kanssa?

Kyllä. Next.js:ssä lataa se next/script-komponentilla juurilayoutista — se on dokumentoitu paikka koko sivuston laajuiselle scriptille. "use client" -boundaryä tarvitaan vain, jos kiinnität siihen load- tai error-käsittelijän; tagi itse ei tarvitse sitä.

Entä server-side rendering?

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

Upotatko eri alustalle?

Samat 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

Lisää Code Block mille tahansa sivulle. Vaatii tilauksen, jonka code blockit saavat suorittaa JavaScriptiä.

Lue koko opas

Webflow

Vedä canvasille Code Embed -elementti ja liitä kaksi riviä. Mukautettu koodi on Webflowissa maksullinen ominaisuus — se on ainoa ehto.

Lue koko opas

Wix

Käytä Wixin Custom Element -elementtiä: komponentin script-URL Server URL -kenttään, sen tagi Tag Name -kenttään. HTML-upotus ei toimi — se on sandboxattu iframe.

Lue koko opas

Shopify

Lisää Custom Liquid -osio Shopifyn teema-editorissa — ei sovellusasennusta, ei teemakoodin muokkausta. Kassasivu on ainoa paikka, johon se ei sovi.

Lue koko opas

Staattiset sivustot

Astro, Hugo, 11ty, Jekyll — samat 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.

Aloita ilmainen kokeilu

Ei luottokorttia. Valmis kahdessa minuutissa.