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

  1. 1Go to Settings → Integrations
  2. 2Find the Booking Widget section
  3. 3Copy the iframe code snippet
  4. 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.

Start free →
Back to Help & Support