Add the Book 24/7 Widget and start booking clients and selling items from your personal website, in addition to selling services from the Vagaro online booking page!
To get started, watch the video or follow the steps below.
Adding the Vagaro Widget
1. Click Marketing at the top of the screen.
2. Click Add Widget.
3. Select the tabs you want to include in the widget. A light blue color means the option has been chosen and will be visible on your widget. For example, if a client selects the Services tab, the client will be able to see and book your services.
4. Click on the drop-down under Open this tab at launch to select the tab you see first when you launch the widget.
5. This option appears if you have the multi-location setup. Click the drop-down to select the option you prefer. This allows you to pick the location that will be listed as the main location on the widget.
6. Select the Display Vagaro App option to display a button that allows customers to download the Vagaro Customer App. This button appears at the bottom of the widget.
7. Click the Button Color square to customize the button color of the widget.
8. Click the arrow in the middle of the display. Then drag it to the color you prefer. Click OK when you're finished.
9. Enter a Header of your choice in the box. The header will appear above the widget.
10. Select the widget type. The In Website option functions as a traditional website when you select one of the Widget Tabs.
The Popup widget generates a pop-up window when you select one of the tab. The New Tab option generates a new tab on the web browser when you select a tab.
11. Thanks to our Preview window, you can get a sense of the look and feel of the widget on the customer's desktop or phone before creating it. You also save time by adjusting the design as often as needed before launching the final widget. Let's take a closer look at this!
12. Click on the Computer option to get a feel for how the widget appears on a computer or the desktop.
13. Once you select the Computer tab, select one of the Widget Tabs to get an idea of how the page appears. For example, you can see how the Services page displays on the widget when you select the Services tab.
14. To see how the widget displays on a mobile device, click Mobile.
15. Click Save once you’re happy with the design.
16. Click the Copy Code button. Then paste the code on the preferred location on the website.
You can manually select the code if the Copy Code function does not display or work properly. In this case, select the whole code with your mouse. Right-click. Then click Copy to paste it to your website.
17. If you clicked Copy Code in the previous step, you'll see the popup below. Click OK. Go to the edit page builder of your website. Find the section where you want to paste the code. Then right-click again to paste it to the site.
Comments
37 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 continue to receive messages from some clients having problems booking through the widget (on my website). I usually ask them what device and which browser are they using when the issue occurs - seems like the conflict is when using Google Chrome or Explorer ... and definitely when on a PC. I would love to get all this sorted out so that everyone can book without hassle. I personally use a MacBook, or iPad, or iPhone 11, all using Safari with no issues.
Please sign in to leave a comment.