Online-varaus Claudella tehdyllä sivustolla
Yksi kehote — ja varauslomake on sivustolla, jonka Claude sinulle teki.
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”. Valitse widgetin kieli (tai jätä automaattiseksi) ja kopioi koodi — varauslinkkisi on jo siinä.
Avaa keskustelu, jossa sivustosi on
Palaa siihen Claude-keskusteluun (tai projektiin), jossa teit sivuston. Jos niitä on useita, valitse se, jossa sivuston tiedostot ovat.
Lähetä alla oleva kehote
Liitä kehote ja heti sen alle upotuskoodisi, jotta Claudella on molemmat. Claude sijoittaa widgetin sivulle.
Julkaise ja testaa
Julkaise sivusto ja tee testivaraus. Se näkyy heti Klendr-kalenterissasi ja asiakas saa tavallisen vahvistusviestin.
Kehote Claudelle
Kopioi ja lähetä Claudelle siinä keskustelussa, jossa rakennat sivustoasi.
Lisää sivustolleni online-varauswidget. Lisää alla oleva HTML sivulle, jolla asiakkaiden on tarkoitus varata (esimerkiksi "Varaa"-sivulle tai etusivun varausosioon). Liitä se juuri sellaisenaan — älä muuta iframen osoitetta äläkä poista skriptiä: ne huolehtivat korkeudesta ja widgetin kielestä. Säännöt: - Sijoita se keskitettyyn, enintään noin 900px leveään säiliöön, mobiilissa hieman reunusta. - Älä anna iframelle tai millekään ylemmälle elementille kiinteää korkeutta tai overflow:hidden-arvoa — korkeuden asettaa skripti. - Jätä ympäröivä ulkoasu ennalleen; widgetillä on omat tyylinsä. - Jos sivustolla on "Varaa aika" -painike, linkitä se tähän osioon. Tässä on koodi:
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
Pitääkö osata koodata?
Ei. Kopioit vain kaksi tekstilohkoa: kehotteen ja upotuskoodisi. Muun hoitaa Claude.
Toimiiko se staattisella sivustolla?
Kyllä. Widget on tavallinen iframe ja pieni skripti — se toimii millä tahansa sivustolla riippumatta siitä, miten se on tehty.
Minne varaukset menevät?
Klendr-kalenteriisi, tavallisin vahvistuksin ja muistutuksin asiakkaalle.