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.
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
42 comments
Hi Tomoko,
Please reach out to our Support Team at sales.vagaro.com/contact so our Team can look into this with you and help advise you further.
Thank you!
I’ve been with Vagaro on and off for over 6 years and am still anxiously awaiting the ability to make a widget that is specific to a service provider. I would even settle for a service provider specific link! Booth renters everywhere could use this. I’m in a big salon with a long menu and I only work in skin and nails. The process of elimination to find me and my service list has been reported by multiple clients as a DETERRENT to trying our salon.
Hi Ariel... this has been a new feature request quite a few times. You can add your vote to requests that match what you want to see or enter your own request at: https://feedback.vagaro.com/forums/915991-feature-requests
There's a search function, and you can look for "widget" to find requests about the widgets. Here are a few I noticed that might match up to what you want:
Recently the Vagaro widget has been really unreliable on my website (squarespace). This is after it worked flawlessly prior to the pandemic. I've followed these instructions to re-install it a few times. I've tested it on Chrome, Safari, and Firefox. Sometimes it works and sometimes it doesn't, and I can't figure out why. (When it's not working it just doesn't show up on my website). My customers have had the same experience. I'm finally re-opening after 18 months of being closed. The last thing I need is to not be able to count on Vagaro. Please fix it.
Julia: I created a ticket for your issue and you should hear from support directly.
Hello everyone,
Is anyone here getting an issue with their embed widget on their website working sometimes and at moments not working?
Has anyone had clients calling and saying that the "Book Now" widget isn't working?
Hi there! I am having the same issue on my Squarespace site as many others in this thread. The widget only works when it wants to, and does/doesn't on different browsers. Is there any update we can expect to this code? This inconsistency is nuts. Thanks!
I've created tickets for both Dhel and Angelique about these issues.
I'm having issues with the booking widget on my new WordPress site. Its the mobile end that I'm having issues with most. Its not showing the menu just the book now button. Also the download Vagaro app button is non existent even though the option is checked on. I wasn't able to use it on my current site using GoDaddy website builder and had to make buttons with a link to open in a new window.
Kashia: I created a support ticket for your issue, too.
I’ve also been having issues with the booking widget on my Squarespace site. Works sometimes, but never when I’m connected to WiFi(on phone or computer-just shows the footer text with no clickable elements) Even when it works it often just shows the book now link button and takes you to Vagaro but doesn’t allow booking embedded on my we site. It’s frustrating how little support and information is available online. I’d love an answer. And I think it would be nice if you shared some troubleshooting/solutions publicly.
I am currently having the same issues with the my squarespace webpage as the last few people. The widget only shows info to click through to the vagaro website.
Please sign in to leave a comment.