Форма для сбора данных
data-widget-user-form - отображать форму для сбора информации. Ниже приведен основной шаблон настройки.
message - текст сообщения, предваряющего появление формы
required - в форме обязательно необходимо нажать Отправить, перед тем как появится возможность написать в виджет если установлено true, иначе форму можно проигнорировать и начать переписку
submitButton - поле настройки кнопки Отправить, состоит из полей:
fields - блок со списком полей для сбора информации, для каждого поля необходимо указать следующие параметры:
name - название переменной, в которую будет передана введенная в данном поле информация, если указать senderFullName, senderEmail или senderPhone то значения будут переданы в системные поля клиента ФИО, почта и телефон соответственно
label - название поля, отображается на форме в виджете
rules - правила заполнения поля, которые состоят из:
required - поле обязательно должно быть заполнено для отправки формы если установлено true, иначе данное поле можно оставить пустым
message - сообщение, которое выведет форма, если при отправке оставить обязательное поле пустым
type - тип поля, для последующей проверки корректности заполнения, возможны варианты email, url, date, integer
message - сообщение при введенном в поле некорректном значении
Code Block |
---|
|
data-widget-user-form='{
"message": "Представьтесь, пожалуйста.",
"required": true,
"submitButton": {
"text": "Отправить"
},
"fields": [
{
"name": "senderFullName",
"label": "Ф.И.О.",
"rules": [
{"required": true, "message": "Пожалуйста, укажите Ф.И.О."}
]
},
{
"name": "senderEmail",
"label": "Email",
"rules": [
{"required": false, "message": "Укажите почту, пожалуйста"},
{"type": "email", "message": "Указан некорректный почтовый адрес."}
]
}
]
}' |
Поле с выпадающим списком
После ввода первого символа автоматически срабатывает фильтрация и оставляет только те значения, в которых есть введенный символ.
minSearch - кол-во введенных символом, после которого будет открыт список всех найденных значений (0 - открывать сразу при клике на поле).
Code Block |
---|
data-widget-user-form='{
"message": "Выберите значение",
"required": true,
"submitButton": {
"text": "Отправить"
},
"fields": [
{
"name": "Значение",
"minSearch": 0,
"type": "select",
"options": [
"Значение 1",
"Значение 2",
"Значение Х"
],
"label": "Список",
"rules": [
{
"required": true,
"message": "Пожалуйста, укажите значение."
}
]
}
]
}' |
Управление именем и иконкой бота
data-widget-bot-name - отображаемое имя бота, если параметр не указан, то его содержимое заменяет собой имя, указанное в настройке Имя оператора в UI настроек виджета.
data-widget-bot-icon - иконка бота в замен стандартной, если параметр указан, то сообщения бота будут сопровождаться данной иконкой, если параметр не указан - будет использована иконка по-умолчанию
Code Block |
---|
data-widget-bot-name = "Автоответчик"
data-widget-bot-icon = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Robot-icon.png" |
Управление именем и иконкой оператора
data-widget-operator-name - отображаемое имя оператора, возможные варианты:
"true" - отображаемое имя будет взято из настроек пользователя,
"false" - отображаемое имя оператора будет взято из настройки Имя оператора в UI настроек виджета
"произвольное имя" - отображаемое имя оператора будет взято из указанной строки
если поле не указано - отображаемое имя оператора будет взято из настройки Имя оператора в UI настроек виджета
data-widget-operator-icon - иконка оператора в замен стандартной, если параметр указан, то сообщения оператора будут сопровождаться данной иконкой, если параметр не указан - будет использована иконка по-умолчанию
Code Block |
---|
data-widget-operator-name = "true"
data-widget-operator-icon = "https://cdn.pixabay.com/photo/2014/04/02/10/14/support-303213_960_720.png" |
Управление виджетом из кода страницы
data-widget-api-ns - наименование объекта виджета.
Code Block |
---|
|
data-widget-api-ns = "autofaq" |
Доступные методы:
autofaq.open() - развернуть виджет
autofaq.close() - свернуть виджет
autofaq.sendMessage({text: "Привет"}) - отправить сообщение от лица пользователя
autofaq.logout() - сбросить текущего пользователь с историей переписки
Перед использованием метода необходимо дождаться инициализации виджета на странице.
Пример кода для ожидания:
Code Block |
---|
|
let intervalId = setInterval(() => {
if (window.autofaq && autofaq.sendMessage) {
clearInterval(intervalId);
window.autofaq.sendMessage({text: "Привет"});
}
}, 50) |
Управление внешним видом виджета
data-widget-style-params - блок для указания цвета всех элементов виджета, в примере ниже показаны варианты отображения элементов. Наименование параметров цветов соответствует их назначению. formPanelDisabledButtonBackgroundColor и другие аналогичные отвечают за оформление кнопки на форме сбора информации.
В таблице ниже представлены примеры для установки собственной картинки для фона виджета или цвета фона.
| Через атрибуты тега script (Html) | Через глобальную переменную (JavaScript) |
Свой паттерн | Code Block |
---|
| <script
data-widget-style-params='{
"messagesBackgroundImageUrl": "https://i.stack.imgur.com/yGOkq.png"
}'
...
src="...main.js"
></script> |
| Code Block |
---|
| window.widgetStyleParams = {
messagesBackgroundImageUrl: "https://i.stack.imgur.com/yGOkq.png"
} |
|
Свой паттерн + настройки паттерна | Code Block |
---|
| <script
data-widget-style-params='{
"messagesBackgroundImageUrl": "https://i.stack.imgur.com/yGOkq.png"
"messagesBackgroundRepeat": "repeat-y",
"messagesBackgroundPosition": "50% 50%",
"messagesBackgroundSize": "contain"
}'
...
src="...main.js"
></script> |
| Code Block |
---|
| window.widgetStyleParams = {
messagesBackgroundImageUrl: "https://i.stack.imgur.com/yGOkq.png",
messagesBackgroundRepeat: "repeat-y",
messagesBackgroundPosition: "50% 50%",
messagesBackgroundSize: "contain"
} |
|
Только цвет (затирает предустановленный паттерн) | Code Block |
---|
| <script
data-widget-style-params='{
"messagesBackground": "lightcyan"
}'
...
src="...main.js"
></script> |
| Code Block |
---|
| window.widgetStyleParams = {
messagesBackground: "lightcyan"
} |
|
Фоновый цвет + прозрачная картинка | Code Block |
---|
| <script
data-widget-style-params='{
"messagesBackgroundColor": "#aaeeff",
"messagesBackgroundImageUrl": "https://cdn.pixabay.com/photo/ |
|
20141014support303213Управление виджетом из кода страницы
data-widget-api-ns - наименование объекта виджета для программного развертывания и свертывания виджета, после чего командами autofaq.open() и autofaq.close() можно разворачивать и сворачивать виджет
Code Block |
---|
data-widget-api-ns = "autofaq" |
Управление внешним видом виджета
data-widget-style-params - блок для указания цвета всех элементов виджета, в примере ниже показаны варианты отображения элементов. Наименование параметров цветов соответствует их назначению. formPanelDisabledButtonBackgroundColor и другие аналогичные отвечают за оформление кнопки на форме сбора информации.
В таблице ниже представлены примеры для установки собственной картинки для фона виджета или цвета фона.
Через атрибуты тега script (Html) | Через глобальную переменную (JavaScript) | Свой паттерн | Code Block |
---|
|
<script
data-widget-style-params='{
"messagesBackgroundImageUrl",
"messagesBackgroundRepeat": "no-repeat",
"messagesBackgroundPosition": "50% 100%",
"messagesBackgroundSize": "auto"
}'
...
src="...main.js"
></script> |
| Code Block |
---|
| window.widgetStyleParams = {
messagesBackgroundColor: "#aaeeff",
messagesBackgroundImageUrl: "https:// |
|
istackimgur.com/yGOkqcom/photo/2018/04/02/07/56/grass-3283193_960_720.png",
|
|
}'
...
src="...main.js"
></script> Code Block |
---|
|
window.widgetStyleParams = { messagesBackgroundRepeat: "no-repeat",
messagesBackgroundPosition: "50% 100%",
|
|
messagesBackgroundImageUrlmessagesBackgroundSize: " |
|
https://i.stack.imgur.com/yGOkq.png"
}Свой паттерн + настройки паттерна | Code Block |
---|
| <script
data-widget-style-params='{
"messagesBackgroundImageUrl": "https://i.stack.imgur.com/yGOkq.png"
"messagesBackgroundRepeat": "repeat-y",
"messagesBackgroundPosition": "50% 50%",
"messagesBackgroundSize": "contain"
}'
...
src="...main.js"
></script> |
| Code Block |
---|
| window.widgetStyleParams = {
messagesBackgroundImageUrl: "https://i.stack.imgur.com/yGOkq.png",
messagesBackgroundRepeat: "repeat-y",
messagesBackgroundPosition: "50% 50%",
messagesBackgroundSize: "contain"
} |
|
Только цвет (затирает предустановленный паттерн) | Code Block |
---|
| <script
data-widget-style-params='{
"messagesBackground": "lightcyan"
}'
...
src="...main.js"
></script> |
| Code Block |
---|
| window.widgetStyleParams = {
messagesBackground: "lightcyan"
} |
|
Фоновый цвет + прозрачная картинка | Code Block |
---|
| <script
data-widget-style-params='{
"messagesBackgroundColor": "#aaeeff",
"messagesBackgroundImageUrl": "https://cdn.pixabay.com/photo/2018/04/02/07/56/grass-3283193_960_720.png",
"messagesBackgroundRepeat": "no-repeat",
"messagesBackgroundPosition": "50% 100%",
"messagesBackgroundSize": "auto"
}'
...
src="...main.js"
></script> |
| Code Block |
---|
|
window.widgetStyleParams = {
messagesBackgroundColor: "#aaeeff",
messagesBackgroundImageUrl: "https://cdn.pixabay.com/photo/2018/04/02/07/56/grass-3283193_960_720.png",
messagesBackgroundRepeat: "no-repeat",
messagesBackgroundPosition: "50% 100%",
messagesBackgroundSize: "auto"
} |
Параметр | Описание |
messagesBackground | соответствует background в css. Если установлен - перекрывает значения по умолчанию, в том числе паттерн. Можно использовать вместо messagesBackgroundColor |
messagesBackgroundColor | устанавливает цвет фона. Не затрагивает текущий паттерн, по этому изменения могут быть не заметны |
messagesBackgroundImageUrl | Устанавливает фоновое изображение. Нужно указать только url изображения |
messagesBackgroundImage | Для background-image в css |
messagesBackgroundRepeat | Для background-repeat в css |
messagesBackgroundPosition | Для background-position в css |
messagesBackgroundSize | Для background-size в css |
Управление размером виджета
data-widget-sizes - блок для управления размерами виджета на странице. Доступные для управления параметры:
resizeable - true/false - возможность пользователю на странице самому изменять размеры виджета с помощью мыши
width - указание в % или целое число - задание ширины виджета
height - указание в % или целое число - задание высоты виджета
minWidth - целое число - задание минимальной ширины виджета
minHeight - целое число - задание минимальной высоты виджета
Через атрибуты тега script (Html) | Через глобальную переменную (JavaScript) |
---|
Code Block |
---|
|
data-widget-sizes = '{
"resizeable": true,
"width": "30%",
"height": "80%",
"minWidth": 400,
"minHeight": 300
}' |
Code Block |
window.widgetSizes = {
"width": "30%",Параметр | Описание |
messagesBackground | соответствует background в css. Если установлен - перекрывает значения по умолчанию, в том числе паттерн. Можно использовать вместо messagesBackgroundColor |
messagesBackgroundColor | устанавливает цвет фона. Не затрагивает текущий паттерн, по этому изменения могут быть не заметны |
messagesBackgroundImageUrl | Устанавливает фоновое изображение. Нужно указать только url изображения |
messagesBackgroundImage | Для background-image в css |
messagesBackgroundRepeat | Для background-repeat в css |
messagesBackgroundPosition | Для background-position в css |
messagesBackgroundSize | Для background-size в css |
messagesOutdatedButtonBackgroundColor | устанавливает цвет неактивных кнопок |
messagesOutdatedButtonTextColor | устанавливает цвет текста неактивных кнопок |
widgetButtonBackgroundColor | устанавливает цвет фона иконки виджета |
Управление размером виджета
data-widget-sizes - блок для управления размерами виджета на странице. Доступные для управления параметры:
resizeable - true/false - возможность пользователю на странице самому изменять размеры виджета с помощью мыши
width - указание в % или целое число - задание ширины виджета
height - указание в % или целое число - задание высоты виджета
minWidth - целое число - задание минимальной ширины виджета
minHeight - целое число - задание минимальной высоты виджета
Через атрибуты тега script (Html) | Через глобальную переменную (JavaScript) |
---|
Code Block |
---|
| data-widget-sizes = '{
"resizeable": true,
"width": "30%",
"height": "80%",
"minWidth": 400,
"minHeight": 300
}' |
| Code Block |
---|
window.widgetSizes = {
"width": "30%",
"height": "80%",
"minWidth": 400,
"minHeight": 300,
"resizeable": true
} |
|
Google analytics и Яндекс метрики
Отправляемые события:
"AUTOFAQ_OPEN_DIALOG" - открытие виджета
"AUTOFAQ_CLOSE_DIALOG" - закрытие виджета
"AUTOFAQ_USER_SEND_MESSAGE" - пользователь написал сообщение
"AUTOFAQ_USER_UPDATE_INFO" - обновление информации о пользователе. Например заполнена форма.
Expand |
---|
|
Для настройки по мимо вставки самого кода счетчика необходимо в виджет передать его номер через параметр data-widget-ymid="00000000". И добавить "Цели" в Яндекс метриках Image Added |
Expand |
---|
|
Дополнительных настроек не требуется. Достаточно вставить на страницу уже готовый код "Глобальный тег (gtag.js)" из раздела "Сведения о веб-потоке" Image Added |
Пример кода виджета
Expand |
---|
|
виджета с отдельно настроенными цветами для сообщений и для кнопок виджета, который всегда открыт при открытии страницы виджета с формой, в которой есть 2 обязательных к заполнению поля - ФИО и Отделение и кнопка Отправить виджета с надписью "Мы на связи!" виджета с автоматическим открытием через 5 секунд виджета, который отображает имя оператора виджета с нестандартной иконкой бота
Code Block |
---|
| <link href="https://croc-chat.autofaq.ai/widget/static/css/main.css" rel="stylesheet">
<script data-widget-host="https://croc-chat.autofaq.ai"
data-widget-service-id="ХХХХХХ-ХХХХ-ХХХХХХ"
data-widget-visible-by-default="true"
data-widget-new-messages='{"badge": true, "favicon": true, "notifications": true }'
data-widget-user-login="default"
data-widget-operator-name = "true"
data-widget-operator-icon = "https://cdn.pixabay.com/photo/2014/04/02/10/14/support-303213_960_720.png"
data-widget-bot-icon = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Robot-icon.png"
data-widget-style-params='{
" |
|
heightwidgetButtonBackgroundColor": " |
|
80%minWidth400minHeight300resizeable true
}Пример кода виджета
“HTML вариант”
виджета с отдельно настроенными цветами для сообщений и для кнопок
виджета, который всегда открыт при открытии страницы
виджета с формой, в которой есть 2 обязательных к заполнению поля - ФИО и Отделение и кнопка Отправить
виджета с надписью "Мы на связи!"
виджета с автоматическим открытием через 5 секунд
виджета, который отображает имя оператора
виджета с нестандартной иконкой бота
Code Block |
<link href="https://croc-chat.autofaq.ai/widget/static/css/main.css" rel="stylesheet">"#ffffff",
"messageToWidgetBackgroundColor": "rgb(255,133,4)",
|
|
<script data-widget-host="https://croc-chat.autofaq.ai" "messageToWidgetTextColor": "#ffffff",
|
|
data-widget-service-id="ХХХХХХ-ХХХХ-ХХХХХХ"
"messageFromWidgetBackgroundColor": "#f7f7f7",
|
|
data-widget-visible-by-default="true" data-widget-new-messages='{"badge"messageFromWidgetTextColor": |
|
true,faviconmessagesButtonBackgroundColor": |
|
true"notifications":true}' data-widget-user-login="default"
"messagesButtonTextColor": "#000000",
|
|
data-widget-operator-name = "messagesButtonHoverBackgroundColor": " |
|
true data-widget-operator-icon= "https://cdn.pixabay.com/photo/2014/04/02/10/14/support-303213_960_720.png"
data-widget-bot-icon = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Robot-icon.png" "messagesButtonHoverTextColor": "#000000",
"messagesOperatorFullNameTextColor": "#666",
|
|
data-widget-style-params='{"messagesOperatorTimeTextColor": "#aaaaaa",
" |
|
widgetButtonBackgroundColorformPanelBorderColor": "rgb(255,133,4)",
" |
|
widgetButtonTextColorformPanelDisabledButtonBackgroundColor": " |
|
#fffheaderBackgroundColorformPanelDisabledButtonBorderColor": "#999" |
|
rgb(255,133,4),
"formPanelDisabledButtonColor": "#fff",
" |
|
headerTextColorformPanelSubmitButtonBackgroundColor": " |
|
#ffffffmessageToWidgetBackgroundColorformPanelSubmitButtonBorderColor": "rgb(255,133,4)",
" |
|
messageToWidgetTextColorformPanelSubmitButtonTextColor": " |
|
#ffffffmessageFromWidgetBackgroundColorformPanelSubmitButtonHoverBackgroundColor": " |
|
#f7f7f7messageFromWidgetTextColorformPanelSubmitButtonHoverBorderColor": " |
|
#000000messagesButtonBackgroundColorformPanelSubmitButtonHoverTextColor": " |
|
#90ee90messagesButtonTextColormessagesBackgroundImageUrl": " |
|
#000000https://image.freepik.com/free-vector/memphis-pattern-background_53876-85418.jpg",
" |
|
messagesButtonHoverBackgroundColormessagesBackgroundRepeat": " |
|
#fffffmessagesButtonHoverTextColormessagesBackgroundPosition": " |
|
#000000messagesOperatorFullNameTextColormessagesBackgroundSize": " |
|
#666,"messagesOperatorTimeTextColor": "#aaaaaa",}'
data-widget-user-form='{
|
|
"formPanelBorderColor":"rgb(255,133,4)",formPanelDisabledButtonBackgroundColor#999Здравствуйте, я ваш помощник, представьтесь, пожалуйста.",
" |
|
formPanelDisabledButtonBorderColor"#999",formPanelDisabledButtonColor"#fff",
"formPanelSubmitButtonBackgroundColor":"rgb(255,133,4)",formPanelSubmitButtonBorderColorrgb(255,133,4)","formPanelSubmitButtonTextColor": "#fff",formPanelSubmitButtonHoverBackgroundColor"rgba(255,133,5,0.75)", "formPanelSubmitButtonHoverBorderColor":"rgb(255,133,5)","formPanelSubmitButtonHoverTextColor":"#fff","messagesBackgroundImageUrl":"https://image.freepik.com/free-vector/memphis-pattern-background_53876-85418.jpg",messagesBackgroundRepeatrepeat-y"messagesBackgroundPosition": "50% 100%",messagesBackgroundSizeauto"}'data-widget-user-form='{ "message":"Здравствуйте,явашпомощник,представьтесь,пожалуйста.",
submitButton {
"Пожалуйста, укажите ваше Ф.И.О."}
|
|
"text":"Отправить"},"fields": [senderFullNameФ.И.О.Отделение",
"rules": [
{"required": |
|
truefalse, "message": "Пожалуйста, укажите ваше |
|
Ф.И.О.,{ "name": "Отделение",
data-widget-auto-open='{
"timer": 5,
"once": true
}'
data-widget-invite-message='{
"message": "Мы на связи!",
"hideOnOpen": true,
"showOnClose": true
}'
src=" |
|
label": "Отделение",https://croc-chat.autofaq.ai/widget/static/js/main.js"
id="autofaqWidget">
</script> |
|
Expand |
---|
title | “Динамический вариант” - конфигурация параметров виджета с помощью javascript |
---|
|
Code Block |
---|
| <script>
const link |
|
"rules": [= document.createElement('link');
link.href='https://chat.autofaq.ai/widget/static/css/main.css';
link.rel='stylesheet';
|
|
{"required":false,"message":"Пожалуйста,укажитевашеотделение"}
= document.createElement('script');
script.id = 'autofaqWidget';
|
|
]script.type = "text/javascript";
script.src |
|
}= "https://chat.autofaq.ai/widget/static/js/main.js";
window.widgetHost |
|
= 'https://chat.autofaq.ai';
|
|
] }'
data-widget-auto-open='{
"timer": 5,
"once": true
}'
data-widget-invite-message='{
"message": "Мы на связи!",
"hideOnOpen": true,
"showOnClose": true
}'window.widgetServiceId = '{SERVICE-ID}';
window.widgetChannelId = '{cHANNEL-ID}';
window.widgetNewMessages |
|
srchttps://croc-chat.autofaq.ai/widget/static/js/main.js"
id="autofaqWidget">
</script>“Динамический вариант” - конфигурация параметров виджета с помощью javascript:
Code Block |
---|
badge": true, "favicon": true, "notifications": true};
| <script> window.widgetUserLogin = 'default';
| conststylesLink=`<linktype="text/css" href="https://test-chat.autofaq.ai/widget/static/css/main.css" rel="stylesheet" />` window.widgetOperatorName = false;
| const scriptwindow.widgetOperatorIcon = | document.createElement('script');
'https://dockerhosts9941.blob.core.windows.net/widget/operator.png';
window. | widgetHostwidgetBotIcon = 'https:// | test-chat.autofaq.aidockerhosts9941.blob.core.windows.net/widget/bot.png';
| scriptid 'autofaqWidget';script.type = "text/javascript"; "widgetButtonBackgroundColor": "rgb(255,79,18)",
| script.src=https://test-chat.autofaq.ai/widget/static/js/main.js";window.widgetServiceId = 'e7b8997b-48f3-444c-a87d-9d9e56d3dddf'widgetChannelId'2f7ce72f-8003-4e17-b879-e3c71f239149'widgetNewMessages'badge truefaviconnotifications'widgetUserLogin'default';
window.widgetOperatorName = falsewindow.widgetOperatorIcon = 'https://dockerhosts123.blob.core.windows.net/widget/operator.png' document.head.appendChild(link);
| window.widgetBotIcon= 'https://dockerhosts123.blob.core.windows.net/widget/bot.png' document.head.appendChild(script);
</script> |
|
Стандартный виджет Image Added | Измененный виджет Image Added |
Переопределение стилей
Для внесение визуальных изменений в виджет, например, изменение радиуса скругления краев окна виджета, необходимо переопределить стиль для блока.
Изменение радиуса скругления краев:
Code Block |
---|
|
<style>
.chat21-sheet{
border: |
window.widgetUserPayload= {"key": "value"}solid CornflowerBlue;
border-radius: 50px !important;
|
window.widgetStyleParams = '{"widgetButtonBackgroundColor": "rgb(255,79,18)", "widgetButtonTextColor": "#FFFFFF", "headerBackgroundColor": "#273A64", "headerTextColor": "#FFFFFF", "messageToWidgetBackgroundColor": "#273A64", "messageToWidgetTextColor": "#FFFFFF", "messageFromWidgetBackgroundColor": "rgb(227,233,236)", "messageFromWidgetTextColor": "#000000", "messagesButtonBackgroundColor": "#979799", "messagesButtonTextColor": "#FFFFFF", "messagesButtonHoverBackgroundColor": "#E3E8EC", "messagesButtonHoverTextColor": "#000000", "messagesOperatorFullNameTextColor": "#101828", "messagesOperatorTimeTextColor": "#979799", "messagesBackgroundImageUrl": "https://dockerhosts9941.blob.core.windows.net/widget/background.png", "messagesBackgroundRepeat": "repeat-y", "messagesBackgroundSize": "auto"}';
window.widgetIniteMessage = false;
window.widgetInviteMessage = '{"message": "Готов помочь!", "hideOnOpen": true, "showOnClose": true}';
$('head').append(stylesLink, script);
</script>Стандартный виджет | Image RemovedИзмененный виджетРазворачивание списка каналов
В виджете есть возможность настройки и показа списка доступных каналов помимо виджета.
Image Added Пока для встраивания доступны каналы следующих типов:
Можно расставить их в том порядке как вы хотите, чтобы они отображались у пользователей.
Для включения этой опции нужно зайти в канал Виджет и в блоке Настройка списка каналов в виджете
включить эту опцию (1). При нажатии на кнопку Добавить канал в список
(2) появляется блок с настройкой канала. В выпадающем списке отображаются названия активных каналов доступных типов.
Image AddedImage AddedПри клике на иконки каналов WhatsApp, Telegram и Viber с компьютера пользователь видит окошко с кнопкой подключения и QR кодом для сканирования телефоном - это позволит открыть канал на телефоне. При нажатии на кнопку подключения открываются ссылки вида:
https://t.me/<имя_бота_телеграмм>
- для Telegram
https://wa.me/7999541234
- для WhatsApp
https://vk.me/club1134567
- для VK
viber://pa/info?uri=<имя_бота_вайбер>
- для Viber
QR кода также содержат эти ссылки и позволяют открыть ссылку сразу на телефоне.
При открытии виджета на телефоне клик на иконке канала сразу открывает ссылку без отображения окошек.
Image AddedВсе текстовки задаются администратором в настройках подключения каналов к виджету.
Image AddedДля каждого из дополнительных каналов можно указать:
название, которая отображается в заголовке окошка;
общую текстовку, которая отображается на самом верху окошка;
текст над кнопкой подключения;
текст над QR кодом.
Info |
---|
Важно! Для каждого подключаемого канала в список нужно заполнить новое поле в этом канале - Название группы (Telegram, VK, Viber) или номер телефона (для WhatsApp) |
Image AddedВиртуальная клавиатура
Параметр data-widget-enable-virtual-keyboard позволяет включить отображение виртуальной клавиатуры в интерфейсе виджета
Code Block |
---|
|
data-widget-enable-virtual-keyboard="true" |
Image Added
Сброс сессии пользователя
Для сброса сессии пользователя в виджете на стороне портала можно вызвать команду
Code Block |
---|
autofaq.logout() |
После того виджет будет переоткрыт уже с новым пользователем.