Wat zijn de beste methodes voor het toevoegen van de boekingswidget op mijn website?

Gewijzigd op Wo, 19 Jul, 2023 om 10:54 AM

Dit artikel dient als een richtlijn om je te helpen om je boekingswidget op de best mogelijke manier te integreren, zodat je klanten een goede gebruikerservaring hebben bij het boeken van afspraken op je website.


Als je de boekingswidget aan je website toevoegt, is het belangrijk dat deze goed geïntegreerd is.

Er zijn een paar belangrijke onderdelen die je moet controleren:


⦁    Er staat een duidelijke call-to-action knop op je website met de tekst 'Boek een afspraak' of 'Plan een afspraak'.

⦁    Wijd een pagina aan de online boekingswidget.

⦁    Sluit de Widget-code in op een <DIV> of Container die reageert op de Widget.

⦁    Besteed, indien van toepassing op je website, aandacht aan het zwevende navigatiemenu op je website.


Call-to-action knoppen


Je knop 'Afspraak maken' (Call-to-action) moet groot, vetgedrukt en duidelijk zijn. Dit moet opvallen op de pagina en op hetzelfde manier staan als hoe je je telefoonnummer weergeeft. 


⦁    Als je een navigatiemenu hebt, zorg er dan voor dat dit hierin wordt opgenomen.

⦁    Als je een afbeelding op je landingspagina hebt, plaats dan een knop in het midden hiervan.

⦁    Als je een sitemap in de voettekst hebt, voeg hier dan ook de link toe om te helpen bij zoekmachineoptimalisatie

Voorbeelden


De knoppen om op te roepen tot actie zijn gemarkeerd met rode vakjes:


 KB-Widget-ButtonExamples 


KB-Widget-ButtonExamples2 

 

Een pagina wijden aan 'Online boeken'


Een pagina op je website moet gewijd zijn aan online boekingsfuncties. Door een duidelijke call-to-action knop te gebruiken, zoals hierboven vermeld, kan de eigenaar van het huisdier de pagina gemakkelijk vinden. Voor een optimaal gebruik van de online boekingspagina moet je ervoor zorgen dat:


⦁    1/3 van de pagina links of rechts duidelijk alternatieve contactgegevens laat zien

⦁    2/3 van de pagina is gebruikt voor de widget en deze widget de volledige breedte inneemt om de ervaring te verbeteren. 

⦁    Of gebruik de hele pagina om de widget te plaatsen

Opmerking: Als je website mobielvriendelijk en responsief is, zal de widget op dezelfde manier reageren als je website.

 

Met een speciale pagina kun je ook conversies van bezoekers bijhouden als je GA4 gebruikt voor je website. Lees er hier meer over: Vetstoria en Google Analytics 4 Gebeurtenis tracking


 

 

De widget insluiten in een DIV-container


Door de widget correct te integreren, verbeter je de ervaring en bruikbaarheid voor je klanten bij het boeken van afspraken.


Je hebt de widgetcode van je Vetstoria-platform nodig, die eenvoudig te verkrijgen is: Lees meer over Waar vind ik mijn boekingscode? 


Je widgetcode zal er zo uitzien (Deze code is van ons demoplatform en kan gebruikt worden om mee te testen):


<div id="oabp-widget" data-mode="html5" data-domain="booking-demo.vetstoria.com" data-site-hash="551a955953759" data-mobile-message="Touch Here to Make an Appointment" data-auto-mobile-redirection="false" data-force-desktop-view="false" data-offset="0" data-theme-customisation="3866a3,63b8ee,3866a3,ffffff,97c4fe,97c4fe"></div>
<script src="https://booking-demo.vetstoria.com/js/oabp-widget.min.js"></script> 


Het implementeren van je code in je website is belangrijk om goed te doen, en dit zijn de hoofdpunten:


⦁    Gebruik een <DIV> in een container op de speciale pagina, dat is een goede breedte voor de widget, we raden ongeveer 200px breed aan, maar experimenteer met wat jij goed vindt.

⦁    Gebruik een onbeperkte lengte, de widget past de lengte aan tijdens het boeken.

⦁     Correct geïntegreerd met de juiste kleuren om bij je website te passen.

Het gebruik van een van de volgende methoden kan leiden tot een slechte klantervaring, met mislukte boekingen tot gevolg, en kan andere functies van de Vetstoria-tool beïnvloeden


Vermijd Dus Gebruik Van:


⦁    iframes

⦁    pop-ups

⦁    modale vensters

⦁    slider-effecten aan de zijkant.

Voorbeelden

Voorbeeld van de widget die meerdere dierenartsen en meerdere data en tijden toont


 

 

Configuring the floating button on your website


Floating Navigation Menu


Wat is dit?


Dit is een navigatiemenu dat boven aan je scherm blijft hangen wanneer je naar beneden scrolt op een webpagina. Het zorgt ervoor dat het navigatiemenu altijd zweeft, wachtend om gebruikt te worden.


Waarom is het belangrijk om hier aandacht aan te besteden?


Soms, wanneer de boekingswidget is geïntegreerd op een webpagina met een zwevend navigatiemenu, heeft de widget tijdens het boekingsproces de neiging om omhoog te bewegen. Dit kan soms leiden tot een onaangename boekingservaring voor je klanten. Als dit van toepassing is op de website van jouw kliniek, neem dan contact op met ons supportteam dat je een bijgewerkte widgetcode zal sturen om dit probleem onmiddellijk op te lossen.  

 

Als je vragen hebt of meer hulp nodig hebt, log dan in op Vetstoria om met ons team te chatten of gebruik het formulier Contact Opnemen met Ondersteuning dat bovenaan deze pagina is gekoppeld.


Was dit artikel nuttig?

Dat is fantastisch!

Hartelijk dank voor uw beoordeling

Sorry dat we u niet konden helpen

Hartelijk dank voor uw beoordeling

Laat ons weten hoe we dit artikel kunnen verbeteren!

Selecteer tenminste een van de redenen
CAPTCHA-verificatie is vereist.

Feedback verzonden

We stellen uw moeite op prijs en zullen proberen het artikel te verbeteren