Opas · 6 min lukuaika
Näin upotat lomakkeen verkkosivullesi
Lomakkeen voi lisätä sivustolle monella tavalla, yhden rivin pätkästä täysin räätälöityyn API-integraatioon. Tämä opas käy läpi sivun sisäiset upotukset, ponnahdusikkunat, web-komponentin ja JS SDK:n sekä julkisen REST API:n, jotta voit valita rakenteeseesi sopivan tavan.
Sivun sisäinen upotus
Sivun sisäinen upotus pudottaa lomakkeen suoraan sivun sisältöön, jolloin se asettuu muun sisältösi väliin kuten mikä tahansa osio. Liität pienen koodinpätkän kohtaan, johon haluat lomakkeen ilmestyvän, ja se piirtyy paikalleen — ei uudelleenohjausta, ei erillistä laskeutumissivua.
Yksinkertaisin tapa on web-komponentti: lisää <yeetform-embed>-tagi lomakkeesi slugilla, niin lomake latautuu sivun sisään. Halutessasi saman saa yhdellä JS SDK -kutsulla, joka piirtää lomakkeen valitsemaasi kohde-elementtiin.
Ponnahdusikkuna eli modaali
Joskus et halua lomaketta sivulle lainkaan ennen kuin joku sitä pyytää. Ponnahdusikkuna eli modaali pitää asettelusi siistinä ja avaa lomakkeen päällekkäisikkunaan, kun kävijä napsauttaa painiketta — ihanteellinen yhteydenottopainikkeisiin, palautewidgetteihin tai ruudun kulman toimintakehotteeseen.
JS SDK:lla kytket painikkeen kutsuun YeetForm.open(slug), ja lomake ilmestyy keskitettyyn modaaliin sivusi päälle. Kävijä täyttää sen poistumatta sivulta, ja päällekkäisikkuna sulkeutuu lähetyksen jälkeen, joten lomake ei kilpaile tilasta pääsisältösi kanssa.
Web-komponentti ja JS SDK
Useimmille sivustoille web-komponentti ja JS SDK kattavat kaiken. <yeetform-embed>-tagi on koodittomin vaihtoehto — se toimii puhtaassa HTML:ssä, CMS-lohkossa tai missä tahansa kehyksessä, joka sallii mukautetut elementit. JS SDK antaa ohjelmallisen hallinnan, kun sitä tarvitset.
SDK (public/sdk.js) tarjoaa pienen joukon metodeja:
- YeetForm.render(slug, target, options) — upota lomake valitsemaasi elementtiin sivun sisään.
- YeetForm.open(slug, options) — avaa lomake ponnahdusmodaalina.
- YeetForm.load(slug, lang) — hae lomakkeen rakenne ilman käyttöliittymää, esimerkiksi kenttien laskemiseen tai tarkasteluun.
- YeetForm.submit(slug, answers) — lähetä vastaus ohjelmallisesti omasta koodistasi.
API räätälöityihin integraatioihin
Kun tarvitset täyden hallinnan — räätälöidyn käyttöliittymän, mobiilisovelluksen tai palvelinpuolen prosessin — käytä julkista REST API:a. Se on CORS-yhteensopiva, joten voit kutsua sitä suoraan selainkoodista, ja julkisille lomakkeille todennukseton, joten rakenteen lataaminen tai vastauksen lähettäminen ei vaadi API-avainta.
Tyypillinen integraatio hakee lomakkeen rakenteen GET-pyynnöllä, piirtää kentät haluamallasi tavalla omassa käyttöliittymässäsi ja lähettää sitten kerätyt vastaukset takaisin POST-pyynnöllä. Koska rakenne on pelkkää JSONia, voit toteuttaa täysin mukautettuja asetteluja samalla kun YeetForm hoitaa tallennuksen, ilmoitukset ja analyysin kulissien takana.