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.

Lisää yhteydenottolomake staattiselle sivustolle: Astro, Hugo, 11ty, Jekyll

Yksi koodinpätkä layout-templateen. Toimii Astrossa, Hugossa, 11ty:ssä, Jekyllissä ja kaikissa muissa staattisten sivustojen generaattoreissa.

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

Toimiiko tämä oikeasti?

Kyllä — ja staattiset sivustot ovat puhtain tapaus. Ei lisäosa-sandboxia, ei skriptejä poistavaa editoria, ei tilaustasoja. Kaksi riviä lisätään layout-templateen samalla tavalla kuin mihin tahansa HTML-tiedostoon.

Vaihe vaiheelta

Avaa layout-templatesi

Avaa template, joka ympäröi jokaisen sivun — se, jossa <body>-tagisi jo on.

Liitä upotuskoodi

Liitä komponenttisi Toimii-sivulta kopioidut kaksi riviä <body>-tagin sisään. Jos haluat lomakkeen vain tietyille sivuille, kääri molemmat rivit generaattorisi ehtolauseeseen — script ja tagi kuuluvat yhteen.

Buildaa ja julkaise

Buildaa ja julkaise kuten tavallisesti. Avaa sitten julkaistu sivu ja lähetä itsellesi testiviesti.

Sudenkuopat

Laita tagi templateen, älä Markdown-sisältötiedostoon. Se, säilyykö raaka HTML Markdownin läpi, on generaattorikohtainen asetus — Hugossa siihen tarvitaan markup.goldmark.renderer.unsafe — kun taas templatea ei ajeta Markdownin läpi lainkaan.
Astro niputtaa script-tagit, joiden ainoa attribuutti on src. Meidän tagissamme on myös async, ja mikä tahansa src:n lisäksi oleva attribuutti saa Astron jättämään tagin rauhaan — se siis toimii sellaisenaan. Jos joskus karsit sen pelkkään src:hen, lisää is:inline.
Staattiset palvelut eivät lisää Content-Security-Policya oletuksena. Jos asetat sellaisen itse — HTTP-otsakkeena tai <meta>-tagina — salli cdn.toimii.io kohdassa script-src ja api.toimii.io kohdassa connect-src.

Usein kysyttyä

Miten lisään sen Astroon, Hugoon, 11ty:hyn tai Jekylliin?

Niiden välillä ei ole mitään eroa — yllä olevat askeleet ovat koko ohje kaikissa neljässä. Emme anna templaten tiedostopolkua tarkoituksella: jokainen generaattori nimeää tiedoston eri tavalla ja nimet ovat vaihtuneet versioiden välillä, joten tarkista oman generaattorisi dokumentaatiosta.

Toimiiko se GitHub Pagesissa, Netlifyssä, Vercelissä tai Cloudflare Pagesissa?

Kyllä, ja missä tahansa muussakin staattisia tiedostoja tarjoilevassa palvelussa — omalla puolellasi ei pyöri mitään. Palvelua tärkeämpi on osoite: lähetykset hyväksytään vain siitä verkkotunnuksesta, jonka olet Toimiissa määrittänyt, joten palvelun omassa aliverkkotunnuksessa oleva esikatselubuild renderöi lomakkeen mutta hylkää viestin.

Hidastaako se buildausta?

Ei. Script latautuu ajonaikaisesti, ei buildauksen yhteydessä — buildi tulostaa script-tagin ja selain hakee varsinaisen komponentin, kun kävijä saapuu sivulle. Astro, Hugo, 11ty, Jekyll: mihinkään näistä se ei vaikuta.

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

HTML / Muu

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

Lue koko opas

React / Vue / Angular

Käytä mukautettua elementtitagia suoraan JSX:ssä, Vue-templateissa tai Angular-komponenteissa. Ei wrapper-komponenttia, ei lisäpaketteja.

Lue koko opas

Valmis kokeilemaan?

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

Aloita ilmainen kokeilu

Ei luottokorttia. Valmis kahdessa minuutissa.