Online-varaus Shopifyssa: Klendr-lomakkeen upottaminen
Yksi Custom Liquid -osio — varauslomake suoraan Shopify-kaupassasi.
Näin se toimii
Klendr-varaussivusi — palvelut, vapaat ajat, vahvistukset ja muistutukset — näkyy omalla sivustollasi turvallisessa kehyksessä. Asiakkaat varaavat poistumatta sivustoltasi; jokainen varaus siirtyy heti Klendr-kalenteriisi.
Aloita varaussivusta Klendrissä
Widget ei ole erillinen lomake, joka täytetään — se ON sinun Klendr-varaussivusi, näytettynä sivustollasi. Rakenna siis ensin se sivu: lisää palvelut kestoineen ja hintoineen, lataa kuvat, kirjoita tervetulotekstisi ja valitse brändäyseditorissa korostus- ja taustaväri, fontti ja korttityyli. Kaikkea voi muuttaa: värit, fontit, kansikuva ja logo, palvelulista ja kuvaukset, työajat ja jopa toinen kieli. Vasta sitten kopioi upotuskoodi.
Vaiheittainen käyttöönotto
Kopioi upotuskoodi
Avaa Klendrissä Integraatiot → ”Upotuskoodi” ja kopioi henkilökohtainen koodisi — varauslinkkisi on jo siinä.
Avaa teemaeditori
Shopify-hallinta → Verkkokauppa → Teemat → Mukauta. Valitse yläpalkista sivu, jolla asiakkaat varaavat (esimerkiksi sivu ”Varaa”).
Lisää Custom Liquid -osio
Klikkaa ”Lisää osio”, valitse ”Custom Liquid” ja liitä koodi Liquid-kenttään. Custom Liquid säilyttää skriptin, sivun tekstieditori poistaisi sen.
Tallenna ja testaa
Paina Tallenna ja avaa sivu kaupassa. Tee testivaraus — se näkyy heti Klendr-kalenterissasi.
Upotuskoodi
<iframe src="https://klendr.me/book/YOUR-SALON?embed=1"
style="width:100%;border:0;height:640px" title="Booking" id="klendr-frame"></iframe>
<script>(function(){var f=document.getElementById('klendr-frame');
function tell(){try{f.contentWindow.postMessage(
{type:'klendr:hostlang',lang:document.documentElement.lang||''},'*');}catch(e){}}
addEventListener('message',function(e){var d=e.data;if(!d)return;
if(d.type==='klendr:height'&&d.height){f.style.height=(d.height+8)+'px';}
if(d.type==='klendr:ready'){tell();}});
f.addEventListener('load',tell);})();</script>Korvaa YOUR-SALON varaussivusi nimellä. Henkilökohtainen valmis koodi: Klendr → Integraatiot → ”Upota omalle sivustollesi”.
Millä kielellä lomake näkyy?
Oletuksena widget seuraa sivustoasi: koodi välittää sille sivun kielen, joten suomenkielisellä sivulla lomake on suomeksi. Jos sivusto ei ilmoita kieltä, widget käyttää salonkisi kieltä Klendristä. Haluatko kiinteän kielen? Klendr → Integraatiot → ”Upotuskoodi” — valitse kieli ennen koodin kopiointia, se lisätään linkkiin muodossa &lang=xx.
Miltä se näyttää
Sivustolla (tietokone)
Puhelimessa
Kuvakaappauksissa on esimerkkinä yksi väriteema. Sinun lomakkeesi ottaa omat värisi, fonttisi ja palvelusi — aseta ne Klendrissä, ja widget seuraa heti.
Usein kysytyt kysymykset
Miksi ei sivun editoriin?
Shopifyn tekstieditori poistaa script-tagit, jolloin lomake ei osaisi säätää korkeuttaan. Custom Liquid -osio säilyttää koodin sellaisenaan.
Toimiiko se kaikissa Shopify-paketeissa?
Kyllä. Custom Liquid on käytettävissä Online Store 2.0 -teemoissa kaikissa paketeissa; vanhemmissa teemoissa koodin voi lisätä suoraan mallitiedostoon.
Minne varaukset menevät?
Klendr-kalenteriisi, tavallisin vahvistuksin ja muistutuksin asiakkaalle.