Embed Website Widgets
Website widgets let you put Vibefam's booking, packages, and merchandise directly onto your own website
so members can browse and pay without leaving your site. If you already have a website (on Wix, WordPress, Shopify, or anything that accepts embed code), this is how you connect it to Vibefam.
Navigate to Configure → Website Widgets.
What you can embed
Vibefam gives you a ready-made embed code for each of these:
| Widget | What members can do |
|---|---|
| Classes | Browse your class schedule and book |
| Packages | View and buy your packages and memberships |
| Merchandise | Browse and buy your merchandise |
| Appointments | Browse and book appointment slots |
Each widget is a self-contained booking surface — members can complete a booking or purchase inside it, on your own site.
How to embed a widget
- Go to Configure → Website Widgets.
- Find the widget you want (Classes, Packages, Merchandise, or Appointments).
- Click the copy icon next to its code to copy the embed snippet.
- Paste the code into your website where you want the widget to appear.
The code is a standard iframe, so it works anywhere you can add HTML. For example, the Classes widget looks like this:
<iframe src="https://bookings.vibefam.com/your-studio/classes#widget" width="100%" frameborder="0" height="700px"></iframe>Your actual code will already contain your own studio's address — just copy it as-is rather than typing it out.
Platform-specific guides
If you're using a website builder, Vibefam has step-by-step guides for the most common ones, linked at the top of the Website Widgets page:
These walk through exactly where to paste the code in each builder.
Styling your widgets
The look and feel of your widgets — colours, light or dark mode, and which tabs appear — is controlled in one place: Configure → Booking Website. Whatever you set there flows through to your embedded widgets automatically.
So if you want your embedded booking to match your brand, set your primary colour, font colour, and theme under Booking Website first. See Setting up your booking website.
Adjusting size
The embed code sets the widget to width="100%" (so it fills its container) and a fixed height (700px by default). If a widget looks cramped or leaves too much empty space on your page, adjust the height value in the code you pasted — this doesn't affect anything in Vibefam, only how tall the frame renders on your site.
Before you go live
- Paste each widget onto your site and test a real booking end to end
- Check the widget on mobile as well as desktop — most members will book from their phones
- Make sure your payment integration is set up under Configure → Payment Integration, or members will reach checkout but be unable to pay
- Confirm your widget styling matches your site by setting it under Booking Website first
Your widgets always reflect your live Vibefam data — when you add a class or change a price, the embedded widget updates automatically. There's no need to re-copy the code.