Booking 'Widget' code Customisation - New UI

Modified on Tue, 31 Oct 2023 at 04:42 PM

This article will help you locate your specific widget code for integration into your website.

Once you are logged into your Vetstoria Account, navigate to: Settings > Integrations > Widget


Scroll down the Widget Integration page, to the widget code at the bottom of this screen.

The code section with your unique widget code will look like this:




Click 'Copy Widget Code' to copy the code to your clipboard.

Then paste this code into a <div> inside your dedicated online booking page on your webpage. 

The <div> will act as the container into which the embedded booking widget will fit.

 

Color Customization

Within the widget code is an attribute called data-theme-customization which comprises of 10 color hex values which controls the theme of the widget. The table below describes the order of the values and what they control.


Example theme attribute 

data-theme-customisation= "000001,000002,000003,000004,000005,000006,000007,000008,000009,000010"


Hex Placeholder ID

Applies to

000001

Unused

000002

Selected Icons, including time slot, and drop down highlights

000003

Progress Bar - Past Progress Dots

000004

Text on Progress Icons and Highlighted Icons

000005

Progress Bar - Future Progress Dots

000006

Navigation Buttons - Border Top and LHS

000007

Navigation Buttons - Main Color Top
(if used with the below, will create the top gradient)

000008

Navigation Buttons - Main Color Bottom
(if used with the above, will create the bottom gradient)

000009

Navigation Buttons - Border Bottom and RHS

000010

Unused


You can use the guide below as a reference



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

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article