Онмед: запись к врачу прямо на сайте — Medflex в фирменных виджетах на веб-компонентах
Пациент записывается к врачу за четыре шага, не уходя со страницы: виджеты весят 7,5 КБ, а медлительный и не всегда стабильный Medflex прячется за нашим API.
Задача
Интегрировать в существующий сайт медцентра «Онмед» на ProcessWire систему записи на приём Medflex: пациент должен записаться к конкретному врачу прямо со страницы этого врача, не уходя на сторонний сервис.
Почему свои виджеты
Medflex предлагает несколько вариантов интеграции, включая готовые кнопки и собственные виджеты. Мы выбрали свои виджеты поверх API: они дают максимальную гибкость, скорость и удобство для пациентов — запись выглядит частью сайта «Онмед», а не встроенным чужим окном.
Но у такого пути есть слабое место: API Medflex работает нестабильно и порой отвечает с заметной задержкой. Если виджеты будут обращаться к нему напрямую, каждая заминка Medflex станет заминкой на сайте клиники.
Поэтому на фронтенде — нативные веб-компоненты, а между ними и Medflex — промежуточное API на нашем сервере, которое берёт на себя всё общение с Medflex.
Четыре шага
Специализация и день, время, данные пациента — и талон на приём, который можно распечатать или отменить
Нативные веб-компоненты
Два тега — вся запись. <appointment-specialist> показывает специализации врача с ценами, календарь и свободное время, <appointment-form> — форму пациента и талон. Выбор передаётся от одного компонента другому обычными атрибутами, а на страницу врача запись встраивается одной строкой.
Без фреймворка и без Shadow DOM. Компоненты написаны на TypeScript и собираются каждый отдельно: выбор времени весит 4,4 КБ, форма — 3,1 КБ после сжатия. Они рендерятся прямо в разметку страницы, поэтому пользуются стилями сайта и его валидатором форм, а фирменные цвета «Онмед» подхватывают через CSS-переменные.
Запись на странице врача
<!-- страница врача: одна строка, всё остальное компонент делает сам -->
<appointment-specialist doctor_id="1151138"></appointment-specialist>
<!-- после выбора времени компонент сам добавляет форму с выбранным слотом -->
<appointment-form doctor-id="1151138" service-id="…" price="4300"
start-time="2026-09-16 18:30" duration-min="30"></appointment-form>Идентификатор врача в Medflex хранится в карточке врача в ProcessWire.
Промежуточное API
Сайт не ждёт Medflex. Врачи и специализации кэшируются на нашем сервере на 12 часов и отдаются сразу, без обращения к Medflex. Если Medflex не отвечает или отвечает с ошибкой, виджет показывает последние сохранённые данные, а не пустой экран.
Свежее — только там, где нужно. Расписание запрашивается каждый раз заново, чтобы пациент видел действительно свободное время; если Medflex вернул расписание не полностью, виджет покажет то, что есть, и предупредит об этом.
Ключ остаётся на сервере. Браузер не обращается к Medflex напрямую, поэтому ключ доступа не попадает на страницу, а ответы Medflex приводятся к удобному для виджетов виду.
Проверка до отправки. Поля формы проверяются на сервере по тем же правилам ещё до записи, а запись создаётся в Medflex сразу — с талоном на экране и кнопкой отмены.
Ещё кейсы
odnaco.me: магазин лётной экипировки — от RiotJS к веб-компонентам
Каталог и магазин производителя парапланерного снаряжения: комбинезоны на заказ с конфигуратором, корзина, оформление и заказы — на ProcessWire, без готовой платформы. Фронтенд, начатый на RiotJS 3, переписан на нативные веб-компоненты без фреймворка.
testfly.me: полигон, на котором мы обкатываем решения, и издание о парапланерной технике
Независимые тест-драйвы парапланов, подвесок и приборов — и наш собственный сайт, на котором каждое новое решение проверяется на себе, прежде чем попасть в клиентский проект. Отсюда вышли OutputTransformer и StaticPages.
Теплохиммонтаж 3.0: с WordPress на ProcessWire
Третья версия сайта холдинга Теплохиммонтаж: переезд с WordPress на ProcessWire — с контентом, перенесённым со старого сайта, и структурой, в которой почти все сущности связаны между собой.