How to Add Vagaro to Your Website
Add the Book 24/7 Widget and start booking clients and selling items from your personal website, in addition to selling services from your Vagaro page.
Getting started is simple. Just click Marketing at the top of the page. Click Add Widget. And from there, you'll be able to customize your booking widget and add an embedded code to your website.
You also can create and edit widgets for multiple locations if you have the multi-location setup in Vagaro.
Watch this video, or follow the article below to learn more about the Book 24/7 Widget.
1. Click Marketing.
2. Click Add Widget.
OR
3. Click Settings.
4. Click Integrations.
5. Click Learn More.
6. Select the tabs you want to include in the widget. A light blue color means the option has been chosen.
6A. This option appears if you have the multi-location setup. Click on the drop-down to make the selection. This allows you to pick the location that will be listed on the widget as the main location.
7. Toggle the Showcase Vagaro App option if you want to display a button that allows customers to download the Vagaro App. This button will appear at the bottom of your widget.
8. Click on the square to customize the button color for your widget.
9. Select the color. Then, click OK when you're finished.
10. Enter the Header in the box. The header will appear above the widget.
11. Select the widget type.
12. 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.
13. Click on the Computer option to get a feel for how the widget appears on your desktop.
14. Click on a tab to get an idea of how the page appears. For example, you can view how the Services section displays when you click on the option.
15. Notice you also can get an idea of how the widget displays on your customer’s phone. Just click on the Mobile tab.
16. Click Save once you’re happy with the design.
17. Click the Copy Code button. Next, paste the code into your personal website. You can manually select the code if the Copy Code function does not display or copy properly. In this case, select the whole code with your mouse. Right click. Click Copy. Then, right click again to paste the code into your website.
18. Click OK.
Comments
8 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!!
Please sign in to leave a comment.