How to add Vagaro to your website
Vagaro is a salon, spa and fitness booking platform popular in the US and UK, used by hair and beauty salons, spas, barbers and fitness studios. Here's how to put it on your own website, which embed option to pick, and what goes wrong.
Quick answer
Get the code from your Vagaro admin under Business Settings, in the Online Booking or Widgets area, where Vagaro generates both a 'Book Now' button and a full booking widget. For most people the right choice is the book now button — a small button that opens your Vagaro booking page in an overlay. Fastest to add and the least likely to break your layout. Paste it into a code or embed block on your site — not a plain text field — then place it beside your main call to action and test the whole flow on a phone before relying on it.
Vagaro: which option to use
| Option | What it does |
|---|---|
| Book Now button | A small button that opens your Vagaro booking page in an overlay. Fastest to add and the least likely to break your layout. |
| Full inline widget | Embeds the whole booking flow directly in your page. Better conversion because the customer never appears to leave your site, but it needs vertical space — give it at least 700px. |
| Direct link | Your vagaro.com/yourbusiness URL behind an ordinary button. No script at all, which keeps your page fast. |
Step-by-step
- 1
Find the code or link in your account
Vagaro keeps this in your Vagaro admin under Business Settings, in the Online Booking or Widgets area, where Vagaro generates both a 'Book Now' button and a full booking widget. Copy what you need before touching your website — most of the time people lose is spent hunting for the snippet, not installing it.
- 2
Pick the right option for the job
The table above is the decision. Book Now button: A small button that opens your Vagaro booking page in an overlay. Fastest to add and the least likely to break your layout. Full inline widget: Embeds the whole booking flow directly in your page. Better conversion because the customer never appears to leave your site, but it needs vertical space — give it at least 700px. Choosing before you paste saves rebuilding the section later.
- 3
Paste it into a code or embed block
This needs an HTML, code or embed block — not a plain text field, where the code will simply appear as text on your page. On Adviita, ask the AI editor to add an embed section and drop the code in. On WordPress use a Custom HTML block, on Squarespace a Code block (Business plan or above), and on Wix an Embed HTML element.
- 4
Put it where the decision happens
Booking is the action your site exists to produce, so this belongs above the fold, not below your gallery. A widget three scrolls down does a fraction of the work of the same widget beside your main call to action. Decide what the page is for, then place it at the point the visitor is deciding.
- 5
Check it on an actual phone
Most visitors to a small business website arrive on a phone, and embeds are where mobile layouts break. Open your live site on your own phone and confirm it loads, fits the screen without sideways scrolling, and does not push your contact button out of view. Third-party embeds are also the most common cause of a slow page, so if it noticeably delays loading, consider a plain link instead.
- 6
Test it end to end before you rely on it
Run through the whole flow yourself as a customer would — complete a real booking — and confirm what should happen actually happens. Broken embeds fail silently, and the first person to notice is usually a customer who has already given up.
Tips & best practices
- ▸Vagaro's inline widget sets its own height and can be cut off inside a fixed-height container. Give the embed block room to grow rather than constraining it.
- ▸Services must be marked as bookable online in your Vagaro service settings, or the widget renders with an empty service list and customers assume the site is broken.
- ▸If you use Vagaro's own website product as well, running both means two booking systems with one calendar — decide which one is canonical and link the other to it.
- ▸Re-test the embed after any change to your site, your plan, or the connected account — third-party widgets break quietly and nothing tells you.
Common questions
Can I embed Vagaro booking on any website?
+−
Yes. Vagaro gives you a standard HTML embed that works on any site that allows custom code — Adviita, WordPress, Squarespace, Wix and plain HTML sites all accept it. Squarespace requires a Business plan or above to use code blocks, which is the most common blocker people hit.
Why is my Vagaro widget not showing my services?
+−
Almost always because the services are not enabled for online booking. In Vagaro, open each service and confirm it is set to be bookable online and assigned to at least one staff member with available hours. A service with no bookable staff will not appear in the widget.
Do I need a developer to add Vagaro to my site?
+−
No. Every option here is copy and paste into a code or embed block, which every mainstream website builder provides. The only genuine blocker is a builder or plan that does not allow custom code at all — Squarespace, for instance, requires a Business plan or above for code blocks.
Will adding Vagaro slow down my website?
+−
Any third-party embed has some cost, because it loads code from another company's servers. One is usually unnoticeable; four or five on the same page is where small business sites become visibly slow. If page speed matters to you, prefer a plain link over a script wherever the option exists, and keep embeds to the pages that genuinely need them.