1. Добавление канала WebSite

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

Далее необходимо нажать на "+" для того, чтобы добавить новый канал, и выбрать WebSite

В открывшемся окне необходимо заполнить поля:

Далее представлен код, который был сгенерирован для виджета. Полученный код необходимо вставить в html файл (для тестирования виджета) или в код страницы сайта.

2. Кастомизация виджета

Есть несколько преднастроенных скриптов, в которых нужно заменить window.beesenderchatconfig.channelId и вставить получившийся скрипт в код страницы.

2.1 Виджет без дополнительных каналов

Для добавления виджета без дополнительных каналов нужно заменить window.beesenderchatconfig.title (название компании) и window.beesenderchatconfig.channelId из сгенерированного в Creatio кода:

2.2 Виджет с возможностью выбора каналов

Для этого необходимо добавить в стандартный скрипт (он выше) несколько строчек:

window.beesenderchatconfig.menuButtonIcon = 'https://pictures.beesender.com/0/More.png';
window.beesenderchatconfig.showChannelPanel = true;
indowwindow.beesenderchatconfig.channelsInPanel =
[
{ type : "fb", name : "Facebook", link : "https://www.facebook.com/Beesender-1943326189302470/?modal=admin_todo_tour" },
{ type : "fbm", name : "Facebook Messenger", link : "https://www.facebook.com/messages/t/1943326189302470" }, 
{ type : "telegram", name : "Telegram", link : "https://t.me/DiverTestBot" },
{ type : "viber", name : "Viber", link : "viber://pa?chatURI=uri5element" },
{ type : "skype", name : "Skype", link : "https://join.skype.com/bot/cf865d6e-e37f-4a05-a260-6e8b0a657104?add" },
{ type : "twitter", name : "Twitter", link : "https://twitter.com/Beesender5" },
{ type : "whatsapp", name : "WhatsApp", link : "https://wa.me/79636129154" },
{ type : "widget", name : "Continue on this website" }
]

Оставлять только строчки с каналами, которые подключены к системе.

Полный скрипт с выбором каналов будет выглядеть так:

<script>
window.beesenderchatconfig = {};
window.beesenderchatconfig.channelId = '5158f176-e6cb-4b1d-b9d0-bc305652cc74';
window.beesenderchatconfig.connectorUrl = 'https://balance.beesender.com';
window.beesenderchatconfig.title = "Beesender";
window.beesenderchatconfig.headerImageSrc = "./Beesender_logo.png";
window.beesenderchatconfig.operatorAvatar = "./Beesender_logo.png";
window.beesenderchatconfig.menuButtonIcon = 'https://pictures.beesender.com/0/More.png';
window.beesenderchatconfig.chatMessagePlaceholder ="Enter message...";
window.beesenderchatconfig.closeChatCaption = "Close chat";
window.beesenderchatconfig.chatButtonsPlaceholder = 'Please select one of the following options';
window.beesenderchatconfig.initialMessageText = "A client opened the webchat";
window.beesenderchatconfig.errorFileUploadString = "Error";
window.beesenderchatconfig.successFileUploadString = "Uploaded";
window.beesenderchatconfig.operatorInfoMessage = "Your agent is {0}";
window.beesenderchatconfig.widgetButtonColor = "#ff4013";
window.beesenderchatconfig.widgetButtonColorLine = "#ffffff";
window.beesenderchatconfig.isClientTyping = true;
window.beesenderchatconfig.menuButtonIcon = 'https://pictures.beesender.com/0/More.png';
window.beesenderchatconfig.showChannelPanel = true;
window.beesenderchatconfig.disableInputOnButtonMessages = false;
window.beesenderchatconfig.channelsInPanel = 
[
{ type : "widget", name : "Continue on this website" },
{ type : "telegram", name : "Telegram", link : "" },
{ type : "whatsapp", name : "WhatsApp", link : "h" },
{ type : "instagram", name : "Instagram", link : "" },
{ type : "fbm", name : "Facebook Messenger", link : "" },
{ type : "fb", name : "Facebook", link : "" },
{ type : "twitter", name : "Twitter", link : "" },
{ type : "teams", name : "MS Teams", link : "" },
{ type : "skype", name : "Skype", link : "" },
{ type : "line", name : "Line", link : "" },
{ type : "wechat", name : "Wechat", link : "" },
];
</script>

2.3 Отображение доступных каналов для коммуникации при наведении

Для того чтобы доступные каналы для коммуникации отображались при наведении на кнопку виджета, необходимо добавить в скрипт следующую строку:

 window.beesenderchatconfig.showChannelPanelOnHover = true;

3. Настройки отображения виджета

3.1 Цвет кнопки виджета

Если Вы хотите изменить цвет кнопки виджета, добавьте в скрипт, сгенерированный в Creatio, следующую строку:

window.beesenderchatconfig.widgetButtonColor = "#ff8c00";

Цвет в кавычках менять на нужный.

3.2 Цвет внутреннего элемента кнопки виджета

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

window.beesenderchatconfig.widgetButtonColorLine = "#ffffff";

Цвет в кавычках менять на нужный.

3.3 Цвет пульсации кнопки виджета

Для добавления пульсации кнопки виджета и изменения цвета пульсации необходимо добавить в стили:

<style>
.beesender-widget-button-pulse-animate {
background-color: #e91e63 !important;
}
</style>

! Значение  #e91e63 необходимо  менять на свой цвет.

3.4 Рисунок кнопки виджета

Для замены главной кнопки виджета нужно добавить в скрипт, сгенерированный в Creatio, следующую строку, содержащую ссылку на .svg файл-изображение желаемой кнопки виджета:

window.beesenderchatconfig.startButtonSvg = "https://pictures.beesender.com/startbtnbeesender_7.svg";

Значение по умолчанию:

4 Настройки отображения окна диалога

Настройки отображения окна диалога

4.1 Изменение цвета шапки виджета

Для изменения цвета шапки виджета необходимо (2 способа):

а) в стили (<style>) добавить:

#beesenderchat-container .beesenderchat-conversation-body-profile {
background: #4d1965 !important;
}

В кавычках цвет менять на свой.

б) в скрипт добавить строку:

window.beesenderchatconfig.themeColor = "#ffcb05"

Значение по умолчанию – "#ffcb05"

Параметр содержит шестнадцатеричный код цвета, отвечающий за главную цветовую палитру виджета. 

4.2 Изменение фотографии оператора в репликах

Для изменения фотографии оператора в репликах необходимо в скрипт добавить строку:

window.beesenderchatconfig.operatorAvatar = "https://pictures.beesender.com/0/Localiser-300x300.png";

Ссылку в кавычках менять на свою.

4.3 Изменение логотипа в шапке виджета

Для изменения фотографии в шапке виджета необходимо в скрипт добавить строку:

window.beesenderchatconfig.headerImageSrc = "https://pictures.beesender.com/0/Localiser-300x300.png";

Ссылку в кавычках менять на свою.

4.4 Изменение первой реплики оператора

Параметр может содержать сообщение-шапку, которая будет отображаться в виде первого сообщения в чате виджета. Сообщение-шапка не является обычным сообщением. Оно не передается оператору Creatio и видно только на стороне клиента в виджете. Вариант использования: попросить клиента подождать, пока ему ответит оператор/чат-бот. Сообщение может содержать кнопки. По умолчанию сообщения шапки нет. Чтобы её добавить, проинициализируйте параметр объектом, как указано в примере. Если кнопки не нужны, то проинициализируйте только атрибут text.

window.beesenderchatconfig.welcomeMessage = { 
      text: "Оператор скоро ответит! Подождите, пожалуйста!"
buttons: ["Ок", "Не ок"]
     };

4.5 Изменение цвета и фона системного сообщения с именем оператора

4.5.1 Изменение фона системного сообщения с именем оператора

Для замены фона системного сообщения в стили (<style>) необходимо добавить:

.beesenderchat-operatorinfo-message {
background-color: #ff6161!important;
}

Вместо #ff6161 вставить нужный цвет.

До	После

4.5.2 Изменение цвета текста системного сообщения с именем оператора

Для замены цвета текста сообщения в стили (<style>) нужно добавить:

.beesenderchat-operatorinfo-message-phrase {
color: #ffffff !important;
}

Вместо #ffffff вставить нужный цвет.

До	После

4.6 Изменение цвета и фона системного сообщения о закрытии чата

Чтобы в виджете отображалось системное сообщение о закрытии чата, необходимо активировать системную настройку BeesenderSendCloseNotification. Текст сообщения возможно изменить в системной настройке BeesenderCloseChatMessageText.

4.6.1 Изменение фона системного сообщения о закрытии чата

Для замены фона в стили (<style>) необходимо добавить:

.beesenderchat-notification-message-phrase {
background: #ff6161 !important;
}

Вместо #ff6161 вставить нужный цвет.

До	После

4.6.2 Изменение цвета текста системного сообщения о закрытии чата

Для замены цвета текста в стили (<style>) необходимо добавить:

.beesenderchat-notification-message-phrase {
color: #ffffff !important;
}

Вместо #ffffff вставить нужный цвет.

До	После

4.7 Изменение цвета и фона сообщений

Для замены цвета области вокруг сообщений в стили (<style>) необходимо добавить:

.beesenderchat-comment
{background: #999999 !important;
}

Вместо #999999 вставить нужный цвет.

До	После

4.7.1 Изменение цвета текста сообщений оператора

Для замены цвета текста сообщений оператора в стили (<style>) необходимо добавить:

.beesenderchat-comment-container-admin p.beesenderchat- {
color: #000 !important;
}

Вместо #000 вставить нужный цвет.

До	После

4.7.2 Изменение фона сообщений оператора

Для замены фона сообщений оператора в стили (<style>) необходимо добавить:

.beesenderchat-comment-container-admin p.beesenderchat- {
background: #fff !important;
}

Вместо #fff вставить нужный цвет.

До	После

4.7.3 Изменение цвета текста сообщений клиента

Для замены цвета текста сообщений клиента в стили (<style>) необходимо добавить:

.beesenderchat-comment-container-user p.beesenderchat- {
color: #000 !important;
}

Вместо #000 вставить нужный цвет.

До	После

4.7.4 Изменение фона сообщений клиента

Для замены фона сообщений клиента в стили (<style>) необходимо добавить:

.beesenderchat-comment-container-user p.beesenderchat- {
background: #fff !important;
}

Вместо #fff вставить нужный цвет.

До	После

4.8 Изменение цвета времени отправки сообщений

Для замены цвета времени отправки сообщений в стили (<style>) необходимо добавить:

.beesender-msg-time {
color: #000 !important;
}

Вместо #000 вставить нужный цвет.

До	После

4.9 Изменение цвета и прозрачности фона виджета

Для замены цвета и прозрачности фона виджета в стили (<style>) необходимо добавить:

div#beesenderchat-main-feed {
background-color: rgba(203,210,234,.86) !important;
}

Вместо rgba(203,210,234,.86) вставить нужный цвет и прозрачность.

Для замены цвета и прозрачности фона виджета на определенного размера экране (или при открытии виджета с моб. устройств, открытии DevTools)

в стили необходимо добавить:

@media screen and (max-width: 980px)
{
div#beesenderchat-main-feed {
background-color: rgba(203,210,234,.86) !important;
}}

До	После

4.10 Изменение заголовка виджета

Для изменения заголовка в шапке виджета необходимо в скрипт добавить строку:

window.beesenderchatconfig.title = "Новый заголовок";

Текст в кавычках менять на новый (название компании).

Значение по умолчанию – 'Beesender'

До	После

4.11 Добавление подзаголовка виджета

Для добавления подзаголовка в шапке виджета необходимо в скрипт добавить строку:

window.beesenderchatconfig.subtitle = "My Subtitle";

Текст в кавычках менять на свой

Значение по умолчанию – ' '

До	После

4.12 Изменение текста плейсхолдера поля ввода

Для изменения текста плейсхолдера поля ввода, куда требуется ввести текстовое сообщение, необходимо в скрипт добавить строку:

window.beesenderchatconfig.chatMessagePlaceholder = "Введите сообщение...";

Текст в кавычках менять на свой

До	После

Значение по умолчанию – 'Enter message…'

4.13 Изменение текста описания в footer виджета

Для изменения текста описания в footer виджета (Значение по умолчанию – "Chats and chatbots") необходимо в скрипт добавить строку:

window.beesenderchatconfig.footerTitle = "Чаты и чатботы "

Текст в кавычках менять на новый

До	После

4.14 Изменение ссылки Beesender в footer виджета

4.14.1 Изменение текста заголовка в footer виджета

Для изменения текста заголовка в footer виджета (Значение по умолчанию – " Beesender") необходимо в скрипт добавить строку:

window.beesenderchatconfig.footerTitleName = "Beesender"

Текст в кавычках менять на новый

До	После

4.14.2 Изменение адреса ссылки в footer виджета

Для изменения ссылки на ресурс, на который будет осуществлен редирект, после клика на текст заголовка из footer виджетанеобходимо в скрипт добавить строку:

window.beesenderchatconfig.footerTitleName = "http://beesender.com/"

Адрес ссылки в кавычках менять на новый

 Значение по умолчанию – "http://beesender.com "

4.15 Изменение статуса успешной отправки файла из виджета

Для изменения пользовательского отображения статуса отправки файла на виджете, в случае если файл удалось успешно отправить,необходимо в скрипт добавить строку:

window.beesenderchatconfig.successFileUploadString = "Загружено"

Текст в кавычках менять на новый

Значение по умолчанию – "Loaded"

До	После

4.16 Изменение иконки изображения при отправке пользователем файла

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

window.beesenderchatconfig.beesenderDownloadIcon = "https://widget.beesender.com/src/download.svg"

Адрес изображения в кавычках поменять на новый

Значение по умолчанию – "https://widget.beesender.com/src/download.svg",

До	После

4.17 Изменение текста сообщения с именем и аватаром оператора в момент его подключения к чату

Для изменения текста сообщения с именем и аватаром оператора в момент его подключения к чату (данную функциональность можно включить в crm-системе в настройках виджет-канала), необходимо в скрипт добавить строку:

window.beesenderchatconfig.operatorInfoMessage = "С вами общается {0}"

{0} - внутренний параметр, который заменится на никнейм оператора.

Текст в кавычках поменять на новый

Значение по умолчанию – "С вами общается {0}"

4.18 Изменение иконки "Прикрепить файл"

Для изменения ссылки на иконку изображения “Прикрепить файл” необходимо в скрипт добавить строку:

window.beesenderchatconfig.attachFileButton = "https://widget.beesender.com/src/upload-button.png"

Адрес изображения в кавычках поменять на новый

Значение по умолчанию – "https://widget.beesender.com/src/upload-button.png"

4.19 Изменение иконки эмодзи

Для изменения ссылки на иконку “Эмодзи” в футере виджета необходимо в скрипт добавить строку:

window.beesenderchatconfig.emojiIcon = "https://widget.beesender.com/src/smile.png"

Адрес изображения в кавычках поменять на новый

Значение по умолчанию – "https://widget.beesender.com/src/smile.png"

4.20 Изменение статуса ошибки отправки файла из виджета

Для изменения пользовательского отображения ошибки при отправке файла на виджете, в случае если файл не удалось отправить,необходимо в скрипт добавить строку:

window.beesenderchatconfig.errorFileUploadString = "Ошибка"

Текст в кавычках менять на новый

 Значение по умолчанию – "Send error"

До	После

4.21 Изменение цвета текста и фона кнопок

4.21.1 Изменение цвета текста кнопок

Для замены цвета текста кнопок в стили (<style>) необходимо добавить:

button.beesenderchat-bot-button {
color: #000 !important;
}

Вместо #000 вставить нужный цвет.

До	После
Image RemovedImage Added	Image RemovedImage Added

4.21.2 Изменение фона кнопок

Для замены фона кнопок в стили (<style>) необходимо добавить:

button.beesenderchat-bot-button {
background: #999999 !important;
}

Вместо #999999 вставить нужный цвет.

До	После
Image RemovedImage Added

4.22

Изменение цвета текста и фона кнопок

Изменение текста плейсхолдера поля ввода перед нажатием на кнопку

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

Code Block
language js
window.beesenderchatconfig.chatButtonsPlaceholder = "Выберите один из предложенных вариантов";

Текст в кавычках менять на новый

 Значение по умолчанию – "Выберите один из предложенных вариантов"

Полный перечень настроек

Ниже предоставлен полный перечень кастомных настроек для виджета (window.beesenderchatconfig).

5.1 Открытие виджета по таймеру

Чтобы виджет открывался по таймеру, в конец <body> необходимо вставить скрипт, заменив число 5000 на нужное количество миллисекунд, после которых виджет будет открываться автоматически

4.23 Динамическое изменение высоты

Для включения возможности пользователем самостоятельно на сайте задавать высоту отображения (от минимальной (330 px высота центрального блока) до максимальной (70%)) необходимо в скрипт добавить строку:

Code Block
language js
window.beesenderchatconfig.canClientResizeWidget = true;

Значение по умолчанию – false

4.24 Изменение расположения widget по горизонтали

Для включения возможности пользователям самостоятельно на сайте передвигать виджет по горизонтали (на удобное для него место) необходимо в скрипт добавить строку:

Code Block
language js
<script> $(document).ready(function() {   setTimeout(function(window.beesenderchatconfig.canClientMoveWidget = true;

Значение по умолчанию – false

Info
Сама кнопка виджета не перемещается по горизонтали. Рекомендуется для ее скрытия, при раскрытом окне виджета, использовать следующую настройку: Code Block language js window.beesenderchatconfig.alwaysShowWidgetButton = false;

Полный перечень настроек

Ниже предоставлен полный перечень кастомных настроек для виджета (window.beesenderchatconfig).

5.1 Открытие виджета по таймеру

Чтобы виджет открывался по таймеру, в конец <body> необходимо вставить скрипт, заменив число 5000 на нужное количество миллисекунд, после которых виджет будет открываться автоматически:

Code Block
language js
<script> $(document).ready(function() {   setTimeout(function() {     $("#beesenderchat-widget-startbutton").trigger('click');   }, 5000); }); </script>

5.2 Привязка виджета к каналу

Параметр является обязательным!

Этот параметр необходим, чтобы привязать виджет к каналу в Creatio. Он генерируется автоматически при создании канала. В случае, если канал подключается, как скрипт, то настройка по умолчанию присутствует в тексте скрипта. В случае добавления канала, как vue-компонент, в код страницы необходимо добавить строку:

Code Block
language js
window.beesenderchatconfig.channelId = “Ваш channelId”;

Текст в кавычках менять на сгенерированный в Creatio

5.3 Передача идентификатора пользователя сайта

Значение по умолчанию – ""

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

Code Block
language js
window.beesenderchatconfig.clientId = “Ваш идентификатор”;

Текст в кавычках менять на нужный

5.4 Изменение адреса коннектора

Значение по умолчанию – "https://balance.beesender.com"

Параметр содержит адрес коннектора, с которым виджет устанавливает соединение по протоколу WS. При разворачивании коннектора On Site необходимо указать его адрес в этом параметре. Не рекомендуется изменять, если коннектор развернут не в режиме On Site. Для передачи адреса коннектора в код страницы необходимо добавить строку:

Code Block
language js
window.beesenderchatconfig.connectorUrl = "https://balance.beesender.com";

Текст в кавычках менять на нужный

5.5 Блокировка поля ввода во время сообщения с кнопками

Параметр определяет, будет ли блокироваться поле для ввода сообщения, когда приходит сообщение с кнопками. Это необходимо для того, чтобы запретить пользователю вводить текст, когда требуется нажать на одну из кнопок. Чтобы отключить блокировку, установите значение false в следующую строку:

Code Block
language js
window.beesenderchatconfig.disableInputOnButtonMessages = false;

Значение по умолчанию – true

5.6 Изменение и отключение первого сообщения от клиента при открытии виджета

5.6.1 Отправка первого сообщения, когда клиент открывает виджет

Значение по умолчанию – true

Параметр определяет, будет ли отправляться сообщение от имени клиента в Creatio, когда клиент нажимает на кнопку, чтобы открыть виджет. Текст сообщения определяется параметром initialMessageText. Сообщение отправляется только один раз. Если клиент много раз отроет и закроет виджет, то сообщение отправится только один раз. Сообщение остаётся невидимым в чате виджета, но отображается в чате Creatio. Для отключения отправки этого сообщения, установите значение false.отправки этого сообщения, установите значение false.

Code Block
language js
window.beesenderchatconfig.sendInitialMessageOnWidgetButtonClick = false;

5.6.2 Изменение текста первого сообщения, когда клиент открывает виджет

Значение по умолчанию – 'Клиент открыл виджет'

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

Code Block
language js
window.beesenderchatconfig.sendInitialMessageOnWidgetButtonClickinitialMessageText = false; "Новое сообщение, когда клиент открыл виджет!"

До	После
Image Added	Image Added

5.6.

2 Изменение текста

3 Отправка первого сообщения, когда клиент открывает

виджет

сайт

Значение по умолчанию – 'Клиент открыл виджет'

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

Code Blocklanguagejs

true

Если в виджете отсутствует выбор каналов и включена настройка sendInitialMessageOnWidgetButtonClick, то первое сообщение отправляется при заходе на сайт (без клика по виджету) . За это отвечает настройка connectWssWithoutClick.
Для отключения этой настройки (чтобы начальное сообщение отправлялось только после клика на кнопку виджета) нужно прописать в скрипте следующее:

Code Block
window.beesenderchatconfig.initialMessageTextconnectWssWithoutClick = "Новое сообщение, когда клиент открыл виджет!"

До

После

Image RemovedImage Removed

false;

5.7 Время хранения истории переписки в виджете

Значение по умолчанию – 30

Параметр определяет время хранения истории переписки в виджете в минутах. После истечения указанного времени история будет удалена, а попытка отправить сообщение создаст новый чат в Creatio. Для изменения времени хранения истории переписки, в скрипт необходимо добавить строку:

Code Block
language js
window.beesenderchatconfig.localStorageLifeTime = 100;

5.8 Изменение формата времени сообщений

Значение по умолчанию –

function (timestamp) {

var date = new Date(timestamp);

return `${date.getHours()}:${(date.getMinutes() < 10) ? "0"  +

                     date.getMinutes() : date.getMinutes()}`;

 }

Параметр содержит функцию, которая принимает количество миллисекунд, а возвращает строку времени. Используется для указания формата времени у сообщений. Для изменения формата времени сообщений в скрипт необходимо добавить строку:

Code Block
language js
window.beesenderchatconfig.timeFormatFuntion = function (timestamp) {your code};

5.9 Возможность отправки файлов из виджета

 Значение по умолчанию – true 

Параметр отвечает за возможность отправки файлов из виджета. Для отключения возможности отправки файлов из виджета в скрипт необходимо добавить строку:

Code Block
language js
window.beesenderchatconfig.enableFileUpload = true

5.10 Изменение файлового сервера

Значение по умолчанию – "https://files.beesender.com"

Параметр содержит ссылку на файловый сервер, разработанный командой "Beesender", который преобразует все файлы, отправленные из виджета, в ссылки. Для изменения ссылки на файловый сервер в скрипт необходимо добавить строку:

Code Block
language js
window.beesenderchatconfig.fileServerUrl = "https://files.beesender.com"

Адрес в кавычках менять на нужный

5.11 Режим “слежения за пользователем” во время набора текста

Значение по умолчанию – false

Параметр отвечающий за включение режима "слежения за пользователем", во время набора пользователем текста. Для включения функции слежения за пользователем в скрипт необходимо добавить строку:

Code Block
language js
window.beesenderchatconfig.isClientTyping = true