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

Подсказка

Упрощенный виджет онлайн-записи — это iframe виджет. Используя этот вид виджета, клиент может вбырать удобное ему время записи и/или оставить свою контактную информацию.

Основные параметры

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

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

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

Подсказка

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

Параметры кнопки виджета

Название

Параметр

Значения

Стиль кнопки (форма)

button-style = «circle»

circle (круглая) rectangle (прямоугольная)

Отображение кнопки

show-widget-button = «true»

true, false

Текст кнопки

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 значение (#000000)

Цвет шрифта кнопки

text-color = #ffffff

Цвет анимации кнопки

wave-color = #5F4B8B

Включение/отключение анимации

button-animation = «true»

true, false

Подсказка

Если Ваш сайт не адаптируется под мобильную версию, кнопка виджета также будет малых размеров. В таком случае добавьте параметр: 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>

Url

Признак отображения чекбокса знакомства с политикой

checkAgreementCheckboxVisible= true

true, false

Параметры бронирования с предзаданным ресурсом группы

createOrderResourceParams= <groupId>_<resourceId>_<amount>

Строка

Стили оформления виджета записи

customStylesUrl=<Url к CSS>

URL к файлу с CSS

Настройка текста политики конфиденциальности:

Подсказка

В конец ссылки на виджет добавить “?”, после добавить необходимые параметры.

Параметры разделять знаком: “&”

Параметры Текста:

agreementText - Текст поля “Политика и конфиденциальность”. Содержит текст поля и слово(текст) по которому клиент переходит к документу. Вводить текст через пробел. В {{ }} (фигурных скобках) указать кликабельный текст, который будет содержать ссылку.
agreementUrl - ссылка на документ

Пример: agreementText=Даю согласие Torrow Technologies на обработку персональных данных в соответствии с {{политикой}}

Отображенение кнопки согласия с условиями:

checkAgreementCheckboxVisible=true Если параметр отсутствует или он равен “false” то, кнопка «Записаться» сразу активна.

Настройки автозаполнения полей контактной информации

Параметр prefilledFields=<Имя поля>_<Предзаполняемое значение>:

Пример: prefilledFields=MainEmail_asdsad@asd.asd

Подсказка

Параметры контактной информации, имя которых начинается на * , не показываются пользователю, но могут иметь предопределенные значения. Например имя: *orderId

Параметры бронирования услуги с учетом предопределенных ресурсов

Параметр createOrderResourceParams=<groupId>_<resourceId>_<amount>

Пример: createOrderResourceParams=645dfa391fcf4c996b0f8114_aae6303f1c9faa8aa1fcf4c996b0f819f_1

Применение пользовательских стилей к виджету онлайн записи.

Параметр customStylesUrl=<Url>

Пример: customStylesUrl=https://pastebin.com/raw/3D6rd4ec

Пример CSS файла:

@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