Встроить запись на свой сайт

Клиенты записываются (и оплачивают), не уходя с вашего сайта: форма записи ОКНА встраиваются виджетом. Готовый код — в Настройки → Страница записи (туда же ведёт ссылка «Встроить на свой сайт →» из блока «Страница записи» на Главной): три варианта с кнопкой «Копировать».

Куда вставлять код

Tilda — блок «Другое» → T123 HTML-код.
WordPress — блок Custom HTML (или «Произвольный HTML»).
WIX, Craftum и др. — любой блок «HTML-код» / «Embed».
Свой сайт — прямо в HTML страницы.

Вариант 1. Попап по кнопке (рекомендуем, особенно для мобильных)

<script src="https://okna.one/embed.js" async></script>
<button data-okna-booking-popup="ВАШ_USERNAME">Записаться</button>

Кнопку стилизуйте как угодно (или повесьте атрибут data-okna-booking-popup="ВАШ_USERNAME" на любой свой элемент) — по клику запись откроется поверх сайта во весь размер, закрывается крестиком или Esc. На телефонах это самый удобный вариант: форма не зажата в узкой колонке сайта.

Вариант 2. Виджет прямо на странице

<script src="https://okna.one/embed.js" async></script>
<div data-okna-booking="ВАШ_USERNAME"></div>

Форма записи появляется прямо в странице, высота подстраивается сама — никаких внутренних прокруток и обрезанных кнопок. Виджет компактный: без дублирующей шапки-профиля (представление специалиста — на вашем сайте).

Тема виджета

По умолчанию виджет светлый. Если у вас тёмный сайт — добавьте атрибут:

<div data-okna-booking="ВАШ_USERNAME" data-okna-theme="dark"></div>

Значения: light (по умолчанию) · dark · auto (тема устройства посетителя). Работает и на кнопке-попапе.

Выбор услуги

Клиент может нажать услугу в списке «Услуги и цены» — виджет покажет окна под неё и сразу подставит услугу в форму записи.

Вариант 3. Просто iframe

Если конструктор не разрешает скрипты:

<iframe
  src="https://okna.one/book/ВАШ_USERNAME?embed=1"
  style="width:100%;height:900px;border:0"
  loading="lazy"
  title="Запись на сессию"
></iframe>

Высота фиксированная (подберите под свой сайт) — при длинном списке окон внутри появится прокрутка.

Как работает оплата

Сама форма оплаты (ЮMoney, Prodamus и др.) всегда открывается в новой вкладке — таковы требования платёжных систем (безопасность и 3-D Secure не работают внутри встроенных рамок). Пока клиент платит, виджет ждёт и, как только платёж пройдёт, сам показывает «Оплата прошла успешно» — клиент возвращается на ваш сайт уже с подтверждением.

«Записаться без оплаты» происходит целиком внутри виджета.

Частые вопросы

Нужно ли что-то включать в ОКНА? Нет. Достаточно username и открытых окон для записи — виджет показывает то же, что и ваша страница записи.

У меня центр, а не соло-практика. В поле атрибута подставьте «слаг-центра/username» — готовый код с нужным значением уже собран в разделе Настройки → «Страница записи».

Виджет не появился. Проверьте, что вставили обе строки (script + div) и что конструктор опубликовал страницу (в редакторах скрипты часто отключены до публикации).

Можно и виджет, и попап на одной странице? Да, скрипт достаточно подключить один раз — элементов с атрибутами может быть сколько угодно.