.. _widgetffinst:

Параметры полного виджета онлайн-записи
---------------------------------------

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

Скрипт виджета онлайн-записи
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. hint:: Для добавления виджета, скопируйте и используйте скрипт указанный ниже.

*Скрипт виджета выглядит следующим образом:*

.. code-block::

     <torrow-widget
         id="torrow-widget"
         url="https://web.torrow.net/app/tabs/tab-announcement/service;id=1b5903ed42bf48b428fb31ee7af27866"
         modal="right"
         modal-active="true"
         show-widget-button="true"
     ></torrow-widget>
     <script src="https://cdn-public.torrow.net/widget/torrow-widget.min.js" defer></script>
     

Параметры скрипта
"""""""""""""""""
.. hint:: Для добавления параметра, вставьте значение новой строкой в блок *<torrow-widget* **ВСТАВИТЬ ЗДЕСЬ** *></torrow-widget>*
 
.. table::  Отображение виджета

    +------------------------+-----------------------------------------------+-----------------------+--------------------+
    | Название               | Описание                                      | Параметр              | Значения           |
    +========================+===============================================+=======================+====================+
    | Ссылка на услугу       | В этом поле укажите ссылку на Вашу услугу     | url = "LINK"          | Cсылка на Вашу     |
    |                        | отобразить в модальном окне                   |                       | услугу             |
    +------------------------+-----------------------------------------------+-----------------------+--------------------+
    | Расположение на экране | Определяет положение модального окна на сайте | modal = "center"      | center, left, right|
    +------------------------+-----------------------------------------------+-----------------------+--------------------+
    | Ширина                 | Определяет ширину модального окна             | modal-width = "350px" | Любое значение     |
    +------------------------+-----------------------------------------------+-----------------------+ в пикселях (px)    |
    | Высота                 | Определяет высоту модального окна             | modal-height = "350px"| По умолчанию -     |
    |                        |                                               |                       | адаптируемое под   |
    |                        |                                               |                       | устройство клиента |
    +------------------------+-----------------------------------------------+-----------------------+--------------------+
    | Ссылка на услугу       | Укажите ссылку на услугу которую необходимо   | url = "Ссылка на      | Cсылка на Вашу     |
    |                        | отобразить в модальном окне                   | услугу"               | услугу             |
    +------------------------+-----------------------------------------------+-----------------------+--------------------+
    | Активное модальное окно| При открытии сайта, сразу открывает виджет    | modal-active = "true" | true, false        |
    +------------------------+-----------------------------------------------+-----------------------+--------------------+

.. |точка| image:: media/tochka.png
      :width: 21
      :alt: alternative text

.. note:: 
      1. Чтобы получить ссылку на услугу необходимо открыть страничку Вашей услуги
      2. Открыть контекстное меню |точка|
      3. Нажать "Поделиться"
      4. Нажать "Поделиться" в нижней части экрана
      5. Из появившегося списке выбрать "Ссылка"
    
.. table:: Параметры кнопки

    +------------------------+-----------------------+------------------------+
    | Название               | Параметр              | Значения               |
    +========================+=======================+========================+
    | Стиль кнопки (форма)   | button-style =        | circle (круглая)       |
    |                        | "circle"              | rectangle              |
    |                        |                       | (прямоугольная)        |
    +------------------------+-----------------------+------------------------+
    | Отображение кнопки     | show-widget-button =  | true, false            |
    |                        | "true"                |                        |
    +------------------------+-----------------------+------------------------+
    | Текст кнопки           | button-text =         | Любое текстовое        |
    |                        | "Забронировать"       | значение               |
    +------------------------+-----------------------+------------------------+
    | Размер шрифта          | font-size = "15"      | Любое числовое         |
    +------------------------+-----------------------+ значение               |
    | Размер кнопки          | button-size = "100"   |                        |
    +------------------------+-----------------------+                        |
    | Ширина текста в кнопке | text-button-width =   |                        |
    |                        | "90"                  |                        |
    +------------------------+-----------------------+                        |
    | Тощина шрифта          | font-weight = "400"   |                        |
    +------------------------+-----------------------+                        |
    | Междустрочный интервал | line-height = "15"    |                        |
    +------------------------+-----------------------+------------------------+
    | Расположение по оси Х  | button-x = "right"    | right, left, center    |
    +------------------------+-----------------------+------------------------+
    | Расположение по оси Y  | button-y = "bottom"   | top, bottom, center    |
    +------------------------+-----------------------+------------------------+
    | Цвет кнопки            | button-color = #000   |  Любое                 |
    +------------------------+-----------------------+  HEX                   |
    | Цвет шрифта кнопки     | text-color = #ffffff  |  значение              |
    +------------------------+-----------------------+  (#000000)             |
    | Цвет анимации кнопки   | wave-color = #5F4B8B  |                        |
    +------------------------+-----------------------+------------------------+
    | Включение/отключение   | button-animation =    | true, false            |
    | анимации               | "true"                |                        |
    +------------------------+-----------------------+------------------------+

.. hint:: Если Ваш сайт не адаптируется под мобильную версию, кнопка виджета также будет малых размеров. В таком случае добавьте параметр: **preserve-ratio = "true"**, чтобы кнопка вызова виджета приняла корректные габариты.

.. raw:: html
   
   <torrow-widget
      id="torrow-widget"
      url="https://web.torrow.net/app/tabs/tab-search/service;id=103edf7f8c4affcce3a659502c23a?closeButtonHidden=true&tabBarHidden=true"
      modal="right"
      modal-active="false"
      show-widget-button="true"
      button-text="Заявка эксперту"
      modal-width="550px"
      button-style = "rectangle"
      button-size = "60"
      button-y = "top"
   ></torrow-widget>
   <script src="https://cdn-public.torrow.net/widget/torrow-widget.min.js" defer></script>

.. raw:: html

   <!-- <script src="https://code.jivo.ru/widget/m8kFjF91Tn" async></script> -->