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
53 comments
This is not working, comes up as an error after choosing an icon! Has anyone else had this problem?
Same problem here, walk through the whole series of steps to get an error code within the embedded message. Please resolve.
<div style='width:840px; margin:0 auto;'><iframe id='frameVagaro' name='iframe' src='https://www.vagaro.com/Users/BusinessWidget.aspx?enc=MMLjhIwJMcwFQhXLL7ifVIVDXyomPJ3kTiHOM1bMRws7T5ob+9IXUd3n3LK4xLQWnyBJ7fh9QzUeTQ3A7OeezGlFpgRDK7gpUFXUk/3bANumfbjoNLbyZcyuVSVxSbLS' width='100%' height='31100' scrolling='auto' align='top' style='border:none'>This option will not work correctly. Unfortunately, your browser does not support inline frames.</iframe></div><div style='height:10px;'></div>
I received this message with Chrome, Safari and Firefox
We have a widget and it's working fine. But I would like a way to have a link bring me to the gift certificates tab. Also, We have a massage therapists and an esthetician. I would like a way for a link to bring me to the middle of the page so if someone wants to book a facial they don't have to scroll through all the massage services to get there. I guess I'm talking about an anchor. Or having separate widgets for what I want to go to?
Is there a way to change the code to vary the look of the widget? I don't care for the giant V. I have had many client not know that is the link because it looks like an external ad.
My web designer was receiving help through email and no one has responded to her last reply at agirlandhermac@gmail.com
She was able to build the vagaro widget (pick the colors, fonts, etc) and it walked through to the end where it said to paste [vagaro_booking_widget] into the page, but the booking widget is not showing up on the page.
http://www.clearsolutionsacne.com/appointments/
When using the embedded code why is it redirecting to another link from my mobile device? The whole point for embedding was to keep clients from dealing with a whole bunch of extra steps
Do you have a responsive version of either this widget or the Wordpress version? Also, I can't find anywhere that lists the WP shortcode options. Thanks!
Please, I am begging you...please allow me to create individual booking widgets by provider that they can add to their websites. I would also like to put a widget on their individual page on the salon website. If the customer already knows their stylist they should not have to go searching for them through the whole team. I have been asking for a couple of years now!!
why would you do this?
<a style="" id="newtabredirect" class="disableOverlay" href="https://www.vagaro.com/Users/BusinessWidget.aspx?BusinessID=110439&IsBusinessWidgetPage=true&IsFacebookPage=false&TabsIncluded=0|1|99|100&IsPopup=False&IsFromMultiLocation=False&b_themeID=0&MultiLocBusinessID=0&w_type=2&widgetversion=3" target="_blank"></a>
add a hyperlink for a new people accessing the embed site.
https://www.catchybeauty.com/service/
Yes, and specific service too would be great.
Hi Joey. Are you still having issues with the embedded code? Please let me know how I can assist. Feel free to also email support@vagaro.com or call 800-919-0157, ext. 2 and we can do some troubleshooting from there.
yes, the issue still there.
Hi Joey. I went to your site (https://www.catchybeauty.com/service/) and clicked on the "Book Now" button and it looks like the widget is working properly. Just in case, here's the embedded code for your widget:
<div id='frameTitle' class='embedded-widget-title' style='font-size: 23px; color: #333;font-family:Arial, Helvetica, sans-serif; line-height:24px; padding: 18px 10px 8px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;'>Book Now</div>
<div class="vagaro" style="width:250px; padding:0; border:0; margin:0 auto; text-align:center;"><style>.vagaro a {font-size:14px; color:#AAA; text-decoration:none;}</style><a href="https://sales.vagaro.com/">Powered by Vagaro</a> <a href="https://sales.vagaro.com/salon-software">Salon Software</a>, <a href="https://sales.vagaro.com/spa-software">Spa Software</a> & <a href="https://sales.vagaro.com/fitness-software">Fitness Software</a><script type="text/javascript" src="https://www.vagaro.com//resources/WidgetEmbeddedLoader/OZqnCJ0qCpacT3qmV35y79oz34mC2PeFJ4mC30m9cyUeJUtjP0dDxkJEvwPapWUep2sERAJDXwOW?v=2yWMX2yhXKJczHRs3kYb4z2MPEspw5lXanOngWeipHSG#"></script></div>
If you need to, feel free to copy this code and paste it to your site.
Hello everyone,
Is anyone here getting a issue with their embed widget on their website working sometimes and at moments not work?
Has anyone had clients calling and saying that the "Book Now" widget isn't working?
Hi Jae. Sorry to hear about this. We haven't had reported issues regarding this. Please email support@vagaro.com when you get a chance so one of our engineers can take a look at this.
Yes, I am a long time customer of Vagaro and love it! However, in the past 2 months, I have had numerous clients message me that online booking via the widget on my website is not working for them, via their laptops as well as via phone.
I tried updating the widget code into my website a few days ago, although it looks like it's the same code it has been for a while.
When I go to my site (and I've had friends try it too), via iPhone and MacBook, there hasn't been an issue.
I don't know what to tell clients.
Hi Kim. Copying the code again, adding it to the site and seeing if customers still have issues after this is a great first step. I believe this will fix the issue. If the issue still persists, please email support@vagaro.com for additional support.
I added the HTML to a Wordpress page and can't seem to get it to work. Here's the code and here's the link:
https://halcyonsalonshelby.com/book-your-appointment/
<div id='frameTitle' class='embedded-widget-title' style='font-size:23px;color:#333;font-family:Arial, Helvetica, sans-serif;line-height:24px;padding:18px 10px 8px;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;'></div>
<div class="vagaro" style="width:250px;padding:0;border:0;margin:0 auto;text-align:center;">.vagaro a {font-size:14px; color:#AAA; text-decoration:none;}<a href="https://sales.vagaro.com/">Powered by Vagaro</a> <a href="https://sales.vagaro.com/salon-software">Salon Software</a>, <a href="https://sales.vagaro.com/spa-software">Spa Software</a> & <a href="https://sales.vagaro.com/fitness-software">Fitness Software</a><a href="https://www.vagaro.com//resources/WidgetEmbeddedLoader/OZqnC3WqD2PqFJ1y6BuPlXoSlXYO61Cq7fYO61WO4pkUcPCu7gevEhAJDXwPW?v=29FoZv8bxACcFcxuOb4njOvQt06EzYVMuaUXQpnf5tw#">https://www.vagaro.com//resources/WidgetEmbeddedLoader/OZqnC3WqD2PqFJ1y6BuPlXoSlXYO61Cq7fYO61WO4pkUcPCu7gevEhAJDXwPW?v=29FoZv8bxACcFcxuOb4njOvQt06EzYVMuaUXQpnf5tw#</a></div>
Hi Laura. Try to use the embedded code I've pasted below. There's a slight variation at the end of this embedded code. If this code doesn't work, let us know.
<div id='frameTitle' class='embedded-widget-title' style='font-size: 23px; color: #333;font-family:Arial, Helvetica, sans-serif; line-height:24px; padding: 18px 10px 8px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;'></div>
<div class="vagaro" style="width:250px; padding:0; border:0; margin:0 auto; text-align:center;"><style>.vagaro a {font-size:14px; color:#AAA; text-decoration:none;}</style><a href="https://sales.vagaro.com/">Powered by Vagaro</a> <a href="https://sales.vagaro.com/salon-software">Salon Software</a>, <a href="https://sales.vagaro.com/spa-software">Spa Software</a> & <a href="https://sales.vagaro.com/fitness-software">Fitness Software</a><script type="text/javascript" src="https://www.vagaro.com//resources/WidgetEmbeddedLoader/OZqnC3WqD2PqFJ1y6BuPlXoSlXYO61Cq7fYO61WO4pkUcPCu7gevEhAJDXwPW?v=29FoZv8bxACcFcxuOb4njOvQt06EzYVMuaUXQpnf5tw#"></script></div>
I've added it to halcyonsalonshelby.com/book-now
The widget still isn't working.
Hi Laura. Sorry for the inconvenience. Can you email support@vagaro.com when you get a chance? One of our support engineers can troubleshoot and take a closer look at this issue.
I just set this up using the "in website" option, but clicking on anything opens a new window/tab on the vagaro site. Is it possible to keep the navigation on my site and not take customers away from my website just to see the schedule?
VIEW HERE
Hi Terri. I just went to your site and everything is working properly. It's not creating a new window or tab when I select an option. Are you still having issues?
This booking widget just doesn't make sense to me, as far as from what the client perspective is. Considering any person that wants to add a booking widget to their website probably has a decent website, they probably have pages for all of their services, vs a single page website, with a booking widget that just shows all of the services.
I can do a much better job creating product and service pages, and it would be GREAT if I could simple add a button that a client clicks on to book a specific product/service. I don't want them to see all of the services, on every one of my service pages.
IntakeQ has a GREAT booking widget, where you simply choose what service you want to allow the client to book for, add that widget, and the client just chooses from an available time.
I would use Vagaro for sure, considering they have so many other features, if the booking widget was good. I think this is hands down, the most important aspect of booking software nowadays. It's not good enough that you can book clients from our software. The client needs s simple way to book themselves without having to look through my entire library of services.
SIMPLIFY
Hi Jonathan. I will relay your message to our management team. Thanks for your feedback.
Popup on mobile not working. It redirects. The code is the same as desktop??? How could it?
Please advise.
Hi Sheryl,
Try deleting the code on your site, recopying it from the Vagaro account and pasting it to the editor of your site again. Call 800-919-0157 or email support@vagaro.com if you have more issues.
Hi Charles,
I also tried to embed the vagaro code to my squarespace website and it says "Script Disabled". Why isn't it working?
Thank you
Hi Michelle,
When adding a Widget code to a Squarespace site, you will need to make sure it is being added as a "Code Block". This link from Squarespace has more information for you: https://support.squarespace.com/hc/en-us/articles/206543167
If you have any questions or need further assistance, please reach out to our Support Team at (925)464-1932 Extension 2.
I would like to use this widget, but there is a very confusing problem from the client perspective.
The problem is the title of the Widget that comes up.
Because of how the Widget is designed on Vagaros side.
I want to make 2 locations available, but the first thing that the client sees is a big title showing my uptown location, then they have the choice for the menu that will show the other location.
The second issue is that you have the 3 line (AKA Hamburger menu) included, but
1. It doesn't do anything
2. I don't want it to do anything
3. It is very confusing because when it is on mobile it makes the client think that there are 2 menus.
I looked through the code to see if I could get rid of it, but that doesn't appear to be an option.
Please advise.
Please sign in to leave a comment.