Установка полного виджета онлайн-записи

Для работы с виджетом Вам понадобится ссылка на виджет. Для её получения произведите следующие действия:

Откройте контекстное меню своей услуги
Нажмите «Поделиться»
Выберите пункт «Ссылка»
Готово! Ссылка скопирована в буфер обмена

За подробностями о параметрах полного виджета обратитесь к страничке: Параметры полного виджета

Виджет встроен в сайт

Используйте тег <iframe>.
Внутри тега введите параметры желаемого размера виджета. К примеру, используйте атрибуты height и width.
Добавьте атрибут src, значением которого будет ссылка на Вашу услугу.

Для более подробной работы с iframe обратитесь к руководству по html.

Пример:

<iframe>
height="500px" width="250px" src="https://web.torrow.net/service/103edf7f8c4affcce3a659502c23a/booking"
</iframe>

Виджет открывается по кнопке

Как это выглядит?

Виджет может открываться 2 видами кнопок:

Анимированная кнопка Torrow для записи

Используйте блок HTML-кода
Введите скрипт виджета (скрипт можно найти на странице: Параметры полного виджета)
Убедитесь, что параметр show-widget-button = true и в url: вставлена ссылка правильная ссылка
Готово!

Пример:

<torrow-widget
    id="torrow-widget"
    url="https://torrow.net/service/103edf7f8c4affcce3a659502c23a/booking"
    modal="right"
    modal-active="false"
    show-widget-button="true"
></torrow-widget>
<script src="https://cdn.jsdelivr.net/gh/torrowtechnologies/torrow-widget@1/dist/torrow-widget.min.js" defer></script>

Существующая кнопка на сайте

Реализация на примере работы с Tilda:

Добавьте изображение кнопки
Задайте кнопке CSS Class Name (к примеру, send-appeal)
Добавьте блок HTML-код
Введите скрипт (скрипт можно найти на странице: Параметры полного виджета)
Убедитесь, что show-widget-button = false и в url: вставлена ссылка
Добавьте следующий скрипт:

<script>
    var buttonCollection =  document.getElementsByClassName('send-appeal')
    if(buttonCollection.length) {
        buttonCollection[0].addEventListener('click', event =>
        {document.querySelector('#torrow-widget').setAttribute('modal-active', 'true')})
    }
</script>

Готово!

Пример:

<torrow-widget
    id="torrow-widget"
    url="https://torrow.net/service/103edf7f8c4affcce3a659502c23a/booking"
    modal="right"
    modal-active="false"
    show-widget-button="false"
></torrow-widget>
<script>
   var buttonCollection =  document.getElementsByClassName('send-appeal')
   if(buttonCollection.length) {
       buttonCollection[0].addEventListener('click', event =>
       {document.querySelector('#torrow-widget').setAttribute('modal-active', 'true')})
   }
</script>
<script src="https://cdn.jsdelivr.net/gh/torrowtechnologies/torrow-widget@1/dist/torrow-widget.min.js" defer></script>

Примечание

Обратите внимание, где указано название CSS Class Name: send-appeal внутри скрипта! В это место необходимо вводить заданное Вами значение.