Embedding Your Booking Page

Embed your CalendarPA booking page directly on your website so visitors can book without leaving your site.

Embed Options

CalendarPA offers four embed styles:

Inline

Your booking page loads directly into your page content.

• Best for: Dedicated booking pages or sections

Popup Button

A styled button that opens your booking page in a popup when clicked.

• Best for: Call-to-action buttons

Popup Link

A simple text link that opens your booking page in a popup.

• Best for: Links inside your own text

Floating

A button fixed to the corner of the page, visible as visitors scroll.

• Best for: Making booking available on every page

Getting Your Embed Code

1. Go to Booking Types

2. Click the menu icon (⋮) on your booking type

3. Select Embed

4. Choose Inline, Popup Button, Popup Link or Floating

5. Pick your framework: HTML, Next.js, React, Vue or Google Tag Manager

6. Click Copy Code

Adding to Your Website

WordPress

1. Edit your page

2. Add a Custom HTML block

3. Paste the embed code

4. Update/publish

Squarespace

1. Add a Code Block

2. Paste the embed code

3. Save and publish

Wix

1. Add an HTML iframe element

2. Paste the embed code

3. Adjust size as needed

Other Platforms

Most website builders have an "HTML" or "Code" block. Paste the embed code there.

Customization

In the embed window you can set:

• Accent color and theme (light or dark)

• Button text and button text color (popup button and floating)

• Link text (popup link)

• Position: left, center or right (floating)

• Width (inline; the height adjusts to fit)

A live preview shows how the embed will look.

Mobile Responsiveness

The embed is fully responsive and works on all device sizes.