Before You Start: What You Actually Need
Adding online booking to a website does not require a developer, a plugin with 400 settings, or a custom-built calendar. You need two things:
- A booking system account — something that holds your availability and lets clients pick a slot.
- A small code snippet — usually one or two lines of HTML — that you paste anywhere on your website.
That's it. BookPoint generates the snippet for you. Here's how to add it to the most popular website platforms.
Step 1 — Create Your BookPoint Account
- Go to bookpoint.net and click Sign up free.
- Complete the onboarding wizard: business name, services, working hours. Takes 5 minutes.
- Go to Settings → Widget in your dashboard.
- Customise the button label, colour, and language.
- Copy the embed snippet — it looks like this:
<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 now</button>Step 2 — Add the Snippet to Your Website
WordPress (any theme)
- Log into WordPress admin.
- Go to Appearance → Theme File Editor (or use a child theme).
- Add the
<script>line before</body>infooter.php, OR - Use the Custom HTML block in Gutenberg and paste both lines wherever you want the button to appear.
Tip: The Elementor, Divi, and Beaver Builder page builders all have a "Custom HTML" widget — just drag it where you want the button and paste.
Wix
- In Wix Editor, click Add → Embed → Custom Embeds → Embed a Widget.
- Paste the full snippet into the code box.
- Resize and place the element where you want the button.
Squarespace
- Edit the page where you want the button.
- Add a Code block.
- Paste both snippet lines and save.
Webflow
- Drag an Embed element onto your page.
- Paste the snippet into the HTML embed dialog.
Custom HTML / raw website
Paste the script tag anywhere in your <head> or before </body>, then put the <button> element exactly where you want the button to appear on the page.
What Happens When a Visitor Clicks the Button
A booking overlay slides in — completely styled and isolated from your site's CSS (it uses Shadow DOM). The visitor selects a service, picks a date and time, enters their contact details, and confirms. You receive an email notification. The slot is blocked from being double-booked instantly.
Will the Widget Break My Website's Design?
No. The BookPoint widget is a Web Component with a Shadow DOM, which means its styles are 100% isolated from your website's styles. Your site's CSS never affects the widget, and the widget's CSS never affects your site. The only element that appears on your page is the button itself — and that can be any HTML element you target with data-bookpoint-open.
Pricing
| Plan | Price | Widget feature |
|---|---|---|
| Free | €0/mo | Widget with "Powered by BookPoint" label |
| Starter | €24/mo | Widget, no branding label, SMS reminders + payments |
| Pro | €59/mo | Custom colour matching, WhatsApp notifications, AI booking assistant |
FAQ
Does the widget slow down my website?
The loader script is only ~5 KB and loads asynchronously — it won't block your page rendering or affect your Core Web Vitals score.
Can I pre-select a specific service in the widget?
Yes. Add data-service="service-slug" to the script tag and the widget opens directly to that service's booking calendar, skipping the service selection step.
Sign up free and add BookPoint to your website in 5 minutes. No developer needed.
Add booking to your site →
