Altegio integration for online booking on website

Altegio integration for online booking on a website

Altegio (formerly YCLIENTS Business) is a service business management platform with advanced CRM, inventory, and analytics features. Integration allows embedding Altegio's online booking on your site and synchronizing data via API.

Embedding the widget

<!-- Altegio widget via iframe -->
<iframe
  src="https://widget.altegio.com/widget/[COMPANY_ID]/record?interface=2"
  width="100%"
  height="800"
  frameborder="0"
  allow="geolocation"
></iframe>

<!-- Or popup via JS -->
<script src="https://widget.altegio.com/widgetJS.js"></script>
<button onclick="AltegioPro.booking.open()">Book now</button>
<script>
  AltegioPro.init({ company_id: 'COMPANY_ID', lang: 'en' });
</script>

Altegio API

API is compatible with YCLIENTS API v2 — it's one platform with two brands:

class AltegioApiClient
{
    private const BASE_URL = 'https://api.altegio.com/api/v1';

    public function getServices(): array
    {
        return $this->request('GET', "/services/{$this->companyId}")->json('data');
    }

    public function getStaff(): array
    {
        return $this->request('GET', "/staff/{$this->companyId}")->json('data');
    }

    public function getAvailableDates(int $staffId, int $serviceId): array
    {
        return $this->request('GET', "/book_dates/{$this->companyId}", [
            'staff_id'   => $staffId,
            'service_id' => $serviceId,
        ])->json('data');
    }

    public function createRecord(array $data): array
    {
        return $this->request('POST', "/records/{$this->companyId}", $data)->json('data');
    }
}

Custom booking form over API

If the standard widget doesn't fit your site design — implement your own UI using Altegio API on the backend:

function CustomBookingForm() {
  const [step, setStep]       = useState<'service' | 'master' | 'datetime' | 'confirm'>('service');
  const [serviceId, setService] = useState<number | null>(null);
  const [masterId,  setMaster]  = useState<number | null>(null);

  const { data: services } = useQuery({ queryKey: ['services'], queryFn: fetchServices });
  const { data: staff }    = useQuery({
    queryKey: ['staff', serviceId],
    queryFn:  () => fetchStaff(serviceId!),
    enabled:  !!serviceId,
  });

  // ... multi-step form
}

Timeline

Embedding the standard widget: 1 day. Custom form via Altegio API: 4–6 working days.