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

# Book an Appointment

> Pick a service, choose a time, confirm

# <span className="s-hero">Book an Appointment</span>

The best part: **three taps** and you are booked.

<Info>📱 🧭 **Where:** Business page → **Experts** → tap an expert</Info>

<Steps>
  <Step title="Pick a service">
    <Frame>
      <img src="https://mintcdn.com/codevestllc-5d6f3ede/83OKNCH1Mjf0LcvJ/images/customer/33.png?fit=max&auto=format&n=83OKNCH1Mjf0LcvJ&q=85&s=4bf28c61fa0de836138ec849955c6a16" alt="Service selection" width="1080" height="1350" data-path="images/customer/33.png" />
    </Frame>

    Tapping an expert opens the “Selection for …” panel with their services, each showing price and duration.

    <div className="s-action">Tap the service you want (e.g. **Hair And Beard · 1200 TL · 45 min**). You can select several — duration and price add up automatically.</div>
  </Step>

  <Step title="Pick a date">
    <Frame>
      <img src="https://mintcdn.com/codevestllc-5d6f3ede/83OKNCH1Mjf0LcvJ/images/customer/38.png?fit=max&auto=format&n=83OKNCH1Mjf0LcvJ&q=85&s=bf7e0852df3642bdc7be8ba5110cb7dc" alt="Date selection" width="1080" height="1350" data-path="images/customer/38.png" />
    </Frame>

    A **Total: 45 min · 1200 TL** summary appears under your selection. Choose the day from the strip below.

    <Accordion title="🔎 Fields in this section">
      | Field / Element                        | What it means                                         |
      | -------------------------------------- | ----------------------------------------------------- |
      | **Total**                              | Combined duration and price of your selection.        |
      | **Select date (Today / Tomorrow / …)** | Quick day picker — swipe right for later days.        |
      | **Reservation date**                   | Use this menu to pick a day from the calendar.        |
      | **Note (optional)**                    | A note for the business (e.g. “please keep it long”). |
    </Accordion>
  </Step>

  <Step title="Pick a time">
    <Frame>
      <img src="https://mintcdn.com/codevestllc-5d6f3ede/83OKNCH1Mjf0LcvJ/images/customer/37.png?fit=max&auto=format&n=83OKNCH1Mjf0LcvJ&q=85&s=0289e78e0ed8abe571255cf631e4493f" alt="Time selection" width="1080" height="1350" data-path="images/customer/37.png" />
    </Frame>

    **Hours** lists the free slots for that day in green; taken slots are not shown.

    <div className="s-action">Tap a slot that suits you — e.g. **14:30**. The confirmation screen opens.</div>

    <Tip>For **session** (group) services the remaining capacity is shown under the time, e.g. “3 left”.</Tip>
  </Step>

  <Step title="Confirm">
    <Frame>
      <img src="https://mintcdn.com/codevestllc-5d6f3ede/83OKNCH1Mjf0LcvJ/images/customer/36.png?fit=max&auto=format&n=83OKNCH1Mjf0LcvJ&q=85&s=8fd0e5dbb9ec398ed6dcc4d6c5bf4d3a" alt="Reservation confirmation" width="1080" height="1350" data-path="images/customer/36.png" />
    </Frame>

    A final check: date, time, total duration and price.

    <div className="s-action">If everything looks right, tap **Yes**. Your appointment is booked! 🎉</div>

    <Tip>If the business uses auto-approval your booking is **Confirmed** instantly; otherwise it stays **Pending** and you get a notification once they approve it.</Tip>
  </Step>
</Steps>