In this article, you'll learn how to create a booking widget to add to your website.
Create a widget for an employee or business through the Widget Builder for services, classes, products, memberships, and packages. Your employees can now use the booking widget for their clients to directly book classes or services with them. Your employees can share the widget on any platform for customers to purchase products or book services and classes.
-
Navigate to → → .
-
Click the Create Widget for: drop-down list, select the business or an employee, or search for employees.
-
Select options to include in the widget:
Selected tabs are blue, others are white, and unavailable options are grayed out.
-
Click the Open this tab at launch: drop-down list and select an option:
-
Add a URL for a page to redirect your customers after completing a booking.
You can send them to a page tracked by Google Analytics, which can be used as a conversion page.
-
If you have a Multi-Location business, you can toggle Allow Booking with all Locations on (green).
Here you can also add a widget title and logo if wanted.
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 will select which location to book before starting the booking process.
-
Click Button Color to select a button color for your widget.
-
Depending on the widget type you select, button options will display for your selection.
In Website
Link
Nothing
Popup or New Tab
-
Select the widget type.
-
In Website: Embed your Vagaro page into your website.
-
Link: Create code for a link you can add to your website.
-
Popup: Creates code for a button that opens a popup on your booking page.
-
New Tab: Creates code for a button that opens your Vagaro booking page in a new tab.
-
-
Toggle the Show Download Vagaro App Button (for Mobile Devices only).
-
Click Save. A popup screen with a code for your widget displays.
-
Click Copy Link or Copy Code (depending on your Widget Type choice) to share the booking link on your social media platform or business webpage.
Create Widget Link
All Other Types
Note that your booking link or code will differ from the one in this step. If you wish to ensure that your booking link is functional, click Test Link.
When customers click the booking link, it will show the employee or location's specific services, classes, products, memberships, and packages.
Frequently used features with the Vagaro Booking Widget: Online Shopping Cart, Memberships, Packages, Products (Inventory), and Reviews.
Comments
51 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.