Kun olet käynyt oppaan läpi, varauswidgettisi on käytössä omalla verkkosivustollasi: vieraat valitsevat päivät, täyttävät lomakkeen ja sinä saat varauksen. Ei ohjauksia portaaliin.
Mitä tarvitset
- Kohde kohdasta Asetukset → Kohteet (tai palvelu kohdasta Palvelut)
- Muokkausoikeus verkkosivustoosi (tai kehittäjä, jolla se on)
- Noin 5 minuuttia
- Toimiva widgetti näkyvissä sivustollasi
- Vieraat voivat valita päivät ja lähettää varauksen
- Valinta kahden upotustavan (script tai iframe) välillä, ja oikea sinun sivustollesi
Vaihe 1: Avaa widgetti
Ensimmäinen widgetti luodaan automaattisesti ohjatussa käyttöönotossa. Avaa se näin:
Sivupalkki → napsauta kohdettasi kohdassa Kohteet → Widgetit → napsauta widgettiä listassa.
Näet osiot Nimi ja kieli, Tyyppi ja ulkoasu, Esikatselu, Upotuskoodi ja Varausikkuna-kentät.
Upotuskoodi-osio ilmestyy vasta, kun widgetti on tallennettu vähintään kerran. Jos et näe sitä, napsauta yläreunassa Tallenna widgetti.
Vaihe 2: Valitse upotustapa
Cabintale antaa kaksi koodinpätkää, joista valita. Molemmat tuovat saman widgetin sivullesi. Valitse se, joka sopii sivustollesi paremmin.
Script (suositus useimmille sivustoille)
<cabintale-root data-place="[place-token]" data-token="[widget-token]"></cabintale-root>
<script src="https://admin.cabintale.com/widget-embed.js" async></script>- Mukautuu itse kalenterin kokoon, joten kiinteää korkeutta ei tarvitse asettaa.
- Varausikkuna aukeaa koko näytön kokoisena sivusi päälle (toimii erinomaisesti mobiilissa).
- Toimii WordPressissä, tavallisilla HTML-sivustoilla, Squarespacessa, Webflowssa ja omissa sivustorakentajissa: kaikkialla, minne voit liittää kaksi riviä HTML:ää.
Iframe (yksinkertaisempi, varovaisempi)
<iframe
src="https://admin.cabintale.com/widget/[widget-token]"
width="100%"
height="450"
frameborder="0"
style="border: none;"
scrolling="no">
</iframe>- Pudottaa koko widgetin kiinteän kokoiseen laatikkoon sivullasi.
- Varausikkuna aukeaa kyseisen laatikon sisällä.
- Sopii sivustorakentajille, jotka eivät salli yllä olevaa scriptiä, tai kaikkialle, missä "pelkkä iframe" on helpoin tie.
Laatikon korkeus on asetettu puolestasi (450 kohteille, 550 palveluille). Jos varauslomakkeesi on pitkä ja se leikkautuu, nosta height-lukua.
Vaihe 3: Kopioi koodi
Vaihda valitsemaasi versioon ja napsauta Kopioi script-koodi (tai Kopioi iframe-koodi). Painike vahvistaa hetken, että kopiointi onnistui.
Vaihe 4: Liitä se verkkosivustollesi
Mihin liittää:
| Alusta | Mihin |
|---|---|
| WordPress | Muokkaa sivua → lisää Custom HTML -lohko → liitä |
| Squarespace | Lisää Code-lohko → liitä |
| Wix | Embed → HTML iframe (käytä iframe-koodia) |
| Webflow | Lisää Embed-komponentti → liitä |
| Tavallinen HTML | Mihin tahansa <body>-elementin sisälle |
Tallenna ja julkaise sivu. Avaa se. Widgetin pitäisi näkyä siinä kohdassa, johon liitit koodin.
Vaihe 5: Testaa varaus
Napsauta widgettiäsi kuin vieras. Valitse päivä, täytä lomake ja lähetä. Tarkista, että:
- Varaus näkyy hallintapaneelin kohdassa Varaukset.
- Saat isännän sähköpostin (jos sähköposti-ilmoitukset on kytketty päälle).
Jos asetit kohteen tilaan Varauspyynnöt, varaus on tilassa Odottaa, kunnes vahvistat sen (katso Välitön varaus vai varauspyyntö).
Mitä vieraat näkevät
- Kalenteri, jossa näkyy 1, 2 tai 3 kuukautta (säädettävissä ulkoasussa).
- Vapaat päivät ovat napsautettavia. Varatut tai nollahintaiset päivät on estetty.
- Päivien valinnan jälkeen aukeaa varausikkuna, jonka lomaketta voit mukauttaa (katso Oma varauslomake).
- Lähetyksen jälkeen vieras näkee vahvistusviestin. Sanamuoto on eri heti varattavassa ja pyyntötilassa.
Ongelmanratkaisu
| Oire | Syy | Ratkaisu |
|---|---|---|
| Widgetti ei näy lainkaan | Kohde tai widgetti on tilassa Ei aktiivinen | Avaa kohde ja widgetti. Molempien on oltava Aktiivisia |
| Upotuskoodi-osio on tyhjä | Widgettiä ei ole vielä tallennettu | Napsauta tietosivun yläreunassa Tallenna widgetti |
| Iframe on liian matala ja varausikkuna leikkautuu | Oletuskorkeus 450/550 ei riitä lomakkeesi pituudelle | Nosta iframen height-lukua tai vaihda script-koodiin (se mukautuu itse) |
| Kopioi-painike ei näytä toimivan | Jotkin selaimet estävät kopioinnin suojaamattomilla sivuilla | Varmista, että sivustosi käyttää HTTPS:ää, tai valitse koodi ja kopioi näppäimillä Ctrl+C / Cmd+C |
| Widgetti näyttää väärän kielen | Widgetin kieleksi on asetettu jokin muu | Avaa widgetti ja muuta Widgetin kieli (katso Kielet ja valuutat) |
| Script-koodi ei lataudu sivustollasi | Sivustosi estää ulkopuoliset scriptit | Vaihda iframe-koodiin tai pyydä verkkosivustosi ylläpitäjää sallimaan admin.cabintale.com |
Aiheeseen liittyvät oppaat
- Useita widgettivariaatioita — Useita widgettivariaatioita
- Ulkoasu (teema, värit, asettelu) — Widgetin ulkoasu
- Oma varauslomake — Oma varauslomake
- Aikavälikalenteri (palveluille) — Aikavälikalenteri (palveluwidgetti)