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

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

Откройте контекстное меню своей услуги

Нажмите «Поделиться»

Выберите пункт «Виджет онлайн-записи»

Готово! Ссылка скопирована в буфер обмена

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

Как это выглядит можно узнать тут.

Используйте тег <iframe>

Внутри тега введите параметры желаемого размера виджета. К примеру, используйте атрибуты height и width (стандартно height = 500px)

Добавьте атрибут src, значением которого будет ссылка на Вашу услугу

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

Подсказка

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

Если Вы хотите, чтобы виджет всегда отображался на русском языке, необходимо добавить параметр culture=ru-RU. Тогда ссылка будет выглядеть следующим образом: https://embed.torrow.net/service/103ede4333d697c6a1c059057ca52/booking?culture=ru-RU

Чтобы отобразить виджет на английском языке используйте параметр culture=en-EN.

Если Вы хотите, чтобы рядом со слотом выбора времени находилось доступное количество мест для записи, то необходимо добавить в ссылку параметр showAvailableSlots=true.

Пример ссылки:

https://embed.torrow.net/service/103ede4333d697c6a1c059057ca52/booking?culture=ru-RU&showAvailableSlots=true

Пример кода встроенного виджета:

<iframe>
height="500px" src="https://embed.torrow.net/service/103edf7f8c4affcce3a659502c23a/booking?culture=ru-RU&showAvailableSlots=true"
</iframe>

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

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

Как это выглядит можно узнать тут.

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

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

Подсказка

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

Пример:

<torrow-widget
    id="torrow-widget"
    url="https://embed.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://embed.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 внутри скрипта! В это место необходимо вводить заданное Вами значение.