Create a widget for an employee or a business through the Widget Builder for specific services, classes, products, memberships, and packages. Your employees can share the widget on any platform for customers to purchase products or book services and classes.
Your employees will now be able to use the booking widget for their clients to directly book classes or services with them.
- Navigate to Setting > Booking > Booking Widget.
- Click Create Widget for dropdown and select any employee, business, or search for employees' names by typing their names.
- Select any options to include in the widget:
- Services
- Classes
- Gift Cards
- Memberships
- Products
- Reviews
- Book Now
- Click Open This Tab at Launch and select an option:
- Services
- Classes
- Book Now
- Memberships
- Products
- Review
- Click Button Color to select a button color for your widget.
- Select the widget type from the three choices.
- Link: Creates code for a link that you can add to your website. It opens a page with a button that opens your booking page in a new tab.
- Popup: Creates code for a Book Now button that opens a pop-up to your booking page.
- New Tab: Creates code for a Book Now button that opens your Vagaro booking page in a new tab.
- Toggle the Show Download Vagaro Button (for Mobile Devices only).
- Click Save. You will see the widget link popup.
A pop-up screen with code for your widget displays.
- Click Copy Link to share the booking link on your social media platform or business web page.
Note that your booking link will be different than the one shown in this step. If you wish to ensure that your booking link is functional, click Test Link.
When customers click on the booking link, it will show the employee's specific services, classes, products, memberships, and packages.
Comments
49 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.