Установка виджета бронирования для гостей RESTOPLACE на сайт — общий принцип
В этой инструкции вы узнаете, как установить HTML-код виджета бронирования Restoplace на Ваш сайт всего за несколько минут
Рекомендуем устанавливать виджет на сайт, когда уже созданы и заполнены столы, создана схема зала, настроены условия работы и депозиты, оформлен дизайн виджета, а ваши сотрудники обучились работе с книгой резервов Restoplace
Как установить виджет бронирования Restoplace на свой сайт, с плавающей кнопкой
Войдите в административную панель RESTOPLACE, нажмите «виджет для сайта», скопируйте HTML-код виджета
Войдите в административную панель управления Вашего сайта и вставьте скопированный HTML-код перед закрывающем тегом </body> на те страницы Вашего сайта, куда вы хотите подключить систему. Чаще всего (но не всегда) код нужно вставлять в «шаблон» сайта. Код устанавливается точно так же, как и счётчики посещаемости (Google Analytics, LiveInternet, Яндекс. Метрика).
Если всё сделано правильно, на всех страницах вашего сайта появится плавающая кнопка «Забронировать стол» (её стиль и расположение можно настроить в редакторе дизайна виджета), нажав на которую, во всплывающем окне откроется ваш виджет бронирования Restoplace и ваши гости смогут самостоятельно подобрать и забронировать понравившийся столик онлайн.
Инструкции по установке виджета на популярные CMS
Для распространённых систем управления сайтами (CMS) мы подготовили пошаговые инструкции:
- 1С-Битрикс — Установка виджета RESTOPLACE на ваш сайт на CMS 1C-Bitrix
- NetCat — Установка виджета RESTOPLACE на ваш сайт на CMS NetCat
- WordPress — Установка виджета RESTOPLACE на ваш сайт на CMS WordPress
- MODx — Установка виджета RESTOPLACE на ваш сайт на CMS MODx
- Tilda — Установка виджета RESTOPLACE на ваш сайт на конструкторе Tilda
- InSales — Установка виджета RESTOPLACE на ваш сайт на CMS InSales
- UMI.CMS — Установка виджета RESTOPLACE на ваш сайт на UMI.CMS
Открытие виджета по своей кнопке на сайте
Виджет бронирования Restoplace, так же может открываться при клике по любой кнопке на вашем сайте:
1️⃣ СПОСОБ № 1 (ОТКРЫТИЕ ВИДЖЕТА В НОВОЙ ВКЛАДКЕ)
Просто скопировать ссылку вашего виджета Restoplace и установить на вашей кнопке. Виджет будет открываться в новой вкладке. UTM-метки передаваться не будут
Пример: ЗАБРОНИРОВАТЬ СТОЛИК — Нажмите на кнопку, откроется пример виджета Restoplace в новой вкладке
2️⃣ СПОСОБ № 2 (ОТКРЫТИЕ ВИДЖЕТА В ВСПЛЫВАЮЩЕМ ОКНЕ)
- Установить скрипт виджета Restoplace на вашем сайте. Инструкция выше (см. раздел "Как установить виджет бронирования Restoplace на свой сайт, с плавающей кнопкой")
- Добавьте класс «restoplace-click-open» любым кнопкам на вашем сайте, при клике на которые должен открываться виджет бронирования Restoplace
- Чтобы скрыть нашу плавающую кнопку, вам нужно прописать CSS стили:
#restoplace-wrapper-btn {
display: none;
}
Пример: Кнопка с классом restoplace-click-open — Нажмите на кнопку, откроется пример виджета Restoplace в всплывающем окне
Для способа № 2 создайте кнопку с классом restoplace-click-open:
<button class="restoplace-click-open">ЗАБРОНИРОВАТЬ СТОЛИК</button>
Как вставить виджет бронирования в тело сайта
Виджет Restoplace можно встроить прямо в тело сайта, следуйте инструкции:
- Перейдите в книгу резервов адреса — нажмите на адрес на главном экране админки Restoplace
- В правом верхнем углу нажмите кнопку «Настройки», откроется окно настроек адреса
- В открывшейся вкладке «Информация», в самом низу, скопируйте «Хэш адреса»
- Замените хэш адреса выделенный зелёным на скопированный, в этом Html-коде
<iframe
src="https://www.restoplace.ws/?address=daf488cc967e0a5d37f6"
frameborder="0"
style="width: 100%; height: 700px;"
></iframe>
- Установите этот Html-код c вашим хэш-адресом на свой сайт, в любой блок в теле сайта
Пример виджета Restoplace, установленного в тело сайта (можно кликать) ⤵
Важная информация
Если у Вас возникают трудности с установкой — мы рекомендуем обратиться к специалисту, который сможет грамотно и подробно объяснить необходимые действия или самостоятельно установить код на сайт.
Для установки Restoplace на другой сайт не надо регистрироваться заново — достаточно установить этот же код на другой сайт.
После внесения каких либо изменений в административной панели Restoplace (изменение столов, схемы зала, дизайна виджета) НЕ нужно обновлять код на сайте, изменения применятся автоматически.
Не забудьте включить адреса (после добавление столов и всех настроек) чтобы они появились в установленном виджете
Дополнительные материалы
Депозиты, предоплата. Как включить и настроить размеры депозитов
Где включаются и настраиваются депозиты? Как задать размеры депозитов и добавить исключения в размеры депозитов?
Дизайн виджета – как оформить дизайн виджета?
Как изменить цветовое оформление виджета для гостей, который устанавливается на вашем сайте и в соцсетях
Установка виджета бронирования столов в группе VK
Пошаговое руководство по установке виджета в группу вашего заведения в Вконтакте
Установка виджета бронирования столов в Inst-m
Пошаговое руководство по установке виджета бронирования RESTOPLACE в Inst-m вашего заведения
Инструкция по синхронизации UDS c Restoplace
Как произвести интеграцию UDS с Restoplace. Как настроить UDS
1С-Битрикс – установка кода виджета на сайт
Пошаговое руководство по установке виджета бронирования RESTOPLACE на ваш сайт на CMS 1C-Bitrix
NetCat – установка кода виджета на сайт
Пошаговое руководство по установке виджета бронирования RESTOPLACE на ваш сайт на CMS Netcat
UMI.CMS – установка кода виджета на сайт
Пошаговое руководство по установке виджета бронирования RESTOPLACE на ваш сайт на UMI.CMS
WordPress – установка кода виджета на сайт
Пошаговое руководство по установке виджета бронирования RESTOPLACE на ваш сайт на CMS WordPress
MODx – установка кода виджета на сайт
Пошаговое руководство по установке виджета бронирования RESTOPLACE на ваш сайт на CMS MODx
Tilda – установка кода виджета на сайт
Пошаговое руководство по установке виджета бронирования RESTOPLACE на ваш сайт на Tilda
InSales – установка кода виджета на сайт
Пошаговое руководство по установке виджета бронирования RESTOPLACE на ваш сайт на InSales