This article will act as a guideline to help you integrate your booking widget in the best possible way to ensure that your clients have a good user experience when booking appointments on your website.
When adding the booking widget to your website, it is critical to ensure it is integrated well.
There are a few key areas you need to check on:
- There is a very clear call-to-action button on your website stating 'Book Appointment' or 'Schedule An Appointment'
- Have a page dedicated to the online booking widget.
- Embed the Widget code in a <DIV> or Container that is responsive to the Widget.
- If applicable to your website, pay attention to the floating navigation menu on your website.
Call-to-action Buttons
Your 'Book Appointment' (Call-to-action) button should be big, bold and clear. This should stand out on the page, and be on the same level as to how you expose your phone number.
- If you have a navigation menu, make sure it is included in this.
- If you have a landing page image, place a button in the middle of this.
- If you have footer sitemap, include the link here as well to aid in Search Engine Optimisation
Examples
The call-to-action buttons have been highlighted by red boxes:
Dedicate a Page to 'Online Booking'
A page on your website should be dedicated to online booking functionality. By using a clear call-to-action button as mentioned above, means the pet owner will easily be able to locate the page. To ensure the best us of the online booking page, you should make sure to:
- Have 1/3 of the page to the left or right clearly displaying alternative contact info
- Have 2/3rds of the page assigned to the widget and allow the widget to take up the full width to improve the experience.
- Or use the entire page to place the widget
Note: If your website is mobile-friendly and responsive, the widget will be responsive the same way your website does.
Embed the widget in a DIV container
Getting the widget integrated correctly will improve the experience and usability for your clients when booking appointments.
You will need the widget code from your Vetstoria platform which is easy to get:
Read about Where do I find my booking 'Widget' code?
Your widget code will be in a format like this (This code is from our demo platform and can be used to test with):
<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>Implementing your code into your website is important to get right, and these are the key points:
Use a <DIV> in a Container on the dedicated page, that is a good width for the widget, we recommend around 200px wide, but experiment with what you feel is right.
- Have an unrestricted length, the widget will adjust length through the booking stages.
- Integrated correctly with the correct colours to match your website.
Using any of the following methods can cause poor customer experience, leading to failed bookings and can impact other features of the Vetstoria tool
So Avoid Using:
- iframes
- popups
- modal windows
- slider effects from the side.
Examples
Example of the widget showing multiple vets and multiple dates and times
Configuring the floating button on your website
Floating Navigation Menu
What is this?
This is a navigation menu that sticks to the top of your screen as you scroll down a web page. It ensures the navigation menu is always floating there, waiting to be used.
Why is it important to pay attention to this?
Occasionally when the booking widget is integrated on a web page that has a floating navigation menu, during the booking process, the widget tends to move up. This may at times cause an unpleasant booking experience for your clients. If this is applicable to your clinic's website, please contact our support team who will send you an updated widget code to resolve this issue immediately.
If you have any questions or if you need further help, please login to Vetstoria to chat with our team or use the Contact Support form linked at the top of this page.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article