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

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

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

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

Toimiiko tämä oikeasti?

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

Vaihe vaiheelta

Avaa layout-templatesi

Avaa layout-template, joka kääri jokaisen sivun — _layouts/default.html Jekyllissä, src/layouts/Base.astro Astrossa, layouts/partials/footer.html Hugossa, _includes/layout.njk 11ty:ssä.

Liitä upotuskoodi

Liitä Toimii-koontinäytöltä saamasi kaksi riviä <body>-tagin sisään. Näyttääksesi lomakkeen vain tietyillä sivuilla, suojaa mukautettu elementti generaattorisi templating-syntaksilla (front matter -lippu, sivun slug-tarkistus jne.); script-tagi voi pysyä layoutissa.

Käynnistä dev-palvelin

Käynnistä dev-palvelin (npm run dev / hugo server / jekyll serve). Lomake renderöityy heti — ei lisäkonfiguraatiota, ei lisäosaa, ei @types-pakettia.

Buildaa ja julkaise

Buildaa ja julkaise normaalisti (Netlify, Vercel, GitHub Pages, S3 + CloudFront, missä tahansa pidätkin sivuasi). Lomake jatkaa toimintaansa — Toimii-palvelun CDN hoitaa loput.

Yleiset sudenkuopat

Useimmat staattisten sivustojen Markdown-renderöijät poistavat raa'an HTML:n oletuksena. Jekyllissä / 11ty:ssä / Hugossa salli raaka HTML tai liitä upotus layout-tiedostoon sisältötiedoston sijaan.
Hot reload uudelleeninjektoi joskus scriptin useita kertoja kehitysvaiheessa. Se on dev-only-erityisyys; tuotantobuildit tulostavat tagin kerran sivua kohti.
Joillakin palveluilla on aggressiivisia Content-Security-Policy-otsikoita (Netlify ja Vercel sallivat mukauttamisen). Salli cdn.toimii.io ja api.toimii.io kohdissa script-src ja connect-src.
Älä laita koodinpätkää <head>-tagin sisään. Mukautettu elementti on body-tason tagi — pidä script <head>-tagissa jos haluat (asynkronisesti), mutta tagin täytyy olla <body>-tagissa.

Usein kysyttyä

Miten lisään Astroon?

Pudota script-tagi peruslayoutkomponenttiin (esim. src/layouts/Base.astro) ja käytä mukautettua elementtiä missä tahansa .astro-tiedostossa. Astro renderöi tuntemattomat elementit tavallisena HTML:nä — itse tagiin ei tarvita client-direktiiviä.

Miten lisään Hugoon?

Lisää koodinpätkä layouts/partials/footer.html-tiedostoon (tai sinne, mistä lataat mukautetut skriptit) ja käytä mukautettua elementtiä sisältötiedostoissa, layout-templateissa tai shortcodeissä.

Miten lisään 11ty:hyn (Eleventy)?

Lisää koodinpätkä peruslayoutiin (_includes/layout.njk Eleventyn oletuksissa). Se koskee jokaista layoutia laajentavaa sivua. Pidä hot-reload päällä; näet lomakkeen heti kun dev-palvelin uudelleenrakentaa.

Miten lisään Jekylliin / GitHub Pagesiin?

Lisää koodinpätkä _layouts/default.html-tiedostoon (tai valitsemaasi layoutiin). Käytä mukautettua elementtiä missä tahansa Markdown-postauksessa sallimalla html Markdown-renderöijässä.

Hidastaako buildauksen?

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: kaikki vaikuttamattomia.

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

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.

Ei luottokorttia. Valmis kahdessa minuutissa.