.. _widgetEFinst: Параметры упрощенного виджета онлайн-записи ------------------------------------------- .. hint:: Упрощенный виджет онлайн-записи — это iframe виджет. Используя этот вид виджета, клиент может вбырать удобное ему время записи и/или оставить свою контактную информацию. Основные параметры ~~~~~~~~~~~~~~~~~~ Сейчас у Вас есть возможность редактировать **время отображаемое в ячейках**, **поля контактной информации**, **изображение услуги**. * Для настройки ячеек времени — перейдите в настройки услуги и установите подходящее для Вас выравнивание времени. * Для настроек полей контактной информации — перейдите в настройки услуги и задайте необходимые поля контактной информации. * Для настроек изображения услуги — перейдите в настройки услуги и задайте картинку услуги. *Также у виджета есть возможность отображать количество свободных мест рядом с ячейками времени, для этого просто задайте этот параметр в настройках услуги* .. hint:: Также Вы можете добавить дополнительные параметры в ссылке виджета, чтобы отображать кличество доступных слотов времени или всегда использовать определенный язык отображения виджета. Для этого воспользуйтесь :ref:`инструкцией `. Параметры кнопки виджета ~~~~~~~~~~~~~~~~~~~~~~~~ +------------------------+-----------------------+------------------------+ | Название | Параметр | Значения | +========================+=======================+========================+ | Стиль кнопки (форма) | 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"**, чтобы кнопка вызова виджета приняла корректные габариты. Параметры упрощенного виджета ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +------------------------+--------------------------------+------------------------+ | Название | Параметр | Значения | +========================+================================+========================+ | Показывать число | showAvailableSlots= | true | | свободных слотов | true | false | | | | | +------------------------+--------------------------------+------------------------+ | Часовой пояс | timezone= | Europe/Moscow | | | Europe/Moscow | | +------------------------+--------------------------------+------------------------+ | Язык и форматирование | culture=ru-RU | ru-RU | | | | en-En | +------------------------+--------------------------------+------------------------+ | Ссылка переадресации | redirectUrl=<ссылка> | Правильный Url | | после записи на услугу | | | +------------------------+--------------------------------+------------------------+ | Предзаполненные | prefilledFields= | Форматированная строка | | параметры записи | <имя поля>_<значение> | | | | | | +------------------------+--------------------------------+------------------------+ | Текст политики | agreementText=<текст> | Строка | | конфиденциальности | | | +------------------------+--------------------------------+------------------------+ | Ссылка на документ с | agreementUrl= | Url | | политикой | | | | конфиденциальности | | | +------------------------+--------------------------------+------------------------+ | Признак отображения | checkAgreementCheckboxVisible= | true, false | | чекбокса знакомства | true | | | с политикой | | | +------------------------+--------------------------------+------------------------+ | Параметры бронирования | createOrderResourceParams= | Строка | | с предзаданным | __| | | ресурсом группы | | | +------------------------+--------------------------------+------------------------+ | Стили оформления | customStylesUrl= | URL к файлу с CSS | | виджета записи | | | | | | | +------------------------+--------------------------------+------------------------+ Настройка текста **политики конфиденциальности**: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. hint:: * В конец ссылки на виджет добавить “?”, после добавить необходимые параметры. * Параметры разделять знаком: “&” * **Параметры Текста:** 1. **agreementText** - Текст поля “Политика и конфиденциальность”. Содержит текст поля и слово(текст) по которому клиент переходит к документу. Вводить текст через пробел. В **{{ }}** (фигурных скобках) указать кликабельный текст, который будет содержать ссылку. 2. **agreementUrl** - ссылка на документ *Пример:* agreementText=Даю согласие Torrow Technologies на обработку персональных данных в соответствии с {{политикой}} * **Отображенение кнопки согласия с условиями**: **checkAgreementCheckboxVisible=true** Если параметр отсутствует или он равен “false” то, кнопка «Записаться» сразу активна. * **Настройки автозаполнения полей контактной информации** Параметр **prefilledFields=<Имя поля>_<Предзаполняемое значение>**: *Пример: prefilledFields=MainEmail_asdsad@asd.asd* .. hint:: Параметры контактной информации, имя которых начинается на * , не показываются пользователю, но могут иметь предопределенные значения. Например имя: ``*orderId`` * **Параметры бронирования услуги с учетом предопределенных ресурсов** Параметр **createOrderResourceParams=__** *Пример:* createOrderResourceParams=645dfa391fcf4c996b0f8114_aae6303f1c9faa8aa1fcf4c996b0f819f_1 * **Применение пользовательских стилей к виджету онлайн записи.** Параметр **customStylesUrl=** *Пример:* customStylesUrl=https://pastebin.com/raw/3D6rd4ec Пример CSS файла: .. code-block:: @font-face { font-family: 'Tangerine'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/tangerine/v17/IurY6Y5j_oScZZow4VOxCZZMprNA4A.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } body { font-family: 'Tangerine', serif !important; text-shadow: 4px 4px 4px #aaa !important; } .border-torrowpurple-900 { --tw-border-opacity: 1; border-color: rgb(95 255 139 / var(--tw-border-opacity)); } .bg-torrowpurple-900 { --tw-bg-opacity: 1; background-color: rgb(95 255 139 / var(--tw-bg-opacity)); } .fill-torrowpurple-900 { fill: #5f4a8b; } .text-torrowpurple-900 { --tw-text-opacity: 1; color: rgb(95 255 139 / var(--tw-text-opacity)); } .hover\:bg-torrowpurple-700:hover { --tw-bg-opacity: 1; background-color: rgb(127 255 162 / var(--tw-bg-opacity)); } .hover\:bg-torrowpurple-900:hover { --tw-bg-opacity: 1; background-color: rgb(95 255 139 / var(--tw-bg-opacity)); } .focus\:ring-torrowpurple-300:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(191 255 208 / var(--tw-ring-opacity)); } .dark .dark\:bg-torrowpurple-600 { --tw-bg-opacity: 1; background-color: rgb(143 255 173 / var(--tw-bg-opacity)); } .dark .dark\:hover\:bg-torrowpurple-700:hover { --tw-bg-opacity: 1; background-color: rgb(127 255 162 / var(--tw-bg-opacity)); } .dark .dark\:focus\:ring-torrowpurple-800:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(111 255 150 / var(--tw-ring-opacity)); } .bg-pink-400 { --tw-bg-opacity: 1; background-color: rgb(244 255 182 / var(--tw-bg-opacity)); } .bg-pink-500 { --tw-bg-opacity: 1; background-color: rgb(236 255 153 / var(--tw-bg-opacity)); } Пример ссылки на виджет ~~~~~~~~~~~~~~~~~~~~~~~~ https://embed.torrow.net/service/103edf7f8c4affcce3a659502c23a/booking?agreementText=Даю согласие Torrow Technologies на обработку персональных данных в соответствии с {{политикой}}&agreementUrl=https://info.torrow.net/useragreement&prefilledFields=Имя_Какое-то имя&prefilledFields=MainEmail_asdsad@asd.asd&checkAgreementCheckboxVisible=true .. raw:: html .. raw:: html