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;
window.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>

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

Image Removed

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

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

 window.beesenderchatconfig.showChannelPanelOnHover = true;

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

Image Added

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 вставить нужный цвет.

До	После

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

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

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

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

До	После

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

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

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

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

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

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

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

window.beesenderchatconfig.canClientResizeWidget = true;

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

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

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

window.beesenderchatconfig.canClientMoveWidget = true;

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

window.beesenderchatconfig.alwaysShowWidgetButton = false;

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

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

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

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

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

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

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

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

window.beesenderchatconfig.channelId = “Ваш channelId”;

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

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

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

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

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

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

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

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

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

window.beesenderchatconfig.connectorUrl = "https://balance.beesender.com";

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

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

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

window.beesenderchatconfig.disableInputOnButtonMessages = false;

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

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

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

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

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

window.beesenderchatconfig.sendInitialMessageOnWidgetButtonClick = false;

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

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

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

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

До	После

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

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

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

window.beesenderchatconfig.connectWssWithoutClick = false;

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

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

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

window.beesenderchatconfig.localStorageLifeTime = 100;

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

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

function (timestamp) {

var date = new Date(timestamp);

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

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

 }

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

window.beesenderchatconfig.timeFormatFuntion = function (timestamp) {your code};

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

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

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

window.beesenderchatconfig.enableFileUpload = true

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

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

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

window.beesenderchatconfig.fileServerUrl = "https://files.beesender.com"

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

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

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

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

window.beesenderchatconfig.isClientTyping = true