Kuidas lisada online-broneerimine oma kodulehele

Lühivastus: Tervita online-broneerimise lisamiseks kopeeri üks script-rida oma kodulehe HTML-i, määra data-clinic-atribuudis salongi broneerimisaadress ning vali inline-, popup- või bubble-režiim. Inline kuvab vormi lehe sees, popup avab selle nupust modaalaknas ja bubble lisab ujuva broneerimisnupu. Allolev generaator koostab valmis koodi, mille saad oma veebihaldurisse kleepida.

Veebilehele põimitud broneerimine sobib siis, kui tahad viia külastaja teenuse vaatamisest vaba aja valimiseni ilma uut vahekaarti avamata. See ei asenda sinu avalikku broneerimislinki: otselink on endiselt parim Instagrami bio, Google'i ettevõtteprofiili ja e-kirja jaoks. Vidin lisab sama broneerimisvoo sinu enda lehele.

Kui broneerimisleht ise pole veel valmis, alusta juhendist Veebibroneering salongile ja kliinikule. Oma aadressi leiad juhendist Sinu avalik broneerimisleht ning teenuste, spetsialistide, kinnitamise ja keelte käitumist juhid lehel Broneerimise seaded.

Milline kuvamisviis valida?

Tervita embed.js toetab kolme režiimi. Need kasutavad sama broneerimislehte, kuid sobivad erinevasse kujundusse.

Inline on kõige sirgjoonelisem: klient näeb kohe, et saab aja valida, ning vidin kohandab kõrgust broneerimisvoo sisuga. Algkõrgus on vaikimisi 520 pikslit ja seda saab muuta data-min-height-atribuudiga. Popup ja bubble lükkavad broneerimisvormi laadimise klõpsu hetkeni, kuid lisavad modaalakna kasutajakogemuse, mida tuleb päris seadmetel testida.

Koosta oma kood

Sisesta generaatorisse Tervita broneerimisaadress ehk slug, vali režiim ja keel ning kopeeri valmis kood. Slug on see osa, mis asub otselingis pärast /booking/. Näiteks aadressi https://tervita.ee/booking/minu-salong slug on minu-salong.

<script src="https://tervita.ee/embed.js" data-clinic="minu-salong" data-mode="inline" data-lang="et" async></script>

Ära lisa slugi ette domeeni, kaldkriipse ega /booking/ osa. Kui muudad hiljem Tervitas broneerimislehe aadressi, muutub ka toimiv link kohe; uuenda siis data-clinic väärtust igas kohas, kuhu vidina lisasid.

Kolm töötavat koodinäidet

1. Inline: vorm otse lehe sees

<script
  src="https://tervita.ee/embed.js"
  data-clinic="minu-salong"
  data-lang="et"
  async
></script>

Inline on vaikerežiim, seega data-mode="inline" pole kohustuslik. Skript lisab enda asukohta iframe'i, annab sellele 100% laiuse, vähemalt 520 piksli kõrguse ja loading="lazy" atribuudi. Broneerimisleht saadab oma kõrguse turvaliselt postMessage-sõnumiga ning vidin võtab vastu ainult õige Tervita origini ja õige iframe'i sõnumi.

Kui sinu teenuste nimekiri on pikk või lehe kujunduses jääb alguses liiga palju tühja ruumi, määra täisarvuline miinimum:

<script
  src="https://tervita.ee/embed.js"
  data-clinic="minu-salong"
  data-lang="et"
  data-min-height="640"
  async
></script>

2. Popup: nupp avab broneerimise

<script
  src="https://tervita.ee/embed.js"
  data-clinic="minu-salong"
  data-lang="et"
  data-mode="popup"
  data-label="Broneeri aeg"
  data-color="#1f6f5f"
  async
></script>

Nupp ilmub täpselt sinna, kuhu koodi paigutad. data-label määrab nupu teksti ja data-color taustavärvi. Avamisel lisab vidin Tervita vormi keskse modaalakna sisse. Selle saab sulgeda sulgemisnupust, taustale klõpsates või Escape-klahviga; iframe'i aadress eemaldatakse pärast sulgemist, et järgmine avamine algaks värskelt.

3. Bubble: broneerimine igal lehel nähtaval

<script
  src="https://tervita.ee/embed.js"
  data-clinic="minu-salong"
  data-lang="et"
  data-mode="bubble"
  data-label="Broneeri aeg"
  data-color="#1f6f5f"
  async
></script>

Bubble lisatakse lehe paremasse alanurka. Kuna nupp on fikseeritud ja väga kõrge z-index-väärtusega, testi seda eriti mobiilis: küpsisenõusoleku riba, vestlusaken, „tagasi üles” nupp või telefoni alumine navigeerimisriba võivad võistelda sama koha pärast.

Mida iga data-atribuut tegelikult teeb?

Need on kõik avaliku skripti toetatud seadistused. Ära lisa oletuslikke atribuute teenuse, spetsialisti, kuupäeva või kampaania eelseadmiseks: embed.js neid ei loe.

Kuhu kood oma veebihalduris panna?

Üldreegel on lihtne: inline- või popup-kood läheb lehe sisusse täpselt sinna, kus vorm või nupp peab ilmuma. Bubble-kood võib asuda globaalses jaluses või platvormi saidiüleses custom-code alas, kui soovid nuppu kõigil lehtedel. Ära kleebi sama bubble-koodi korraga nii lehe sisusse kui globaalsesse jalusesse.

WordPress

Lisa plokiredaktoris Custom HTML plokk ja kleebi kood sinna. WordPressi ametlik Custom HTML juhend hoiatab, et kasutajalt ilma unfiltered_html õiguseta võidakse script- ja iframe-märgend salvestamisel eemaldada. Kui kood pärast uuesti avamist kadus, palu administraatoril lisada see sobiva õigusega; ära proovi filtrit suvalise turvapluginaga välja lülitada.

Webflow

Lisa soovitud kohta Code Embed element, kleebi kood ja avalda leht. Webflow ametliku juhendi järgi kuvatakse skripti puhul Designeris kohatäide ning tegelik tulemus on nähtav eelvaates või avaldatud saidil. Seega ära otsusta ainult disainivaate põhjal, et vidin ei tööta.

Wix

Wix Editoris vali Add Elements → Embed Code → Embed HTML, sisesta kood ja määra elemendile piisav suurus; sammud on kirjas Wixi ametlikus embed-juhendis. Wix võib koodi oma konteinerisse põimida, mistõttu on inline-režiim tavaliselt kõige etteaimatavam. Popup või bubble võib jääda embed-elemendi piiridesse: kontrolli avaldatud desktop- ja mobiililehte ning kasuta vajadusel selle asemel otselinki.

Muu CMS või arendaja tehtud sait

Otsi välja nimega Custom HTML, Embed code, Code block või Custom code. Kui redaktor eemaldab skripti, peab arendaja lisama selle lehe mallis. Reacti, Vue või muu ühe lehe rakenduse puhul ei tohi eeldada, et script-elemendi eemaldamine komponendi sulgemisel koristab vidina täielikult: avalikul embed.js-il puudub teardown-API ning loodud elemendid, ühine kasutajaliides või kuulajad võivad alles jääda. Korduv mount ja unmount pole toetatud ning võib integratsiooni dubleerida. Laadi skript üks kord stabiilses dokumendimallis, kasuta täislaadimisega eraldi lehte või jäta otselink. Anna arendajale link https://tervita.ee/embed.js ja atribuutide tabel; faili sisu projekti kopeerimine looks kiiresti vananeva eraversiooni.

Paigutus, mis aitab broneerida

Vidin ei paranda peidetud tegevusnuppu. Pane esimene „Broneeri aeg” võimalus lehe ülaossa ning korda seda pärast teenuste või hindade osa. Eraldi broneerimislehel töötab inline hästi. Avalehel on sageli puhtam popup-nupp, sest pikk vorm ei lükka ülejäänud sisu alla. Bubble sobib lisakanaliks, mitte ainsaks võimaluseks: nähtav tekstilink või nupp on otsingule, klaviatuurile ja kasutajale arusaadavam.

Kasuta nupul tegevust kirjeldavat teksti, näiteks „Broneeri aeg”, mitte ebamäärast „Vajuta siia”. Hoia sama sõnastus päises, teenusekaartidel ja mobiilivaates. Kui teenused on eri keeltes, määra data-lang igal keeleversioonil eraldi; ära looda ainult brauseri keelele.

CSP ja turvaseaded

Range Content Security Policy võib välise skripti või iframe'i blokeerida. Host-lehe poliitikas peab Tervita origin olema lubatud vähemalt skriptide ja raamide all: script-src juhib JavaScripti allikaid ning frame-src iframe'ide allikaid. Vaata MDN-i script-src selgitust ja frame-src selgitust.

Tervita vidin lisab praegu ka <style>-ploki ja dünaamilisi style-atribuute. Väga range style-src võib need blokeerida. Ära lisa kogu saidile pimesi 'unsafe-inline': MDN hoiatab, et see nõrgestab CSP kaitset. Palu arendajal olemasolev poliitika ja brauseri CSP-vead üle vaadata; kui inline-stiile ei saa turvaliselt lubada, kasuta seni avalikku broneerimislinki.

Privaatsus ja andmekaitse

Embed on kolmanda osapoole ressurss sinu lehel. embed.js laaditakse Tervita domeenilt ning broneerimisvormi avamisel teeb brauser Tervitale võrgupäringu. Inline-režiimi iframe on lazy-laadimisega, popup ja bubble annavad iframe'ile aadressi alles klõpsul, kuid skript ise laaditakse lehe avamisel. IP-aadress võib olla isikuandmed; Euroopa Komisjoni GDPR-i selgitus nimetab seda otseselt.

Uuenda oma privaatsusteates vastuvõtjaid, eesmärke ja õiguslikku alust vastavalt sellele, kuidas sinu ettevõte Tervitat kasutab. Euroopa Komisjoni läbipaistvuse juhis loetleb, millist infot tuleb andmete kogumisel inimesele anda. See ei tähenda automaatselt, et iga embed vajab küpsisebännerit või et seda kindlasti ei vaja: kontrolli oma tegelikku konfiguratsiooni, privaatsusteadet ja õiguslikku alust. Praktilise tausta leiad ka artiklist GDPR salongidele ja kliinikutele.

Jõudlus ja ligipääsetavus

Koodinäites olev async laseb brauseril klassikalise skripti lehe parsimisega paralleelselt laadida; seda käitumist kirjeldab MDN-i script-dokumentatsioon. Inline-iframe kasutab loading="lazy", mis võib laadimist edasi lükata, kuni raam läheneb vaatealale; vaata MDN-i iframe-juhendit. Popup ja bubble ei laadi broneerimisraami enne klõpsu. Sellegipoolest mõõda avaldatud lehte ise, sest CMS, analüütika, fondid ja muud vidinad määravad kogutulemuse.

Ligipääsetavuse jaoks testi vähemalt Tab-, Shift+Tab-, Enter-, Space- ja Escape-klahvi, nähtavat fookust, suumi ning ekraanilugeja nimetusi. Tervita loob päris button-elemendi, annab iframe'ile pealkirja ja lubab modaali Escape'iga sulgeda. W3C modaaldialoogi muster nõuab lisaks fookuse viimist dialoogi, selle hoidmist dialoogis ja sulgemisel käivitajale tagastamist. Ära eelda vastavust ainult selle põhjal, et visuaalne popup töötab: kontrolli oma saidil kogu voogu. Kui popup ei läbi klaviatuuritesti, eelista inline-režiimi või nähtavat otselinki.

Testi enne avaldamist

1. Ava leht inkognitoaknas ja kontrolli, et brauserikonsoolis pole data-clinic ega CSP viga.
2. Tee proovibroneering desktopis ja telefonis: vali teenus, spetsialist ja aeg ning jõua kontaktivormini.
3. Kontrolli kõiki saidi keeli. data-lang="et" peab avama eesti, ru vene ja en inglise vormi.
4. Inline puhul jälgi, et sisu ei lõigataks ja kõrgus muutuks sammude vahel. Popup/bubble puhul kontrolli avamist, sulgemist ja kerimise taastumist.
5. Navigeeri ainult klaviatuuriga ning testi 200% suumiga.
6. Vaata üle mobiili alumine serv: bubble ei tohi katta nõusolekuriba ega teisi juhtnuppe.
7. Säilita nähtav varulink kujul https://tervita.ee/booking/minu-salong, et klient saaks jätkata ka siis, kui brauser või saidi turvapoliitika vidina blokeerib.

Korduma kippuvad küsimused

Kas inline, popup ja bubble võivad olla samal lehel?

Tehniliselt toetab skript mitut embed'i ning popup'id jagavad üht modaalakent. Kasutajakogemuse mõttes piisab tavaliselt ühest põhimeetodist ja ühest nähtavast varulingist. Kolm sama eesmärgiga nuppu võivad lehe segasemaks teha.

Miks kuvatakse vale keel?

Määra data-lang väärtuseks täpselt et, ru või en. Kui atribuut puudub, loeb skript host-lehe <html lang> väärtuse kaks esimest tähte. Kontrolli, et sinu CMS määraks selle igal keeleversioonil õigesti.

Miks vidin on tühi või ei ilmu?

Kõigepealt kontrolli slugi, HTTPS-i ja brauseri konsooli. Puuduv data-clinic peatab skripti. Vale slug avab puuduva kliiniku vaate. CSP võib blokeerida skripti, iframe'i või stiilid ning CMS võib script-märgendi salvestamisel eemaldada.

Kas nupu värvi ja teksti saab muuta?

Popup- ja bubble-režiimis jah: data-label muudab teksti ning data-color taustavärvi. Tekst on valge, seega vali tume ja piisava kontrastiga värv. Inline-režiimis neid atribuute ei kuvata, sest eraldi nuppu ei looda.

Kas klient peab Tervitasse sisse logima?

Ei. Avalik broneerimisleht on kliendile ilma Tervita kontota kasutatav. Sinu seadetes võib olla sisse lülitatud e-posti või SMS-i kontaktikinnitus; see on broneeringu kontroll, mitte Tervita kasutajakonto. Vaata täpset käitumist lehelt Broneerimise seaded.

Kas embed vähendab mitteilmumisi?

Vidin ise ei garanteeri seda. Ta muudab aja leidmise mugavamaks; mitteilmumisi mõjutavad lisaks kinnitused, meeldetuletused, lihtne tühistamine ja ümberbroneerimine. Vaata eraldi juhendit Kuidas vähendada mitteilmumisi.

Kui avalik leht ja teenused on valmis, genereeri ülal kood, lisa see ühele testlehele ja tee kogu broneerimisvoog ise läbi. Nii saad enne saidiülese bubble'i või avalehe CTA avaldamist kontrollida korraga kujundust, keelt, privaatsust, ligipääsetavust ja päris broneeringu käitumist.