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 use the 'submit a request' form linked at the top of this page to reach out to our support team.
Comments
Article is closed for comments.