Embedding the Booking Widget on Your Website
Add the Vastali booking widget to any website with a single iframe.
The booking widget lets customers book directly from your own website without leaving it. It's an iframe that automatically resizes to fit its content — no fixed-height scrolling box.
Getting your embed code
- 1Go to Settings → Integrations
- 2Find the Booking Widget section
- 3Copy the iframe code snippet
- 4Paste it into your website where you want the widget to appear
The basic embed code
The widget iframe points to vastali.com/embed/your-slug. Replace your-slug with your studio's unique URL slug (found in Settings → General).
Auto-resizing the iframe
To prevent inner scroll and make the widget grow with its content, add the following script after the iframe tag on your page. This listens for height updates from the widget and adjusts the iframe size automatically.
Add this script immediately after the iframe on your page:
- ✓The embed page sends its scroll height via postMessage to the parent
- ✓The script listens for messages with type vastali-resize
- ✓It updates the iframe height to match the content
Website builder showing the booking widget embedded in a page section
WordPress, Squarespace, Webflow
- ✓WordPress — use a Custom HTML block and paste the iframe + script
- ✓Squarespace — use an Embed block (Code block in the editor) and paste both snippets
- ✓Webflow — use an Embed element and paste the iframe + script
- ✓Wix — use the HTML iFrame widget from the Add panel
The widget inherits your Vastali branding settings (colours, logo). Update your branding in Settings → Branding to match your website's colour scheme.
More in Booking Widget
Ready to get started?
14-day free trial. No credit card required.
