Bookly Service Variants — Implementation Pattern

Overview

Bookly does not natively support service variations (e.g., a single "Neurotoxins" service with selectable sub-types like Lip Fill, First Time Tox, etc.). However, a workable pattern exists: treat each variant as a separate Bookly service on the backend, while presenting a unified, dynamic interface on the frontend.

This pattern was identified and validated during work on ^[1] service pages.

The Problem

Clients often want a single parent service page (e.g., "Vampire Facial") with selectable variants that each have:
- Distinct descriptions, images, and pricing
- Their own booking flow

Bookly's data model has no concept of service variations — each bookable item must be its own service entry.

The Solution

Backend (Bookly)

• Create a separate Bookly service for each variant (e.g., "Vampire Facial — Standard", "Vampire Facial — PRP Add-on").
• Each service has its own booking URL / embedded flow.

Frontend (WordPress / Elementor)

• Build a single parent page for the service category.
• Use tabs, a dropdown, or button selectors to let the user choose a variant.
• On variant selection, dynamically swap the visible content block (description, images, pricing, FAQs) to match the chosen variant.
• The "Book Now" button URL updates to point to the corresponding Bookly service flow for the selected variant.

The user experience feels like a unified product page with variants; the booking backend remains a flat list of individual services.

Implementation Notes

• The page content swap on variant selection can be handled via:
• CSS show/hide toggling (simplest, no JS required beyond Elementor interactions)
• JavaScript/jQuery to update visible sections and button href
• Elementor Pro conditions or custom tabs widget
• There is no need to involve Bookly's API for the variant switch — the "integration" is simply pointing the CTA button at the correct pre-configured Bookly service URL.
• The number of Bookly services will grow proportionally with the number of variants across all parent pages. This is expected and acceptable.

Validation

A test case was assigned to Ishaq using the Vampire Facial service page for La Marie Connect. This was chosen as a simpler starting point (fewer variants) before applying the pattern to more complex pages like Neurotoxins / ToxJuvo.

"We can do this for a single page... but Bookly doesn't have the variation [natively]."
— Ishaq, confirming the workaround is feasible

Related Patterns & Considerations

• Homepage "Book Now" interim state: While the full variant system is being built out, the client (La Marie Connect) requested the homepage "Book Now" button redirect to their Square page listing all products. This is a temporary measure. See ^[1].
• Booking button filtering: An existing filtering system on service pages (set up by Ishaq) was reviewed and confirmed to remain in place — no changes needed to the per-service booking button URLs.
• Zapier integration: Separate from the variant pattern, Zapier automation issues were ongoing at the time of this meeting. See ^[1] for status.

Action Items (from originating meeting)

See Also

• ^[2]
• ^[3] (if exists)