> ## Documentation Index
> Fetch the complete documentation index at: https://docs.autodetailcrm.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Native Website Booking

> Run the shared CRM booking experience directly inside your business website while keeping your site's own design.

Native Website Booking places the CRM booking experience directly in your website's page. Customers stay on your domain while the shared CRM runtime loads live services, prices, availability, booking rules, and CAPTCHA configuration.

Your website owns the presentation. Auto Detailing CRM owns the booking behavior.

<Info>
  Native Website Booking is a separate plan entitlement. A plan may include Online Booking and the Hosted Booking Page without including this channel.
</Info>

Native Website Booking uses the same **Scheduling & Availability** policy as the hosted page and AI booking. It does not maintain separate hours or capacity.

## Before you start

You need:

* Online Booking enabled and configured;
* the Native Website Booking entitlement in your plan;
* permission to manage Online Booking settings;
* access to your website's DNS and source code;
* one canonical HTTPS hostname for the booking page.

Use one canonical hostname, such as `example-detailer.com`. Redirect alternate hostnames such as `www.example-detailer.com` to the canonical hostname with a permanent `301` or `308` redirect.

<Warning>
  Hostnames are authorized exactly. Registering `example-detailer.com` does not authorize `www.example-detailer.com`. Register both only when both must render booking; otherwise use a redirect so the alias does not consume another hostname slot.
</Warning>

## Connect a website

<Steps>
  <Step title="Add the canonical hostname">
    Open **Settings → Website Integration → Online Booking → Native Website Booking**. Enter only the hostname, without `https://`, a port, path, query string, or wildcard.
  </Step>

  <Step title="Publish the DNS challenge">
    Copy the TXT record name and value shown by the CRM into your DNS provider. The challenge value is shown when it is created, so store it until DNS verification succeeds. A pending challenge expires after 48 hours; if it expires, add the hostname again to generate a new one.
  </Step>

  <Step title="Verify and provision">
    After DNS propagates, select **Verify domain**. The CRM verifies ownership, assigns managed Turnstile protection, and marks the hostname **Active** when provisioning succeeds.
  </Step>

  <Step title="Install the shared runtime">
    Copy the integration declaration shown for the active domain and place it where booking should appear on your website.
  </Step>

  <Step title="Match your website design">
    Style the documented `.adc-booking*` classes from your site's stylesheet. Keep booking state, validation, pricing, availability, and submission logic in the shared runtime.
  </Step>

  <Step title="Test the complete flow">
    Test service selection, date and time, contact details, CAPTCHA, submission, and the resulting CRM lead or order on desktop and mobile.
  </Step>
</Steps>

## Integration declaration

The CRM generates the correct booking token for your workspace. The minimum declaration has this shape:

```html theme={null}
<div
  data-adc-booking
  data-booking-token="YOUR_BOOKING_TOKEN"
  data-locale="en"
></div>

<script
  src="https://app.autodetailcrm.com/booking/loader-v1.js"
  defer
></script>
```

The v1 loader selects the latest compatible content-hashed runtime. Compatible fixes can therefore reach connected sites without copying booking logic into each website.

Supported runtime locales are currently `en` and `es`.

## What each side controls

| Your website | Shared CRM runtime |
| - | - |
| Page layout, fonts, colors, spacing, media, and surrounding content | Live services, pricing inputs, availability, validation, and booking steps |
| Placement of the booking container | Turnstile rendering, expiry, reset, and submission |
| Optional service buttons and analytics listeners | Idempotent retry behavior and safe error handling |
| Responsive theme overrides | Stable namespaced markup and lifecycle events |

Do not copy the runtime into your repository or hard-code services, fees, the business phone, a Turnstile site key, or API behavior. Those values come from the tenant's live CRM configuration.

## Domain states

| State | Meaning |
| - | - |
| **Pending verification** | Add the displayed TXT record, then verify again |
| **Provisioning** | Ownership passed and managed Turnstile setup is in progress |
| **Active** | The exact hostname can load the native booking channel |
| **Failed** | Review the displayed error, correct DNS or configuration, and retry |
| **Disabled** | The hostname is no longer accepted by the CRM |

Disabling a hostname blocks new external booking requests before provider cleanup completes.

<Note>
  A pending, unverified hostname does not reserve that hostname. The CRM reserves it for the workspace only after ownership verification succeeds and provisioning begins.
</Note>

## Security boundaries

* The booking token and Turnstile site key are public browser values, not account credentials.
* Turnstile secrets and Cloudflare management credentials remain server-side.
* All public booking endpoints enforce the same exact tenant/domain origin policy.
* The submit endpoint verifies the Turnstile action and Cloudflare-reported hostname.
* The CRM recalculates prices and availability before creating a record.
* Submission retries should reuse the same `Idempotency-Key`.

<CardGroup cols={2}>
  <Card title="Online Booking" icon="calendar-check" href="/guides/booking-page">
    Configure the booking backend shared by hosted and native channels.
  </Card>

  <Card title="Scheduling & Availability" icon="calendar-clock" href="/guides/scheduling-availability">
    Configure the shared hours, capacity, resources, and booking rules.
  </Card>

  <Card title="Public Booking API" icon="brackets-curly" href="/api-reference/introduction">
    Review the advanced endpoint contract and error responses.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.