Wat is Bookzo Elements? 

 

Bookzo Elements is manier om, door middel van code, elementen uit Bookzo Reserveringssoftware op te halen die je kunt plaatsen op je website. Om deze informatie om te zetten in code hebben we een handige configurator ontwikkeld. Deze configurator geeft de verschillende mogelijkheden weer en zet dit om in code die je op je website kunt plaatsen. Je ziet in deze configurator niet alleen de verschillende opties, er wordt direct een voorbeeld getoond zodat je weet hoe het straks op je website eruit komt te zien.


Een website realiseren kan je natuurlijk doen door een webbouwer in te huren maar ben je een beetje handig met je website en wil je onze boekingsstraat op je website plaatsen, dan kan je ook zelf aan de gang met Bookzo Elements.  

 

In deze handleiding nemen we je mee hoe je stap voor stap de boekingsstraat op je website krijgt. Om met Bookzo Elements te werken heb je wel een aantal dingen nodig; om te beginnen een basis website. Wij gebruiken in het voorbeeld Wordpress maar het fijne van Bookzo Elements is dat het op alle systemen gebruikt kan worden. Uiteraard werkt het in elk systeem een beetje anders. Wij werken vanuit Elements met stukjes HTML code. Het is dus belangrijk dat je deze code plaatst op een plek waar HTML geplaatst dient te worden.


Voor je kunt beginnen met het maken en plaatsen van Bookzo Elements heb je nodig; 

  • Website 

    Gevulde Bookzo database 

    API key*


* Een API key is een soort toegangscode die de informatie vanuit Bookzo ophaalt naar je website via Elements. Een API key vraag je aan via onze support, bij de aanvraag hebben we de volgende informatie nodig: 

Voor welke Bookzo klant (database) vraag je de API key aan?  

Aan welke Domeinnaam of namen wordt de API key verbonden?  

Bijvoorbeeld: mijnvakantiepark.nl of mijnvakantiepark.com 

 

Zodra deze API key door onze support gekoppeld is aan je URL kun je gaan beginnen met Elements vormgeven. 


Bookzo database koppelen met Elements 

 

Ga naar https://configurator.bookzo.nl/elements/config/home 

 

Je komt nu in configurator omgeving van de database: test. Om je eigen Bookzo gegevens te gebruiken/zien vul je hier je API key in:
 

 


Wanneer je de API key hebt ingevuld zie je je eigen data in beeld. Ook de code bovenaan zie je meteen veranderen. Dit is de code die we straks op je website gaan plaatsen nadat we alles hebben aangepast zoals jij het hebben wilt.  


We nemen je mee in een kleine tour door Elements, je kunt hier gewoon mee spelen en experimenteren.  

Er veranderen pas dingen op je website nadat je de code hebt geplaatst. Als je dus wijzigingen door wilt voeren dien je de code ook weer aan te passen op de website, de configurator is alleen de vormgever/ontwikkelplaats voor code die op een website kan worden geplaatst.

 

We zitten in het Home element. Dit is het element waarin de volgende dingen terugkomen; 

  • De zoek en boek balk
  • Alle accommodaties voordat de gast heeft gezocht 
  • Alle zoekresultaten 
  • Accommodatie informatie nadat er op een accommodatie of zoek resultaat is gedrukt.   
  • Het boekings-/reserveringsformulier  
  • De bedank/error pagina na het boeken.  

 

Het Home element is het element waar we ons nu op gaan focussen. Door alleen het Home element te plaatsen kan je al een volledige boekingsstraat maken voor je gasten. Deze hele boekingsstraat kan je aanpassen naar je eigen wensen.  

 

Bookzo Home Element vormgeven 

 

Open eens het kopje Resultaten/Results: 


  

Hier zie je verschillende opties die betrekking hebben op hoe de resultatenpagina eruit komt te zien. Bijvoorbeeld wil je een grid of rijen, en wil je iconen laten zien of niet? Links zie je de verschillende opties, rechts zie je daar direct het resultaat van. Probeer vooral dingen uit om te zien wat jij wilt op de website!


Je kan nu, net als straks echt op de website, een accommodatie openen.  

Je ziet nu hoe deze pagina er straks uit komt te zien op de site. Wanneer je nu links het menu Object druk zie je hier de opties voor hoe je wilt dat dit menu er uit ziet. Dit zijn dus instellingen als; hoeveel tekst, de datum kiezer of hoe je de afbeeldingen wilt laten zien.  

 

 

 

Het laatste menu hierin is het boekingsformulier.  

Kies een fictieve datum en druk op boeken. Je komt nu in het boekingsformulier waar je uiteraard ook weer aanpassingen kunt doen, bijvoorbeeld wil je het gastenformulier laten zien en welke informatie wil je vragen op het boekingsformulier.  

 

 

 

Neem de tijd om hier alle stappen naar wens in te vullen.  

Alle gegevens die hier zichtbaar zijn, zijn de gegevens die je in de Bookzo database hebt ingevuld. Dus het aantal beschikbare nachten, de kenmerken van een accommodatie, of een woning geschikt is voor huisdieren, enz. Zie je hier dingen die je toch anders wilt, pas je deze dus aan in je database. Open Elements opnieuw/ in een nieuw venster om de aanpassingen te zien.

 

In Bookzo Elements kan je ook elk element individueel aanpassen, dit betekent dat er heel veel flexibiliteit zit in hoe je wilt dat je website/ boekingsstraat eruit komt te zien (bijvoorbeeld je wilt eerst de kalender laten zien en dan pas de foto van de accommodatie). Dit betekent ook dat er veel meer code ontstaan wat je per stuk op de website moet plaatsen. Wanneer er een uitgebreidere website gemaakt wordt met losse elementen wordt er vaak een webbouwer ingeschakeld.  


Wij gaan nu uit van een basisreserveringsstraat met een Home element waarin je kunt boeken.  

 

Code plaatsen op de website 

  

Code plaats je niet zomaar in een tekst vlak. Hier heb je per systeem verschillende mogelijkheden voor. Bij Wordpress kan je voor code die je op de website wilt plaatsen kiezen voor het blok “Eigen HTML”. Door dit blok te gebruiken weet Wordpress  dat hij de code moet vertalen. Met het blok "Eigen HTML" kan je ook de plek van de code kiezen wat straks handig is bij bijvoorbeeld de zoekbalk.

 

Wanneer je er klaar voor bent het Bookzo Home element op je webpagina te plaatsen, plaats je eerst de volgende activeringscode op je website, idealiter plaats je deze ergens onderaan de Bookzo homepage zodat het minder tijd kost om in te lezen. 

 
 

 

 

Activeringscode 

Activeer Bookzo Elements door de volgende code te plaatsten op je website. 


<script src="https://cdn.bookzo.nl/bookzo-elements/bookzo-elements.js" async defer></script>

Met deze code weet jouw website dat hij contact moet maken met Bookzo Elements. 

  

Home 

Bepaal welke pagina op jouw website je Bookzo Home pagina wordt.  

Het kan dus zijn dat dit een andere pagina is dat de Homepagina van je website. 

Je kan bijvoorbeeld een pagina hebben met de titel ‘accommodaties’ en dat dit je Bookzo homepagina wordt. 

Plaats de volgende code op de pagina waar je het Home element wilt laten zien: 


<bookzo-home apikey='xxxxxxxxxxxxxxxxx'></bookzo-home>


Zoek element 

Als je het Home element werkend hebt laat het alle accommodaties zien. Je kan nu naar een accommodatie informatiepagina gaan en vanuit daar boeken. Maar in de meeste gevallen wil je ook een zoekfunctie hebben. Om dit te realiseren plaats je het Zoek element.  

Als je het zoekelement op dezelfde pagina plaats als het home element heb je slechts deze code nodig  
 

<bookzo-search></bookzo-search>


 Als je het zoekelement wilt plaatsen op een andere pagina dan het home element (bijvoorbeeld de homepage van je website), dien je de API key in de code te zetten. Deze code vind je bij in het linker menu onder search.  


 

Door middel van een URL te plaatsen in dit menu kun je aangeven waar je dan naar toe gelinkt moet worden na de zoekfunctie te gebruiken;  de locatie van het Home element.  

 

Om deze code correct te genereren heb je de URL van de betreffende pagina nodig. Deze plak je op de volgende plek bij het zoek element; 

 

  

 


De code die nu in het codeveld verschijnt plak je op de plek op je website (in Wordpress dus met het blok "Eigen HTML), waar je de zoek balk wilt hebben. Dit ziet er dan als volgt uit; 

 

In de editor 

 

 

Op de website 

 

 

Uiteraard kan de plek waar je de codes moest plaatsen verschillen per systeem wat je gebruikt. Kijk wat voor jou het beste werkt en verdiep je in het gebruik van jouw gekozen systeem. 

Je hebt nu een basis staan waar gasten kunnen gaan reserveren via je eigen website. 

De beschikbaarheid en prijzen worden opgehaald en nieuwe reserveringen geplaatst van/in Bookzo Reserveringssoftware.


Hoe nu verder? 

De basis staat! Als het goed is kan je nu aan de gang met Bookzo Elements via je website. Gasten kunnen boeken via je Homepage en zoek en boek. Maar natuurlijk is er nog een heleboel te ontdekken en te finetunen.

Neem gerust eens een kijkje bij alle elementen en instructies door te navigeren door de Configurator. Hier kan je dingen aanpassen en bewerken, zolang je de code niet plaatst op je website verandert er niks. 


Veel plezier en succes! 

  

Extra notitie: 

Om gevoelige gegevens te beveiligen wat verzonden wordt door de gebruiker, werkt Bookzo Elements alleen via SSL. In andere woorden; je website moet beginnen met https:// voor Bookzo Elements om te werken.