Первый шаг записи в виджете: выбор услуги

Запись клиентов прямо на вашем сайте

Кнопка «Записаться» на вашем сайте открывает окно записи поверх страницы. Клиент выбирает услугу и не уходит с сайта
Это живой пример на демонстрационном мастере, настоящие заявки там оставлять не нужно.
Второй шаг записи в виджете: выбор даты и времени

Просто подключить

Одна строка кода на странице сайта, программист не нужен. Клиент выбирает дату и время, а расписание берётся из приложения

Чем удобен виджет

Вы продолжаете работать со своим сайтом, а запись клиентов берёт на себя приложение.
Клиент остаётся на вашем сайте

Клиент остаётся на вашем сайте

Окно записи открывается поверх страницы. Человека не нужно переводить на другой адрес, и он не теряется по дороге.
Расписание то же, что в приложении

Расписание то же, что в приложении

Услуги, рабочие часы, адреса и мастера берутся из приложения. Занятое время не предлагается, ничего не нужно дублировать.
Одна строка вместо разработки

Одна строка вместо разработки

Достаточно вставить короткий код. Программист не нужен, а обновления виджета приходят сами, без правок на сайте.

Как это выглядит у клиента

На компьютере запись открывается окном поверх сайта, на телефоне занимает весь экран. Оформление подстраивается под цвет, который вы выбрали для своей страницы записи.
Виджет записи на компьютере: выбор услуги
На компьютере: окно поверх страницы
Виджет записи на телефоне: выбор даты
На телефоне: во весь экран

Как подключить за три шага

Всё занимает несколько минут. Менять сайт целиком не нужно.
1

Включите онлайн-запись

В приложении откройте настройки онлайн-записи и зарегистрируйте адрес своей страницы. Виджет работает с этим адресом.
2

Скопируйте код

Соберите код ниже: впишите свой адрес и при желании выберите цвет и подпись кнопки. В новой версии приложения тот же код копируется одним нажатием в настройках онлайн-записи.
3

Вставьте на сайт

Добавьте код на страницу прямо перед закрывающим тегом </body>. Откройте сайт: в углу появится кнопка «Записаться».

Соберите свой код

Впишите адрес страницы записи. Остальное по желанию.
Важно: адрес «ваш-адрес» сначала нужно зарегистрировать в приложении, в настройках онлайн-записи. Пока адрес не зарегистрирован, окно записи на сайте не откроется.
<script src="https://clients-finances.pro/booking-widget.js" data-slug="ваш-адрес" data-color="#006688" async></script>
Замените «ваш-адрес» на адрес, который вы зарегистрировали в приложении, или впишите его выше.

Куда вставить код

Нужно место, куда сайт позволяет добавить собственный HTML или JavaScript. Вот как это делается в популярных системах.
  • Tilda
    1. Откройте страницу и добавьте блок «T123 HTML-код» (раздел «Другое»).
    2. Вставьте код в блок и опубликуйте страницу.
    3. Чтобы кнопка была на всех страницах сразу, откройте «Настройки сайта», затем «Ещё», затем «HTML-код для вставки внутрь BODY» и вставьте код туда.
  • WordPress
    1. Самый простой способ: поставьте плагин для добавления кода, например «WPCode» или «Insert Headers and Footers».
    2. В настройках плагина найдите поле «Footer» (подвал) и вставьте код туда. Он появится на всех страницах.
    3. Если вы работаете с темой напрямую, вставьте код в файл footer.php перед </body>.
  • Wix
    1. Откройте панель управления сайтом, раздел «Настройки», затем «Пользовательский код».
    2. Нажмите «Добавить код», вставьте его, выберите место размещения «Body, конец» и применить ко всем страницам.
    3. Для работы нужен тариф Wix с подключённым доменом.
  • Joomla
    1. Откройте файл index.php вашего шаблона и вставьте код перед закрывающим </body>.
    2. Либо создайте модуль «Пользовательский код» (Custom) в позиции подвала, отключите в нём визуальный редактор и вставьте код в режиме HTML.
  • Свой сайт (HTML)
    1. Откройте файл страницы (или общий шаблон подвала, если он у вас есть) и вставьте код перед </body>.
    2. Сохраните файл и загрузите на хостинг. Если у вас единый шаблон, достаточно одного места для всех страниц.
  • Taplink, Link-in-bio и другие визитки
    1. В таких сервисах чаще всего нельзя добавить собственный JavaScript, поэтому виджет там не заработает.
    2. Используйте обычную ссылку на вашу страницу записи: она открывает то же расписание.

Настройки под ваш сайт

Внешний вид и поведение виджета меняются атрибутами в той же строке кода.

Подпись и цвет кнопки

Подпись задаёт data-text, цвет data-color в формате #rrggbb. Цвет текста на кнопке подбирается сам.
<script src="https://clients-finances.pro/booking-widget.js"
        data-slug="ваш-адрес"
        data-text="Записаться на приём"
        data-color="#e91e63" async></script>

Кнопка слева

По умолчанию кнопка в правом нижнем углу. Если там чат или другая кнопка, переставьте её налево.
<script src="https://clients-finances.pro/booking-widget.js"
        data-slug="ваш-адрес"
        data-position="left" async></script>

Своя кнопка на странице

Отключите плавающую кнопку и откройте запись любой своей кнопкой или ссылкой. Подойдёт атрибут data-cf-booking или ссылка на #cf-booking.
<script src="https://clients-finances.pro/booking-widget.js"
        data-slug="ваш-адрес"
        data-button="false" async></script>

<button data-cf-booking>Записаться онлайн</button>
<a href="#cf-booking">Или ссылка</a>

Форма прямо на странице

Вместо окна запись можно встроить в страницу: например, в раздел «Контакты». Высота подстраивается сама.
<div id="booking"></div>
<script src="https://clients-finances.pro/booking-widget.js"
        data-slug="ваш-адрес"
        data-mode="inline"
        data-target="#booking"></script>

Все атрибуты

АтрибутПо умолчаниюЧто делает
data-slugобязателенАдрес вашей страницы записи, например anna-nails из clients-finances.pro/book/anna-nails
data-text«Записаться»Подпись плавающей кнопки
data-color#007affЦвет кнопки в формате #rrggbb
data-positionrightСторона для плавающей кнопки: right или left
data-buttonпоказанаЗначение false скрывает плавающую кнопку
data-modemodalmodal: окно поверх страницы. inline: форма прямо в странице
data-targetпосле скриптаДля inline: CSS-селектор контейнера, куда вставить форму
Окно можно открывать и закрывать из своего кода: ClientsFinancesBooking.open() и ClientsFinancesBooking.close().

Что происходит, когда клиент нажимает кнопку

Тот же путь записи, что на вашей персональной странице, только без ухода с сайта.
1

Нажимает кнопку

Поверх вашего сайта открывается окно записи. Страница под ним остаётся на месте.
2

Выбирает услугу, дату и время

Если у вас несколько мастеров или адресов, он выберет и их. Занятое время не предлагается.
3

Оставляет телефон

Новый клиент отвечает на вопросы анкеты, постоянный подтверждает запись одним нажатием.
4

Вы подтверждаете заявку

Заявка приходит на почту и в чат-боты со ссылками «Подтвердить» и «Отклонить».

Вопросы и ответы

Если не нашли ответ, просто напишите мне.

Подключите запись на свой сайт

Скачайте приложение, включите онлайн-запись и добавьте на сайт кнопку «Записаться». Если нужна помощь с подключением, напишите мне.

Google Play

Скачать в Google Play

App Store

Скачать в App Store

RuStore

Скачать в RuStore

Для компьютера

Версии для macOS и Windows без магазина приложений
Скачать для ПК