Embedding a booking widget on your website

The Bontro widget lets you add a "Book Now" button to any website or page. When clicked, it opens your full booking flow in a modal overlay -- no redirect, no new tab.

How to embed it

Add one line of HTML wherever you want the button to appear:

```html <script src="https://bontro.co/widget/your-slug" async></script> ```

Replace `your-slug` with your booking link slug (the part after /book/ in your URL). The button appears automatically where the script tag is placed.

Where to use it

- Personal website or portfolio - Squarespace or Wix site -- paste into an HTML block - Linktree or Beacons -- use the "HTML" block and paste the script - Carrd -- use the embed element - WordPress -- paste into a Custom HTML widget

Customization

The button automatically uses your brand color from Settings -> Branding. No configuration needed.

If you want to trigger the widget from your own custom button instead:

```html <script src="https://bontro.co/widget/your-slug" async></script> <button onclick="Bontro.open()">Schedule with me</button> ```

iframe embed (alternative)

If you prefer a fully embedded booking form without a modal, use an iframe directly:

```html <iframe src="https://bontro.co/book/your-slug/widget" width="100%" height="700" style="border:none;border-radius:16px;" title="Book an appointment" ></iframe> ```

This renders the full booking flow inline on your page, no button or overlay needed. Good for a dedicated booking page on your own site.

Getting your embed code

Your embed code is available in Settings -> Booking Page -> Embed Widget. Copy and paste it directly -- your slug is pre-filled.