Putting booking on your website

First

Find your publishable key

Every account has one, and it starts with pk_live_. It is in your dashboard under Booking, then Install, alongside the snippets with your key already filled in.

It is not a secret. It identifies your business to the booking service and nothing more: what actually protects you is the list of websites you allow, which is enforced twice, in the browser and again on our side for every booking that is submitted. So it is safe in the page source, which is where it has to be.

Option one

Inline, in the page

The widget renders where you put the div. Right for a Booking page, or a section partway down a service page.

It sizes itself to its content, so it will not leave a gap under it or cut off the last step.

<div id="harpen-booking"></div>
<script src="https://www.harpentech.com/api/booking/v1/public/embed.js"
        data-harpen-key="pk_live_your_key"
        data-mode="inline"
        data-target="#harpen-booking"></script>

• data-target takes any CSS selector. Leave it out and the widget appears where the script tag is.
• Put the script where you want the widget, not in the head: the head is for things with no position on the page.

Option two

A button that opens it

A Book now button anywhere on the site, opening the whole flow in a panel over the page. Right for a header, a footer, or a call to action next to a price.

The button is drawn for you and takes your accent colour, so it does not need styling to look like it belongs.

<script src="https://www.harpentech.com/api/booking/v1/public/embed.js"
        data-harpen-key="pk_live_your_key"
        data-mode="popup"
        data-label="Book now"
        data-accent="#1f6feb"></script>

• You can use as many of these as you like on one page, each with its own label.
• Wide themes work here: a panel has room a sidebar does not.

Option three

Your own booking page, no website needed

Every account gets a page at harpentech.com/book/your-name. It carries your name, your logo and your colours, and it works on its own.

That is the link to put in an Instagram bio, a Google Business profile, an email signature or a printed card. Plenty of businesses use only this one and never embed anything.

https://www.harpentech.com/book/your-business

On WordPress

The plugin, if you would rather not touch code

Install the Harpen Booking plugin, paste the connect code from your dashboard, and it registers your site and adds a block and a shortcode.

The plugin is deliberately thin: it stores your key and renders the same script tag as above. All the booking logic stays with us, so there is nothing on your site to keep updated or to break when WordPress updates.

[harpen_booking]

Fine tuning

The options worth knowing

All of these are attributes on the script tag, and all of them are optional.

• data-theme picks the look. Minimal, Editorial and Compact work inline; Concierge needs the width of a popup or the hosted page, and falls back to Minimal if it cannot have it.
• data-service preselects one service, so a Book this treatment button lands the customer on the calendar rather than on a list they have already chosen from.
• data-location preselects a branch, for a business with more than one.
• data-label and data-accent set the popup button's text and colour.

Before it goes live

Allow your website

Add your domain in the dashboard under Booking, then Install. Until you do, the widget will render on your hosted page but not on your own site, which is the single commonest reason an embed looks blank.

The WordPress plugin adds the domain for you when you paste the connect code, so there is nothing to do there.

For developers

The API, if you want to build your own front end

Booking is a versioned HTTP API and the widget is only one of its clients. Everything the widget does, your code can do: read the services and staff, ask for availability, create a booking, let a customer manage it afterwards.

The specification is generated from the same schemas the server validates against, so it cannot drift from what actually runs. Generate a client from it rather than writing requests by hand.

https://www.harpentech.com/api/booking/v1/openapi.json

• Public endpoints use your publishable key. Anything that reads or writes your own data needs a secret key, which you create in the dashboard under Booking, then Developers.
• Send an Idempotency-Key on a booking and a retry or a double tap will produce exactly one booking.