With the booking widget, customers can easily book from your website or in your social media bio.
In this article, you will learn how to set up your booking widget, select the suitable widget type, customize its appearance and contents, and generate the HTML code to embed your widget in your website. You can also customize your widget's color theme, promote specific services, and include all your business locations.
Creating a booking widget is only available on the web, tablet, and Pay Desk version of Vagaro.
-
Navigate to → under Booking.
-
Expand the Create Widget for drop-down menu:
-
Select your Business: Customers can book with any of your employees through the widget.
-
Or select an Employee: Customers can only book with that employee through the widget.
Note
If you have the option to create a widget for This Location or a Multi-Location, see Set Up the Widget for Multiple Locations.
-
-
Select the tabs you want to include in your widget. You can also select what services or classes you want to show in your widget. See Promote Specific Services and Classes for more information.
-
If you want your customers directed to a specific tab first, like gift cards or services, expand the Open this tab at launch drop-down list and select your preferred tab.
-
Add a redirect link in the Redirect After Booking field. You can redirect your customers to a page tracked by Google Analytics, which can be used as a conversion page, or you can link your Online Booking Page. The widget will redirect the customer after booking with your business.
-
Tap the color icon to customize your Button Color. This setting customizes the color theme of your widget. See Customize Your Widget Colors for more information.
-
Select a Widget Type. To see how your widget will look on your website, you can Preview it.
-
In Website: Embed your booking widget into your website.
-
Link: Create a link to your booking widget that you can post on your social media or through Email/Text Marketing campaigns.
-
Popup: Embed a button in your website that opens a popup to your booking widget.
-
New Tab: Embed a button in your website that opens your booking widget in a new tab.
-
-
Depending on the Widget Type you select, you can customize how your widget looks.
In Website
Create a custom header for the top of your widget
Link
N/A
Popup or New Tab
Customize the text used for the embedded button in your website
-
The Show Download Vagaro App Button setting allows your customers to download the Vagaro App from your widget.
The sections below explain how to customize your widget's header and buttons, as well as how to promote specific services and classes within the widget. Additionally, if you have a multi-location business, you can set up the booking widget to allow bookings across all locations, with the ability for customers to choose their preferred location during the booking process.
The Button Color setting allows you to modify tab and button colors. Depending on your widget type, you can create a header for your widget or change the wording for your buttons.
-
To do this, click the Button Color icon. This will open the color picker.
-
Use the slider to change the hue of your color, then select a color on the spectrum.
Note
You can enter a hex code or RBG, hue, saturation, and brightness values to select a more specific color.
If you aren't sure what colors to use, here is a good resource to pick colors.
-
You can revert to a previously used color. When finished, click OK.
The Button Color settings will change the color theme of your widget. It is important to choose the right color for your widget as it can affect the look and feel of your website.
|
Bad Example |
|
Good Example |
You can easily configure which services or classes your customers can book through the Booking Widget.
Note
You cannot select specific services and classes if create your widget for multiple locations.
-
Click Choose Specific Services & Classes.
-
Select any services that you want to include with your widget.
-
Select the Classes tab to select any classes that you want to include with your widget.
-
Click Save.
Note
If you select an entire category, then all existing and future services or classes from that category are included in the widget.
If you have a multi-location business, you can enable Allow Booking with all Locations. You can also add a widget title and logo if you prefer.
-
Under Create Widget for, select Multi-Location.
-
Open the Select Locations drop-down menu and select all locations that you want to include in your widget.
-
Enter a Widget Title.
-
Add a logo for your widget by clicking + Add Image or dragging and dropping the file from your computer into the Logo image box.
-
Continue setting up your widget.
When you allow booking with all locations, the widget will show a list of locations divided by state (if you have a presence in other states). Your customers can select which location to book with before starting the booking process.
At the bottom of the page, you can preview your Booking Widget before saving it. Select the Computer or Mobile tab to preview how the widget will look depending on the customer's device. Any changes you make when setting up your widget will update the preview, so you can play around and fine-tune your widget as needed.
When you're ready to generate the HTML or link for your widget, click Save. Vagaro will then generate a custom HTML script or link for your widget that can be pasted into your website. The code or link generated for this widget is static and will not change if you update any settings from the Booking Widget page. A new widget is created when you click the Save button on the Booking Widget page, so this means that you can create any number of booking widgets for your business. For any questions on how to embed your code into your website, please see your provider's documentation for more information.
Frequently used features with the Vagaro Booking Widget: Online Shopping Cart, Memberships, Packages, Products (Inventory), and Reviews.
Comments
22 comments
I’ve also been having issues with the booking widget on my Squarespace site. Works sometimes, but never when I’m connected to WiFi(on phone or computer-just shows the footer text with no clickable elements) Even when it works it often just shows the book now link button and takes you to Vagaro but doesn’t allow booking embedded on my we site. It’s frustrating how little support and information is available online. I’d love an answer. And I think it would be nice if you shared some troubleshooting/solutions publicly.
Hello everyone,
Is anyone here getting an issue with their embed widget on their website working sometimes and at moments not working?
Has anyone had clients calling and saying that the "Book Now" widget isn't working?
Hi Sean, thank you for providing a screenshot of what you're seeing with the Booking Widget. I will forward this to our Dev team.
Thank You,
Jamie
Adding this on a website, it doesn't display anything but the heading and the footer. I have Services, Book Now and Review selected as the 3 tabs. It was working about a year or so ago, then was brought to our attention it wasn't showing up on mobile. We were shutdown due to covid. Now opening back up and the widget doesn't work on any device. At least not that I see. Support told me I probably put it in the wrong spot. I'm on Wordpress and this I have tried both custom HTML and the text editor (HTML side).
subterraneanspa.com/appointment-request/ if anyone can help it would be greatly appreciated.
I'm having issues with the booking widget on my new WordPress site. Its the mobile end that I'm having issues with most. Its not showing the menu just the book now button. Also the download Vagaro app button is non existent even though the option is checked on. I wasn't able to use it on my current site using GoDaddy website builder and had to make buttons with a link to open in a new window.
Hello! I am wondering if the issue with the booking widget for Squarespace has been solved? I am having the same issue of it not showing up on my website.
Thank you,
Hi Bridget... I'm looking at the link you provided on the latest version of Firefox, Chrome and Edge, and see all of the options you're describing, not just header and footer. Checked on my Android phone, as well, and it's all there, too.
Melissa, I created a support ticket for this issue.
Hi there! I am having the same issue on my Squarespace site as many others in this thread. The widget only works when it wants to, and does/doesn't on different browsers. Is there any update we can expect to this code? This inconsistency is nuts. Thanks!
Hi Donna, Thank you for your reply. GREAT! I can see it all now ;) For future reference, I'll keep in mind that it may take the servers time to catch up.
Kashia: I created a support ticket for your issue, too.
All: I don't know what to make of the inconsistency in the widgets being displayed. I see it in one browser, but not another. I have an android phone, and, Kim, I don't see it displaying for your site on Chrome or Firefox, but the one in ByRySalon.com DOES work on all web and phone. On the other hand, Kim, I just went back to Chrome and loaded patinaskin.com again and NOW the widget is there! ARGH!
I'm going to bring the issue to our Dev team because... I'm sorry, but I just don't have any answers!
Hi Kim.. maybe it just needed some time for servers to catch up, but I'm looking at it and see all the book now features.
Hello, I just read Bridget's original message, clicked on her link - glad to see it was working on her site and noticed features that I didn't have on my booking page. I made the edits on Vagaro and then pasted the updated code for the widget into my website. Now, I am unable to see any widget.
Here's a link to my online booking page:
https://www.patinaskin.com/book
Circling back .. my website booking widget is working. However, via iPhone (Safari, Chrome), only a "Click to Book" button is visible - the services, booking, etc. menu are not. Is this right or should a full widget with the options appear? Thank you!
We're having an issue with the Booking Widget, as well. No matter which option we use to generate code (link, pop-up, website, etc), the code or link direct the client to a unnecessary intermediate page that just displays the Vagaro logo and another Book" button that has to be clicked to get to the booking widget page. This opens two new tabs and seems completely unnecessary. This is our first time trying to use it. Is this intentional?
First page displayed after clicking button on our website:
The correct page that should be a direct link:
Please advise and thank you.
I am currently having the same issues with the squarespace webpage as the last few people. The widget only shows info to click through to the vagaro website. I’ve tried creating the widget several times and the only thing that will show is is the “click to book” button. I’ve selected at least three of the options and can’t seem to get it to work.
Julia: I created a ticket for your issue and you should hear from support directly.
I am running into a similar problem with the booking widget. I keep having clients reaching out practically every day saying that they can't book an appointment. I believe the bug is at the point of a client signing into their account. Specifically, It's the two factor authentication window if the client is on a mobile device, which is practically everyone these days. When a client is asked to verify their email address the window doesn't fit in the iframe and the top is cut off that actually says "please verify your email address". See image below taken on my iphone. I have also tried embedding my vagaro booking page in an iframe the old fashion way, but vagaro.com refuses to connect.
Recently the Vagaro widget has been really unreliable on my website (squarespace). This is after it worked flawlessly prior to the pandemic. I've followed these instructions to re-install it a few times. I've tested it on Chrome, Safari, and Firefox. Sometimes it works and sometimes it doesn't, and I can't figure out why. (When it's not working it just doesn't show up on my website). My customers have had the same experience. I'm finally re-opening after 18 months of being closed. The last thing I need is to not be able to count on Vagaro. Please fix it.
Hey Dianna, thanks for providing screenshots related to your question. I've submitted this comment to our support team, and they should be contacting you soon.
Update: The reason you are seeing this screen is that your phone is blocking third-party sites in your iPhone or MacBook settings. This should no longer happen if you turn off these settings.
I've created tickets for both Dhel and Angelique about these issues.
Please sign in to leave a comment.