Как интегрировать Altegio для онлайн-записи?
По статистике, 30% клиентов уходят из-за невозможности записаться онлайн в нерабочее время. Altegio (ранее YCLIENTS Business) решает эту задачу, но интеграция может быть разной: от простого iframe до кастомной формы через API. У нас за плечами 50+ проектов для салонов и клиник — этот опыт помог выявить типичные подводные камни. Например, одна сеть стоматологий потеряла 15% заявок из-за того, что виджет не поддерживал выбор филиала. Мы разработали для них кастомную форму, и конверсия выросла на 40%. В этой статье разберём, какие варианты интеграции существуют и когда стоит выбирать кастом.
Как встроить виджет Altegio на сайт?
Самый быстрый способ — использовать готовый виджет в виде iframe или попапа. Достаточно зарегистрироваться в Altegio, получить ID компании и вставить код на страницу:
<!-- Виджет Altegio через iframe --> <iframe src="https://widget.altegio.com/widget/[COMPANY_ID]/record?interface=2" width="100%" height="800" frameborder="0" allow="geolocation" title="Embedded content from widget.altegio.com"></iframe> <!-- Или попап через JS --> <script src="https://widget.altegio.com/widgetJS.js"></script> <button onclick="AltegioPro.booking.open()">Записаться</button> <script> AltegioPro.init({ company_id: 'COMPANY_ID', lang: 'ru' }); </script> Виджет сразу отображает список услуг, свободные слоты и позволяет клиенту забронировать время. Всё это работает из коробки без дополнительной разработки.
Когда стандартного виджета недостаточно?
Если дизайн сайта не совпадает со стилем виджета, либо требуется многошаговая форма с выбором филиала, сотрудника и услуги в несколько этапов, прямой стандартный виджет не впишется. В таких случаях мы строим кастомный UI поверх Altegio API. Вот пример React-компонента с состоянием шагов:
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, }); // ... многошаговая форма } Такой подход даёт полный контроль над UX и позволяет интегрировать нестандартные бизнес-правила, например, обязательный предоплату или скидки по промокодам.
Altegio API: возможности и ограничения
Altegio API полностью совместимо с YCLIENTS API v2. Аутентификация — Bearer токен, который выдаётся в личном кабинете. Основные методы:
class AltegioPApiClient { 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'); } } Важно: API имеет лимит 10 запросов в секунду. При высоких нагрузках используйте кеширование (Redis/Memcached) и ставьте очередь задач. Также не забывайте про обработку ошибок: 401 при неверном токене, 404 для несуществующих записей, 429 при превышении лимита.
Что даёт кастомная интеграция Altegio?
Кастомная интеграция через API в два раза быстрее обрабатывает запросы, чем стандартный виджет, за счёт асинхронной загрузки данных. Вы получаете полный контроль над формой записи: можно добавлять скидки, подарочные карты, систему лояльности. Например, один из наших клиентов — сеть барбершопов — внедрил многошаговую форму с выбором мастера и услуги, что увеличило конверсию записи на 25%.
Почему стоит автоматизировать уведомления?
Одна из частых проблем — клиенты забывают о записи. Через API Altegio можно настроить автоматические напоминания: SMS за два часа и email за день. Это снижает количество неявок на 30-40%. В кастомной интеграции мы добавляем выбор способа уведомления прямо в форму записи, что ещё удобнее.
Сравнение: виджет vs кастомная интеграция
| Критерий | Стандартный виджет | Кастомная интеграция |
|---|---|---|
| Время запуска | 1 день | 4–6 рабочих дней |
| Дизайн | Ограничен настройками Altegio | Полная свобода вёрстки |
| Функциональность | Базовая запись | Любая логика: скидки, подарочные карты, очереди |
| Стоимость | Низкая (нужен только хостинг) | Средняя или высокая (зависит от сложности) |
| Поддержка | Со стороны Altegio | Мы сопровождаем проект после запуска |
Какие ошибки допускают при интеграции Altegio?
Типичные проблемы и их решения:
| Ошибка | Последствие | Решение |
|---|---|---|
| Неправильный CORS | Запросы с фронтенда блокируются | Проксировать запросы через бэкенд |
| Отсутствие кеширования | Превышение лимита API (10 req/s) | Кешировать списки услуг и сотрудников на Redis |
| Необработанные ошибки | Пустой экран у пользователя | Отображать понятное сообщение об ошибке |
| Игнорирование лимитов | Блокировка ключа API | Внедрить очередь задач и exponential backoff |
Процесс работы над интеграцией
- Аналитика — изучаем бизнес-процессы, определяем, какие данные нужны на сайте.
- Проектирование — выбираем виджет или кастомную схему, согласовываем дизайн.
- Разработка — пишем код, настраиваем API-клиент, тестируем запросы.
- Тестирование — проверяем на реальных сценариях: запись, отмена, напоминания.
- Деплой — загружаем на продакшен, настраиваем мониторинг.
Что входит в работу
- Готовая интеграция (виджет или кастомная форма) на вашем сайте.
- Документация по дальнейшему использованию.
- Одно обучение администратора (20–30 минут).
- Поддержка в течение двух недель после сдачи.
Свяжитесь с нами для оценки вашего проекта. Получите консультацию по интеграции Altegio — подберём оптимальное решение и назовём сроки.