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

# Your public booking page

> Design the page clients book on, decide whether it takes payment, and publish it on your own domain.

export const StillStuck = ({topic}) => <div className="ck-callout ck-callout--note" role="note">
    <p className="ck-callout__body">
      <strong>Still stuck{topic ? ` with ${topic}` : ''}?</strong>{' '}
      Check <a href="/platform/help/troubleshooting">Troubleshooting</a> first —
      it covers the failures we see most often. If that does not resolve it,{' '}
      <a href="/platform/help/contact-support">contact support</a> and include
      your workspace name and the time the problem happened, so we can find the
      matching entry in your audit log.
    </p>
  </div>;

export const TaskHeader = ({before, time, after}) => <div className="ck-task">
    {before ? <div className="ck-task__cell">
        <div className="ck-task__title">Before you start</div>
        <p className="ck-task__body">{before}</p>
      </div> : null}

    {time ? <div className="ck-task__cell">
        <div className="ck-task__title">Takes about</div>
        <p className="ck-task__body">{time}</p>
      </div> : null}

    {after ? <div className="ck-task__cell">
        <div className="ck-task__title">When you're done</div>
        <p className="ck-task__body">{after}</p>
      </div> : null}
  </div>;

export const Path = ({steps = []}) => <span className="ck-path">
    {steps.map((s, i) => <span key={i} className="ck-path__step">
        {i > 0 ? <span className="ck-path__sep" aria-hidden="true">
            ›
          </span> : null}
        {s}
      </span>)}
  </span>;

export const Availability = ({editions = ['all'], plans, roles, note}) => {
  const list = editions.includes('all') ? ['clinic', 'pharmacy', 'lims'] : editions;
  return <div className="ck-avail" role="note" aria-label="Feature availability">
      <span className="ck-avail__label">Available in</span>

      {list.map(e => <span key={e} className={`ck-pill ck-pill--${e}`}>
          {EDITION_LABELS[e] || e}
        </span>)}

      {plans ? <span className="ck-avail__label">Plan</span> : null}
      {plans ? <span className="ck-pill ck-pill--plan">{plans}</span> : null}

      {roles ? <span className="ck-avail__label">Who</span> : null}
      {roles ? <span className="ck-pill ck-pill--role">{roles}</span> : null}

      {note ? <span className="ck-avail__note">{note}</span> : null}
    </div>;
};

<Availability editions={['clinic']} plans="Solo and Team" roles="Owner, Manager" note="Serving the page from your own domain needs the Team plan." />

Your booking page is a public web page where anyone can pick a service, choose a time and book it, without an account. You design it in the **Booking Page Designer**, and it goes live at `/book/` followed by your page address.

<Path steps={['Sidebar', 'Appointment', 'Booking Page']} />

<TaskHeader before="At least one service, and a payment provider connected if you want to take money at booking" time="15 minutes" after="A live page clients can book from, on a link you can share" />

## Two things make bookings possible

Everything else on the page is presentation. Online booking works only when both of these are true:

1. **Allow Online Booking** is switched on, on the **Settings** tab.
2. At least one service is marked visible on the **Services** tab.

A page with neither loads for the visitor and offers them nothing to book.

## Design the page

The designer has five tabs and a live preview beside them; switch the preview between desktop and mobile as you work, because most people book on a phone.

<Steps>
  <Step title="Design — colours, logo and layout">
    Set the look of the page. This tab also carries the **Custom domain** card, where a page can be served from an address like `book.yourclinic.com` instead of the ClinikEHR one. That card needs the Team plan — see [Custom domains](/platform/settings/custom-domain).
  </Step>

  <Step title="Content — the words">
    Your practice's name, introduction, address and any notice a client should read before booking.
  </Step>

  <Step title="Services — what can be booked">
    Choose which services appear and in what order. A service that is not visible here cannot be booked online, whatever else is configured. Manage the services themselves under **Settings → Appointment Services**.
  </Step>

  <Step title="Forms — what you ask for">
    The questions a client answers while booking. Ask for what you need at the desk and no more; every extra field loses bookings.
  </Step>

  <Step title="Settings — the rules">
    Covered below. This is where booking is switched on.
  </Step>
</Steps>

## Set the booking rules

On the **Settings** tab, the **Booking Settings** card holds three controls:

| Control                          | What it does                                                           |
| -------------------------------- | ---------------------------------------------------------------------- |
| **Allow Online Booking**         | Enables direct booking from the page. Off means the page is read-only. |
| **Advance Booking Days**         | How far ahead a client may book                                        |
| **Booking Confirmation Message** | The text shown after a successful booking                              |

## Take payment at booking

The same tab has a payments section, opened by the **Accept Payments** switch.

| Control                     | What it does                                                                         |
| --------------------------- | ------------------------------------------------------------------------------------ |
| **Payment Methods**         | Which methods the page offers — card, bank transfer, cash, insurance and the wallets |
| **Require Upfront Payment** | Whether the booking completes without payment                                        |
| **Payment Provider**        | Which connected provider processes the charge                                        |
| **Deposit Percentage**      | Take part of the fee now and the rest at the visit                                   |
| **Payment Instructions**    | Shown at checkout                                                                    |
| **Refund Policy**           | Shown before they pay                                                                |

Connect the provider first under **Settings → Online Payments**. Until you do, a page set to require payment can take a card from nobody. Amounts are shown in your clinic's own currency, set under [Currency](/platform/settings/currency).

## Publish and share

Save the designer, then open the page at `/book/` and your page address to see exactly what a client sees. Share that link on your website, in your email signature and on your listings.

## Check it worked

* Opening the public link in a private browser window shows your branding, your content and your visible services.
* Picking a service offers real times that match your availability in **Settings → Booking Settings**.
* Completing a booking creates an appointment on the calendar and shows your **Booking Confirmation Message**.
* With payments on, the checkout offers the methods you enabled and shows your **Refund Policy**.

## If something goes wrong

<AccordionGroup>
  <Accordion title="The page loads but nothing can be booked">
    Either **Allow Online Booking** is off, or no service is marked visible on the **Services** tab. Both are required.
  </Accordion>

  <Accordion title="Services are visible but every day is full">
    The page shows real availability. Providers need schedules, special dates must not be closing the day, and any resource the service requires must be free. Fix it in **Settings → Booking Settings** — see [Manage the appointment book](/practice/daily/appointments).
  </Accordion>

  <Accordion title="Checkout will not accept a card">
    No payment provider is connected, or the one selected in **Payment Provider** is not the connected one. Finish the connection under **Settings → Online Payments**.
  </Accordion>

  <Accordion title="The Custom domain card is not there">
    Custom domains are a Team feature. See [Change your plan](/platform/plans/change-plan).
  </Accordion>

  <Accordion title="I need to take the page down for a while">
    Turn **Allow Online Booking** off on the **Settings** tab. The page still loads and still shows your details — it stops offering times. Nothing already booked is affected.
  </Accordion>
</AccordionGroup>

<StillStuck />