CalendarPA can embed your booking page directly into your website. There are four embed styles, and the dashboard generates the correct code for each one.
Get your code: go to Booking Types, open the ⋮ menu on the type you want, and choose Embed. Copy the generated snippet — it already contains your username and booking type. The examples below are for reference.
The booking calendar renders directly in the page and scrolls with your content. Best for a dedicated booking page or the bottom of a service page.
<!-- CalendarPA Inline Embed -->
<div
data-calendarpa-inline
data-username="yourname"
data-event-slug="your-booking-type"
style="width: 100%;"
></div>
<script src="https://calendarpa.com/embed.js" async></script>A button that opens the booking page in an overlay. Best when you want a call to action without giving up page space.
<!-- CalendarPA Popup Button -->
<button
data-calendarpa-popup
data-username="yourname"
data-event-slug="your-booking-type"
data-button-text="Book Now"
>
Book Now
</button>
<script src="https://calendarpa.com/embed.js" async></script>The same overlay, triggered by a text link instead of a button. Useful inside a paragraph or a nav bar.
A button that stays fixed in the corner of the page as visitors scroll, so booking is always one click away.
Inline — always visible, no extra click, better for SEO. Takes up page space.
Popup button — keeps the page compact, works well as a call to action.
Popup text link — least visually intrusive, good inside body copy.
Floating — highest visibility across a long page.
Nothing appears. The data attributes must be on the container element, not on the script tag, and the attribute for the booking type is data-event-slug. Copying the generated code from the dashboard avoids both mistakes.
The script loads but the widget is empty. Check that the username and booking type slug match a live, active booking type.