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

# ServiceBooked Documentation

> Set up and run your AI Receptionist. Step-by-step guides for every feature, written for service-business owners.

<div data-product-guide-index className="flex w-full flex-col gap-8 max-w-5xl mx-auto px-4 md:px-8 lg:px-12 py-10 lg:gap-14 lg:py-16">
  <div className="flex max-w-[640px] flex-col gap-2 self-center text-center">
    <h1 className="text-[30px] font-medium leading-9 tracking-tight text-gray-900 dark:text-gray-50">
      Welcome to ServiceBooked
    </h1>

    <p className="text-balance text-base leading-relaxed tracking-tight text-gray-600 dark:text-gray-400">
      Set up your AI Receptionist, route missed calls, capture leads, and book more jobs. These guides walk you through every feature — start with the basics or jump straight to what you need.
    </p>
  </div>

  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <Card title={<span className="product-guide-feature-card-title">Getting started</span>} icon="play" href="/getting-started/quick-start" className="product-guide-feature-card" size={64}>
      <span className="product-guide-feature-card-description">New to ServiceBooked? Get set up in 15 minutes.</span>
    </Card>

    <a href="/phone-and-voice/connect-your-number" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
      <Icon icon="phone" color="rgb(var(--primary))" size={18} className="shrink-0" />

      <div className="flex flex-col gap-1">
        <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Phone & Voice</span>

        <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
          Connect your number, set up auto-text, configure the voice AI Receptionist.
        </span>
      </div>
    </a>

    <a href="/chat-widget/install-on-your-site" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
      <Icon icon="message-circle" color="rgb(var(--primary))" size={18} className="shrink-0" />

      <div className="flex flex-col gap-1">
        <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Chat Widget</span>

        <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
          Drop a chat bubble on your website and start capturing leads from visitors.
        </span>
      </div>
    </a>
  </div>

  <hr className="border-0 border-t border-border" />

  <div className="flex flex-col gap-4">
    <h2 className="font-serif text-xl font-medium leading-normal text-gray-900 dark:text-gray-50">Common tasks</h2>

    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
      <a href="/phone-and-voice/missed-call-auto-text" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
        <Icon icon="message-square-text" color="rgb(var(--primary))" size={18} className="shrink-0" />

        <div className="flex flex-col gap-1">
          <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Set up auto-text on missed calls</span>

          <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            Never miss a lead again — text callers back the moment they hang up.
          </span>
        </div>
      </a>

      <a href="/calendar/google-calendar" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
        <Icon icon="calendar" color="rgb(var(--primary))" size={18} className="shrink-0" />

        <div className="flex flex-col gap-1">
          <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Connect your calendar</span>

          <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            Let the AI Receptionist check your real availability before it books an appointment.
          </span>
        </div>
      </a>

      <a href="/forms/create-a-form" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
        <Icon icon="clipboard-list" color="rgb(var(--primary))" size={18} className="shrink-0" />

        <div className="flex flex-col gap-1">
          <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Build a quote form</span>

          <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            Capture leads from your website with a form that auto-replies with the AI Receptionist.
          </span>
        </div>
      </a>

      <a href="/team/inviting-members" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
        <Icon icon="users" color="rgb(var(--primary))" size={18} className="shrink-0" />

        <div className="flex flex-col gap-1">
          <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Invite your team</span>

          <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            Add admins and members so the whole team can pick up where leads land.
          </span>
        </div>
      </a>

      <a href="/reputation/sending-review-requests" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
        <Icon icon="star" color="rgb(var(--primary))" size={18} className="shrink-0" />

        <div className="flex flex-col gap-1">
          <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Ask for a review</span>

          <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            Ask every customer for a Google review automatically after a job wraps.
          </span>
        </div>
      </a>

      <a href="/reactivation/building-a-campaign" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
        <Icon icon="rotate-ccw" color="rgb(var(--primary))" size={18} className="shrink-0" />

        <div className="flex flex-col gap-1">
          <span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Re-engage past customers</span>

          <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            Run a campaign to win back customers you haven't heard from in a while.
          </span>
        </div>
      </a>
    </div>
  </div>
</div>