How to Seamlessly Connect Your Vagaro Account to Your Squarespace Website
Hey there, savvy spa and salon owners! Are you looking to streamline your online booking process and elevate your Squarespace website with the seamless integration of your Vagaro account? Well, you're in luck because I'm about to guide you through the whole process step by step!
As a business owner myself, I understand the importance of making the booking experience as smooth as possible for your clients. With Vagaro's robust booking system and Squarespace's sleek website design capabilities, combining the two can take your online presence to the next level.
So, without further ado, let's dive into the nitty-gritty of integrating your Vagaro account with your Squarespace website:
Login in Vagaro and navigate to the Settings tab (this can be found by clicking on your Calendar).
2. Click on Booking Widget at the top of the panel on the left.
3. The next page will allow you to select which settings you would like to use.
Choose which page on your Vagaro account you want to open from your website - Services, Classes, etc… You can create multiple Booking Widgets if you want to connect multiple Vagaro pages to your site (ie Classes and Services would each need their own widget).
Use the settings on this page to define how you want the widget to work. As stated above, first decide which page on your Vagaro account you are linking to (i.e. a day spa or salon website would link to Services, while a website for a yoga studio would link to Classes).
4. Next, add the url of the page you want your users to be redirected to once they have completed the booking process. Be strategic about this! Does your day spa offer spa treatments and sell products? Why not redirect your users to your Online Shop after they have book an appointment!
5. Keep your branding consistent by customizing the Button Color to match your logo and website color palette.
6. Next, and perhaps one of the most important steps, select which Widget Type you want to appear on your website. This defines what happens when you add a Vagaro widget. Here is a brief explanation of what each Widget Type will do:
Website: The Vagaro booking page becomes a part of an existing page on your website. This option works best if you have a Booking page on your website. Using the Embed Code Block on Squarespace, you will copy the code snippet generated by Vagaro which will allow users to book a spa treatment, fitness class, etc.. directly from your website. I like this option because you can design the Booking page to align with the aesthetic of your site, while still getting the functionality of booking through Vagaro.
Link: This option will simply create an external link that takes users to your page on the Vagaro website. Using the Link option works best if you have a button on your website that you want users to be redirected to Vagaro.
Pop Up: Adding a Vagaro pop-up widget functions similarly to those smaller promotional pop up boxes that often appear when visiting a new website. The main difference here is the functionality because users will need to click on this link, rather than it popping up automatically. Using this booking widget is great for a home page, or anywhere on your site where you want to add a dynamic booking functionality link while still keeping users on your website.
New Tab: This is just as it sounds, when you add this type of booking widget to your website your Vagaro account will open on a new page on your browser. I’m not a fan of this option because it pulls users away from your website.
7. Click “Save” and you’ll be prompted to copy either a link or a code snippet (this is depending on which widget type you selected above).
If Vagaro offers a widget or embeddable code, utilize Squarespace's Code Block or Embed Block feature to add it to your website.
Paste the provided embed code into the block and save the changes.
In case Vagaro only provides a link for integration, create a navigation link on your Squarespace website OR add a text or button block, enter the desired text (e.g., "Book Now"), and link it to the provided URL from Vagaro. Remember to save the changes!
8. Now you’re going to navigate over to your Squarespace website to the section or page that you want to add Vagaro. Depending on whether you’re connecting to Vagaro with a button, a pop-up, or embedding onto a page on your site, paste the link or code snippet and hit “Save”.
Voila - you have now connected your Vagaro online scheduler to your Squarespace website!