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

# Readdy Booking

> Create booking calendars, set availability, and manage appointment information in Readdy

With Readdy Booking, you can easily add booking functionality to your website, allowing visitors to book services online directly.

## How to Use

<Steps>
  <Step title="Enter Your Project">
    Open the project where you want to add booking functionality.
  </Step>

  <Step title="Open Connects">
    Click the **Connects** button in your project.

    <Frame>
      <img src="https://mintcdn.com/readdy/DVR1m5KO54hpjW-t/images/go-to-connects.png?fit=max&auto=format&n=DVR1m5KO54hpjW-t&q=85&s=518b280f4f709d1d7017759adc5242f6" alt="Connects button in the top navigation bar" width="1516" height="904" data-path="images/go-to-connects.png" />
    </Frame>
  </Step>

  <Step title="Add Readdy Booking">
    Find **Readdy Booking** in the Connects panel and click **Connect**.

    <Frame>
      <img src="https://mintcdn.com/readdy/DVR1m5KO54hpjW-t/images/connects/readdy-booking.png?fit=max&auto=format&n=DVR1m5KO54hpjW-t&q=85&s=1dabba8b720626bdb22cea79a709839e" alt="Readdy Booking in the Connects panel" width="2046" height="1730" data-path="images/connects/readdy-booking.png" />
    </Frame>
  </Step>

  <Step title="View Feature Panel">
    After opening the panel, you'll see two core features:

    * **Create Booking**: AI automatically generates a booking component in your project
    * **Setting Availability**: Configure your available booking times

    <Frame>
      <img src="https://mintcdn.com/readdy/avsZxRT1zcyAuKCM/images/readdy-booking-panel.png?fit=max&auto=format&n=avsZxRT1zcyAuKCM&q=85&s=6e210fcdfaac11d28d9a54669995f5ec" alt="Readdy Booking Panel" width="3840" height="1936" data-path="images/readdy-booking-panel.png" />
    </Frame>

    <Warning>
      **Recommendation**: Complete Setting Availability first, then create the component to ensure users see the correct available times.
    </Warning>
  </Step>
</Steps>

### Create Booking Component

Click **Create Booking**, and AI will automatically generate a booking calendar component based on your current page content.

<Frame>
  <img src="https://mintcdn.com/readdy/avsZxRT1zcyAuKCM/images/readdy-booking-create.png?fit=max&auto=format&n=avsZxRT1zcyAuKCM&q=85&s=33958ccdefc116ac12297d27eab1cf2e" alt="Create Booking Component" width="3840" height="1932" data-path="images/readdy-booking-create.png" />
</Frame>

After the component is created:

* Users can book appointments on your website
* Booking data will automatically appear on the Appointments page
* You can customize the component's style, fields, and interactions in the editor

### Configure Availability

Click **Setting Availability** to set your available dates and time slots.

<Frame>
  <img src="https://mintcdn.com/readdy/avsZxRT1zcyAuKCM/images/readdy-booking-availability.png?fit=max&auto=format&n=avsZxRT1zcyAuKCM&q=85&s=e42534f0482c834bc4904e5423930251" alt="Set Availability" width="3840" height="1932" data-path="images/readdy-booking-availability.png" />
</Frame>

<Info>
  This setting is shared with Readdy Agent. Modifications in either location will sync in real-time without requiring duplicate configuration.
</Info>

## View Appointment Information

Appointments submitted by users will automatically appear on the **Appointments** page, where you can view:

* Appointment time
* Information filled in by users
* Related notes and comments

<Frame>
  <video controls>
    <source src="https://mintcdn.com/readdy/avsZxRT1zcyAuKCM/images/readdy-booking-appointments.mp4?fit=max&auto=format&n=avsZxRT1zcyAuKCM&q=85&s=6ebec40969d0e3c6e48049ecd73c9ff2" type="video/mp4" data-path="images/readdy-booking-appointments.mp4" />
  </video>
</Frame>

## FAQ

<AccordionGroup>
  <Accordion title="Do I need to republish after modifying availability?">
    No. After modifying Availability, it will automatically sync without requiring component recreation or publishing a new version.
  </Accordion>

  <Accordion title="Will Availability settings affect Readdy Agent?">
    Yes. Readdy Booking and Readdy Agent use the same Availability configuration, and modifications will sync in real-time.
  </Accordion>

  <Accordion title="Can I customize the booking form fields?">
    Yes. After creating the component, you can add more information collection fields in the editor, such as notes, special requirements, etc.
  </Accordion>

  <Accordion title="How can users cancel or reschedule an appointment?">
    Users can cancel or reschedule appointments by chatting with Readdy Agent. Make sure you have the Agent feature enabled on your website so users can interact with it to manage their bookings.
  </Accordion>
</AccordionGroup>