Встраиваемый виджет

Виджет бронирования — это плавающая кнопка, которую можно добавить на ваш сайт. При нажатии она открывает интерфейс бронирования прямо на вашей странице — без перенаправлений, без новых вкладок, без путаницы. Клиенты могут посмотреть услуги, выбрать время и записаться, не покидая ваш сайт.

Выбор компании

Если вы управляете несколькими компаниями, используйте выпадающий список вверху страницы, чтобы выбрать, к какой компании подключить виджет. Предпросмотр и код для встраивания обновятся автоматически.

Настройка внешнего вида

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

Акцентный цвет

Выберите из 8 предустановленных цветов или подберите свой с помощью цветового колеса. Выбранный hex-код (например, #0050e7) отображается рядом, чтобы вы могли точно совпасть с фирменными цветами.

Акцентный цвет применяется к плавающей кнопке и ключевым элементам внутри интерфейса бронирования.

Позиция виджета

Выберите, в каком углу экрана должна появляться плавающая кнопка:

• Справа — правый нижний угол экрана (по умолчанию, и так делает большинство сайтов)
• Слева — левый нижний угол экрана

Выбирайте ту сторону, где кнопка не будет пересекаться с другими элементами вашего сайта — чатами поддержки, баннерами с cookie и прочими обитателями нижних углов.

Предварительный просмотр

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

Получение кода

Когда настройки вас устраивают, система генерирует HTML-тег <script> со всеми параметрами. Код для встраивания включает:

• ID вашей компании
• Выбранный акцентный цвет
• Позицию кнопки (слева или справа)
• Язык интерфейса

Вот как выглядит код для вставки:

<script
  src="https://cdn.wantvisit.com/widget.js"
  data-company-id="id-вашей-компании"
  data-color="#0050e7"
  data-position="right"
  data-lang="en">
</script>

Нажмите кнопку Копировать, чтобы скопировать код — выделять вручную не нужно.

Установка на сайт

Вставьте скопированный код в HTML вашего сайта прямо перед закрывающим тегом </body>. Всё. Виджет появится автоматически, когда посетители загрузят страницу.

Если вы используете конструктор сайтов (Tilda, Wix, WordPress и т.п.), поищите опцию «Добавить HTML-код» или «Вставить скрипт». У большинства конструкторов это есть в настройках или в виде отдельного блока.

Проверка

После добавления кода откройте ваш сайт в браузере и найдите плавающую кнопку в выбранном углу. Нажмите на неё и пройдите весь процесс бронирования — выберите услугу, время, пройдите все шаги. Если что-то выглядит не так, вернитесь в админ-панель и подкорректируйте настройки.

TIP

Выберите акцентный цвет, который сочетается с дизайном вашего сайта. Виджет должен ощущаться как естественная часть страницы, а не как неожиданный гость из другого измерения.