The booking widget allows customers to easily book with you from your website, social media, and marketing campaigns. Vagaro automatically generates HTML code for your widget for you to embed on your website based on what business offerings you select to show. You can also customize your widget's button color theme, create a widget for each of your service providers and business locations, and promote specific business offerings.
The code or link generated for your widget is static and will not change if you update any settings from the Booking Widget page. That means a new widget and its code is created every time you select Save, so you can create any number of booking widgets for your business. It also means you will need to re-add your widget's code or link if you make any changes to a widget.
Note
It is not recommended to edit the code provided by Vagaro because it may cause issues embedding the booking widget on your website.
Frequently used features with the Vagaro Booking Widget include the Online Shopping Cart, Memberships, Packages, Products (Inventory), and Reviews.
For any questions or additional information about how to embed your code into your website, check your provider's documentation.
Prerequisites: Creating a booking widget is only available on the Web, tablet, or Pay Desk.
To create a booking widget:
-
Go to → → .
-
Expand the Select Employees (web only) or Create Widget For (tablet, Pay Desk, and PayPro only) list:
-
By default, your widget will be created for your business and will include all employees at your business.
-
If you want customers to book with a specific service provider, select their name in the list.
Note
If you have or want the option to create a widget for This Location or a Multi-Location, see Set Up the Widget for Multiple Locations.
-
-
Under Select Tabs to Include in Widget, select the tabs you want customers to see.
-
Optionally, if you selected Services and/or Classes, you can Choose Specific Services & Classes to include in your widget. Any services or classes you don't select will not be displayed on your widget.
-
-
In the Open This Tab at Launch list, select the tab to be displayed when customers first use your widget.
-
Enter a URL in Redirect After Booking that customers will see after making a purchase through your widget. For example, you can send your customers to a page tracked by Google Analytics, which can be used as a conversion page, or a custom page that thanks them for their business.
-
Select a Button Color theme for your widget in the color picker, and then select OK. For a more custom or unique color, use the slider to adjust and select a hue, or enter values for a hex or RBG code, hue, saturation, and brightness. If you aren't sure what colors to use or the code for the exact color you want, here is a good resource to pick colors.
-
Select your Widget Type and how it will work on your website, social media, or marketing campaign:
-
In Website: Embed your booking widget into your website. You can optionally enter custom header text at the top of the widget.
-
Link: Create a link to your booking widget that you can add to on your social media or through Email/Text Marketing campaigns.
-
Popup or New Tab: Create a button on your website that opens your widget in a popup or a new tab for the selected widget tab. You can also select a Button Color and the tab that the button will display.
-
-
Optionally, select whether to Show Download Vagaro App Button for customers to download the Vagaro App from your widget.
-
Optionally, and throughout this setup process, preview how your booking widget looks on your customers' devices by selecting the Computer or Mobile tab. The preview is automatically updated while you set up and change your widget's settings.
-
Select Save. Vagaro will generate the HTML code or link for your widget and display it in the Create Widget popup.
-
In the Create Widget Link popup, select Copy Code or Copy Link, then and paste it into your website, social media, or marketing campaign.
If you have a multi-location business, you can enable Allow Booking with all Locations. You can also add a widget title and logo.
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.
To set up the booking widget for multiple locations:
-
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 selecting + Add Image or dragging and dropping the file from your computer into the Logo image box.
-
Continue setting up your widget.
Comments
23 comments
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.
Julia: I created a ticket for your issue and you should hear from support directly.
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 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!
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.
Kashia: I created a support ticket for your issue, too.
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.
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.
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.
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.
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
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.
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.
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!
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!
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,
Melissa, I created a support ticket for this issue.
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.
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
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.
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.
Thank you, Jamie. I eventually got a response from support, but I figured out the deferral of 3rd party scripts issue on my own. Just now saw your thoughtful response. I have one more issue that I sent to support, but haven't heard back.
We are embedding your booking widget code in two ways on our site: One for the entire salon menu and a second one for one of our "specialty stylists" who has a specific service menu. The issue is that the code for the entire salon menu returns a collapsed menu (except for the first service, which is expanded), but the specialty stylist code returns a menu that is fully expanded across all her service categories (see above). I'd prefer that both results return the former collapsed menu appearance, if possible. I get the same result whether I save a static link for both, or the website embed code. Any ideas on this?
Hi Dianna, I'm glad you were able to figure out the issue. Was your solution similar to the one I suggested above? I have a scheduled chat with our product team today and will ask them about this. I'll comment back here with any updates.
Thank you,
Jamie
Please sign in to leave a comment.