Booking 'Widget' code Customisation - New UI

Modified on Tue, 31 Oct, 2023 at 4: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.