> ## 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.

# Publish your booking page

> Design your public booking page, choose which services appear on it, and take it live.

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" />

Step 5 of the [setup checklist](/practice/get-started). Your booking page is a public web page where anyone with the link can pick a service, pick a time and book themselves in. Until you publish it, the link returns a **Booking Page Not Found** message.

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

<TaskHeader before="At least one service, so visitors have something to book" time="2 minutes to publish; longer if you design it properly" after="A live public page at your own address, ready to share" />

## Design and publish

The designer has five tabs — **Design**, **Content**, **Services**, **Forms** and **Settings** — plus a **Preview** toggle and **Save** and **Publish** buttons in the header. **Save** and **Publish** are separate actions: saving stores your edits, publishing makes them visible to the public.

<Steps>
  <Step title="Set your page address">
    On the **Design** tab, under **Page Settings**, enter a **Page Slug** — "This will be part of your booking page URL". The indicator next to it reads **Checking availability…** then **Available**; neither **Save** nor **Publish** will run while the slug is unavailable.

    Pick something short and permanent. It is what you print, email and put in your bio.
  </Step>

  <Step title="Choose a look">
    Still on **Design**: **Choose Template**, then **Customize Colors** (**Primary Color**, **Secondary Color**, **Accent Color**, **Background Color**, or a **Quick Preset**) and **Typography**.
  </Step>

  <Step title="Say who you are">
    The **Content** tab holds **Clinic Information** (name, tagline, description), **Contact Information** (**Phone Number**, **Email Address**, **Website**, **Address**), **Branding & Images** (**Clinic Logo**, **Profile Image**, an optional banner) and **Page Content & SEO** — the **Page Title (SEO)** and **Meta Description** that appear in search results and link previews.

    <Note>
      This is a public page. Everything you type here is visible to anyone with the link, so use the clinic's public contact details, not a personal number.
    </Note>
  </Step>

  <Step title="Choose the services visitors can book">
    On the **Services** tab, each of your clinic's services has an **Add to Page** button that becomes **Added to Page**. The badge at the top counts how many are on the page, and **Make Featured** promotes one.

    If you see **No Services Found** — "You haven't added any appointment services yet." — use **Manage Appointment Services** and go build one first. See [Add the services you offer](/practice/get-started/services).
  </Step>

  <Step title="Decide what you ask for">
    The **Forms** tab builds the intake questions the visitor answers while booking. Each field has a **Field Label**, **Field Type**, **Placeholder** and **Required** and **Visible** switches. Ask for the minimum you need at booking time — anything else can be collected at check-in.
  </Step>

  <Step title="Set the booking and payment rules">
    The **Settings** tab holds **Allow Online Booking**, **Clinic Timezone**, **Advance Booking Days** ("How many days in advance patients can book") and the **Booking Confirmation Message**. **Payment Settings** below it controls **Accept Payments**, **Require Upfront Payment**, **Deposit Percentage**, **Refund Policy** and the **Currency** (which shows your clinic default).
  </Step>

  <Step title="Preview, save, publish">
    Select **Preview** to see the visitor's view, **Edit** to come back, then **Save Changes** — the banner "You have unsaved changes. Don't forget to save your work!" tells you when there is something outstanding. Finally select **Publish**.
  </Step>
</Steps>

## Check it worked

* The toast reads **Page Published** — "Your booking page is now live and accessible to patients."
* The badge on the **Booking Page URL** card changes from **Draft** to **Live**, and the button now reads **Unpublish**.
* Select **Open** to load the real page, or **Copy** to put the link on your clipboard ("Booking page URL has been copied to clipboard.").
* The **Get Started** checklist ticks **Publish your booking page**.

Book a test appointment through the public page yourself, then cancel it. It is the only way to see what a client actually sees.

## If something goes wrong

<AccordionGroup>
  <Accordion title="The link shows 'Booking Page Not Found'">
    The page is saved but not published, or the slug has changed. Check the badge reads **Live**, and that the link you shared matches the current **Booking Page URL**.
  </Accordion>

  <Accordion title="Publish and Save are both disabled">
    The **Page Slug** is empty or taken. Fix it on the **Design** tab and wait for the indicator to read **Available**.
  </Accordion>

  <Accordion title="Visitors see no available times">
    Opening hours are not set in the designer — they live in **Settings › Booking Settings**, a separate tab. Set your working hours there, and check **Allow Online Booking** is on in the designer's **Settings** tab.
  </Accordion>

  <Accordion title="My changes are live before I wanted them to be">
    Publishing is a state, not a snapshot: a saved change to a published page is public. Use **Unpublish** ("Your booking page has been taken offline.") while you rework it.
  </Accordion>

  <Accordion title="I want the page on my own domain">
    A published page can be served from your clinic's own domain instead of the default address. [Contact support](/platform/help/contact-support) to set it up.
  </Accordion>
</AccordionGroup>

<StillStuck topic="the booking page" />

Handling the bookings that arrive is covered in [Booking page](/practice/daily/booking-page).