TurnwaveTurnwaveHome

Developer docs

Integrate a Turnwave booking form

This guide is for developers building a website for a merchant, such as a barber, salon, or local business. You do not need API keys. The booking form runs inside a Turnwave iframe, so Turnwave handles availability, appointment creation, validation, confirmations, and reminders.

1. Ask the merchant for access

Ask the merchant to log in to their Turnwave admin dashboard and open Advanced. This page contains the website embed settings and the copyable iframe snippet.

The merchant should also confirm their public booking slug. The embed URL uses that slug:

https://turn-wave.com/embed/MERCHANT_SLUG

2. Ask the merchant to approve the website domain

Before the iframe can load on your website, the merchant must add your website origin in Advanced. Ask them to add only the origin, not a full page URL.

  • Use https://merchant-site.com
  • Do not use https://merchant-site.com/book-now
  • For local testing, use http://localhost:3000 or the exact local origin you are using.

Turnwave enforces this with the browser's frame policy. If the domain is not approved, the browser blocks the iframe.

3. Add the iframe

Paste the snippet where the booking form should appear. Replace MERCHANT_SLUG only if you are writing the snippet manually. The merchant dashboard already generates the correct version.

<iframe
  src="https://turn-wave.com/embed/MERCHANT_SLUG"
  style="width:100%;min-height:720px;border:0;border-radius:16px;"
  loading="lazy"
  title="Book an appointment"
></iframe>

4. Choose a theme

The default theme is light. For a dark website section, add ?theme=dark to the embed URL or select Dark in the merchant's Advanced page before copying the snippet.

<iframe
  src="https://turn-wave.com/embed/MERCHANT_SLUG?theme=dark"
  style="width:100%;min-height:720px;border:0;border-radius:16px;"
  loading="lazy"
  title="Book an appointment"
></iframe>

5. Optional language

You can set the initial booking language with lang. For example, Norwegian:

https://turn-wave.com/embed/MERCHANT_SLUG?lang=no&theme=dark

Supported language codes are en, nl, de, fr, no, and ar.

6. Test before launch

  • Open the page where you embedded the iframe.
  • Confirm the booking form loads without a browser frame error.
  • Pick an available date and time.
  • Submit a real test booking using the merchant's details.
  • Ask the merchant to confirm the appointment appears in Turnwave.
  • Ask the merchant to cancel the test appointment if needed.

Troubleshooting

  • If the iframe is blocked, ask the merchant to check that the exact website origin is approved in Advanced.
  • If the form appears too short, increase the iframe min-height. We recommend starting at 720px.
  • If the wrong merchant form appears, confirm the merchant booking slug with the merchant.
  • If availability is missing, ask the merchant to check their schedule and blocked periods in Turnwave admin.

Need help?

For integration questions, contact Turnwave from the merchant admin dashboard or visit the data and GDPR page for platform details.