Embed the booking page

Put the booking page on your own website, so visitors book without leaving it. This needs no key and no code on your server: you paste two lines of HTML.

The easiest route is the Channels page in Aphra. Its picker writes the code for you, for your whole menu, one treatment, a selection, or a category. This page explains what that code does, for when you want to adjust it.

Inline

The booking page appears where you put the div and grows with its content, so there is no scroll bar inside your page.

<div data-bf-book="massage-bonaire"></div>
<script src="https://app.aphrabooking.com/embed.js" async></script>

Replace massage-bonaire with your own address name, the part after /book/ in your booking link.

A button or link that opens the booking page in a window over your site:

<a href="https://app.aphrabooking.com/book/massage-bonaire" data-bf-popup>Book now</a>
<script src="https://app.aphrabooking.com/embed.js" async></script>

Keep the href. Without JavaScript, or when a visitor opens the link in a new tab, it works as a normal link to your booking page.

A popup can also be opened from an element without an href, by naming the business in the attribute itself: <button data-bf-popup="massage-bonaire">Book now</button>.

What to show

Add one of these to an inline div, or to a popup element that names the business in data-bf-popup. On a link with an href and an empty data-bf-popup, the href decides what opens; point it at the page you want, such as /book/massage-bonaire/services/deep-tissue. If you add more than one, the first in this list wins.

Attribute	Shows
`data-bf-service="deep-tissue"`	One treatment, ready to book.
`data-bf-services="deep-tissue,hot-stone"`	Your own selection of treatments.
`data-bf-category="massage"`	All treatments in one category.

Without any of them, the full menu is shown.

Also optional:

Attribute	Effect
`data-bf-lang="en"`	Always show the booking page in this language: `nl`, `en`, `de`, `es`, `fr` or `pt`.
`data-bf-title="Book a massage"`	Title of the frame, for screen readers. For a popup it defaults to the link text.

Several on one page

Include the script once per page, anywhere. It picks up every data-bf-book and data-bf-popup on the page, including ones that site builders such as Wix or Squarespace add later.

From your own JavaScript

window.__bfEmbed.open('massage-bonaire', { services: ['deep-tissue', 'hot-stone'], lang: 'en' });
window.__bfEmbed.close();
window.__bfEmbed.scan(); // look for new embed spots after you changed the page

open accepts the same options as the attributes: service, services (a list or a comma-separated string), category, lang and title.

WordPress