Developer Portal · v1

Build with ProPract.

Power any marketing website with ProPract's bookings, services, group events and courses. Drop-in widgets or one-shot JSON — pick your poison.

Quickstart · 30 seconds

Drop this into any HTML page and a floating "Book" button appears in the bottom-right. Replace your-slug with the expert's public slug.

<script src="https://propract.com/widget.js"
        data-slug="your-slug"
        data-mode="float" async></script>

Services grid

Renders every published service as a responsive card grid with book CTAs.

<div id="pp-services"></div>
<script src="https://propract.com/widget.js"
        data-slug="your-slug"
        data-mode="services-grid"
        data-target="#pp-services" async></script>
Pro+ API tier

Courses / workshops grid

Same shape for group events, courses, workshops, cohorts — auto-detects type badges.

<div id="pp-courses"></div>
<script src="https://propract.com/widget.js"
        data-slug="your-slug"
        data-mode="courses-grid"
        data-target="#pp-courses" async></script>

Inline booking iframe

Embeds the full booking flow inside your page — no modal.

<div id="book"></div>
<script src="https://propract.com/widget.js"
        data-slug="your-slug"
        data-mode="inline"
        data-target="#book" async></script>

Theming

Every widget respects CSS variables on its container (or :root). No global CSS reset needed.

<div id="pp-services" style="
  --pp-accent: #2f6e4d;
  --pp-accent-fg: #ffffff;
  --pp-radius: 16px;
  --pp-card-bg: #fdf6f0;
  --pp-card-border: #e8dcc8;
  --pp-font: 'Playfair Display', serif;
"></div>

Supported variables: --pp-accent, --pp-accent-fg, --pp-radius, --pp-font, --pp-card-bg, --pp-card-border.