How to Add a Booking Widget to Your Website (2026 Guide)

What Is a Website Booking Widget?

A booking widget is a small piece of embeddable code you add to your website — it creates an interactive "Book Now" button or form that opens a complete booking experience directly on your page, without redirecting clients to a third-party site.

When a visitor clicks "Book Now", they see your available services, time slots, and pricing — and can complete the entire booking in under 2 minutes without ever leaving your website. The confirmed booking appears instantly in your dashboard calendar.

Why a Booking Widget Outperforms a "Call to Book" Link

How to Add BookPoint's Booking Widget to Your Website

BookPoint's widget is built as a Web Component with Shadow DOM — this means it loads independently and cannot interfere with your website's existing CSS or JavaScript. It's compatible with any website platform: WordPress, Squarespace, Wix, Webflow, or custom HTML.

Step 1: Get your embed code

In your BookPoint dashboard, go to Settings → Widget. Copy the one-line embed script:

<script
  src="https://bookpoint.net/widget/v1/loader.js"
  data-tenant="your-business-slug"
  data-lang="en"
  data-color="#E91E8C"
></script>
<button data-bookpoint-open>Book an appointment</button>

Step 2: Paste it on your website

Paste the script anywhere in your page HTML — before the closing </body> tag. The button can be styled to match your site's design, or you can use an existing button by adding the data-bookpoint-open attribute to it.

Step 3: Customise the widget

In BookPoint Settings → Widget, configure:

• Primary colour — matches your brand
• Pre-selected service — open the widget pre-loaded with a specific service
• Language — display in the client's language (7 languages supported)
• "Powered by BookPoint" — visible on Free and Starter plans, hidden on Pro

What the Widget Experience Looks Like for Your Clients

When a client clicks the "Book" button on your website:

1. A smooth overlay opens — no page reload
2. They select a service (or it's pre-selected)
3. They choose a date and available time slot
4. They optionally choose a specific staff member
5. They enter their name, email, and phone
6. They confirm — a WhatsApp/SMS/email confirmation fires instantly

The entire process takes under 2 minutes. The booking appears in your dashboard immediately.

Booking Widget on WordPress

For WordPress sites, paste the script in:

• Appearance → Theme Editor → footer.php, before </body>
• Or use a plugin like "Header Footer Code Manager" to inject scripts without editing theme files
• Or paste directly in the Gutenberg editor using an "HTML" block where you want the button to appear

Booking Widget on Squarespace / Wix / Webflow

These platforms all support custom code injection:

• Squarespace: Settings → Advanced → Code Injection → Footer
• Wix: Editor → Add → Embed → HTML Embed
• Webflow: Project Settings → Custom Code → Footer code

Frequently Asked Questions

Will the booking widget slow down my website?

No. BookPoint's loader.js is approximately 5KB and loads asynchronously — it has no measurable impact on your Core Web Vitals or Google PageSpeed score. The full widget code only loads when a client clicks the "Book" button.

Can I embed the booking widget on multiple pages?

Yes. The same script can be added to any number of pages — your homepage, services page, contact page, etc. You can also add a different service pre-selected on each page by changing the data-service attribute.

Does the widget work on mobile?

Yes, BookPoint's widget is fully responsive and mobile-first. The overlay adapts to any screen size.

Can clients book without creating an account?

Yes. Clients do not need to create an account or log in. They just enter their name, email, and phone number to complete the booking.