Добавление канала WebSite
Для того, чтобы добавить канал виджет в систему, необходимо перейти в раздел "Настройка чатов" в "Дизайнере системы".
Далее необходимо нажать на "+" для того, чтобы добавить новый канал.
Домен не должен содержать / и http://. Должен быть уникальным для каждого вебсайта. Если на один вебсайт вешается несколько виджетов (на разные страницы), то названия этих страниц указываются до домена. Например: test.beesender.com это страница beesender.com/test Обратите внимание на то, что нельзя создать несколько каналов типа "WebSite" с одинаковым доменом. Если будет создан новый канал, использующий тот же домен, старый канал автоматически перестанет работать. |
2 Выбор виджета
При создании канала есть возможность выбрать версию виджета:
1.0 - первая базовая версия черного цвета
2.0 - обновленная версия, не включающая в себя emoji и информацию об операторе
2.5 - можно отправлять emoji; информация об операторе не отображается
3.0 - версия с возможностью отображать информацию об операторе, отправлять emoji, видеть что клиент печатает сообщение
Далее представлен код, который был сгенерирован для виджета, в нем Вам необходимо лишь заменить слово "Title" на название компании или любой другой заголовок, который будет отражаться в виджете
| <link rel="stylesheet" href="https://widget.beesender.com/prod/widget.css"> <div id="beesender-chat"></div> <script> window.beesenderchatconfig = {}; window.beesenderchatconfig.channelId = '5f0b2f7b-8ca2-47fe-88eb-312bd3dc641a'; </script> <script src="https://widget.beesender.com/prod/widget.js" async></script> <script src="https://widget.beesender.com/prod/chunk-vendors.js" async></script> |
|---|
3. Кастомизация виджета
Далее есть несколько пред настроенных скриптов, в которых нужно заменить ID и вставить получившийся скрипт в код страницы:
3.1 Виджет без дополнительных каналов
Нужно заменить window.beesenderchatconfig.title (название компании) и ID из сгенерированного в Creatio кода
| <link rel="stylesheet" href="https://widget.beesender.com/prod/widget.css"> <div id="beesender-chat"></div> <script> window.beesenderchatconfig = {}; window.beesenderchatconfig.channelId = '0b5190ec-4ea4-4335-991e-1e2163760443'; window.beesenderchatconfig.title = "Beesender"; window.beesenderchatconfig.headerImageSrc = "https://pictures.beesender.com/0/Localiser-300x300.png"; window.beesenderchatconfig.connectorUrl = 'https://balance.beesender.com'; </script> <script src="https://widget.beesender.com/prod/widget.js" async></script> <script src="https://widget.beesender.com/prod/chunk-vendors.js" async></script> |
|---|
3.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" } ] |
|---|
Оставлять только строчки с каналами, которые подключены к системе.
Полный скрипт с выбором каналов будет выглядеть так:
<link rel="stylesheet" href="https://widget.beesender.com/prod/widget.css"> |
|---|
3.3 Для англоязычных клиентов:
| <link rel="stylesheet" href="https://widget.beesender.com/prod/widget.css"> <div id="beesender-chat"></div> <script> window.beesenderchatconfig = {}; window.beesenderchatconfig.channelId = '0b5190ec-4ea4-4335-991e-1e2163760443'; window.beesenderchatconfig.title = "Beesender"; window.beesenderchatconfig.headerImageSrc = "https://pictures.beesender.com/0/Localiser-300x300.png"; window.beesenderchatconfig.connectorUrl = 'https://balance.beesender.com'; 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"; </script> <script src="https://widget.beesender.com/prod/widget.js" async></script> <script src="https://widget.beesender.com/prod/chunk-vendors.js" async></script> |
|---|
3.4 С выбором каналов:
<link rel="stylesheet" href="https://widget.beesender.com/prod/widget.css"> |
|---|
4. Настройки отображения виджета
4.1 Цвет кнопки виджета
Для этого необходимо в скрипт, сгенерированный в Creatio, добавить строку
window.beesenderchatconfig.widgetButtonColor = "#ff8c00";
Цвет в кавычках менять на нужный.
4.2 Цвет внутреннего элемента кнопки виджета
Для этого надо добавить в скрипт, сгенерированный в Creatio, строку
window.beesenderchatconfig.widgetButtonColorLine = "#ffffff";
Цвет в кавычках менять на нужный.
4.3 Цвет пульсации кнопки виджета
Для этого необходимо добавить в стили:
<style>
.beesender-widget-button-pulse-animate {
background-color: #e91e63 !important;
}
</style>
! Значение #e91e63 необходимо менять на свой цвет.
5 Настройки отображения окна диалога
5.2 Изменение фотографии оператора в репликах
В скрипт добавить строку:
window.beesenderchatconfig.operatorAvatar = "https://pictures.beesender.com/0/Localiser-300x300.png";
Ссылку в кавычках менять на свою.
5.3 Открытие виджета по таймеру:
В конец <body> вставить скрипт, заменив число 5000 на нужное количество миллисекунд, после которых виджет будет открываться автоматически:
<script>
$(document).ready(function() {
setTimeout(function() {
$("#beesenderchat-widget-startbutton").trigger('click');
}, 5000);
});
</script>
5.4 Изменение первой реплики оператора
В скрипт необходимо добавить строку, изменив текст в кавычках на нужный:
window.beesenderchatconfig.welcomeMessage = {
text: "Оператор скоро ответит! Подождите, пожалуйста!"
};
5.5 Изменение системного сообщения с именем оператора
Для замены фона в стили добавить:
.beesenderchat-operatorinfo-message {
background-color: #ff6161!important;
}
Вместо #ff6161 вставить нужный цвет.
| До | После |
|---|---|
|
|
Для замены цвета текста в стили добавить:
.beesenderchat-operatorinfo-message-phrase {
color: #ffffff !important;
}
Вместо #ffffff вставить нужный цвет.
| До | После |
|---|---|
|
|
5.6 Изменение цвета и фона системного сообщения о закрытии чата
Для замены фона в стили добавить:
.beesenderchat-notification-message-phrase {
background: #ff6161 !important;
}
Вместо #ff6161 вставить нужный цвет.
| До | После |
|---|---|
|
|
Для замены цвета текста в стили добавить:
.beesenderchat-notification-message-phrase {
color: #ffffff !important;
}
Вместо #ffffff вставить нужный цвет.
| До | После |
|---|---|
|
|
5.7 Изменение цвета и фона сообщений
Для замены области вокруг сообщений в стили добавить:
.beesenderchat-comment
{background: #999999 !important;
}
Вместо #999999 вставить нужный цвет.
| До | После |
|---|---|
|
|
Для замены цвета текста сообщений оператора в стили добавить:
.beesenderchat-comment-container-admin p.beesenderchat- {
color: #000 !important;
}
Вместо #000 вставить нужный цвет.
| До | После |
|---|---|
|
|
Для замены фона сообщений оператора в стили добавить:
.beesenderchat-comment-container-admin p.beesenderchat- {
background: #fff !important;
}
Вместо #fff вставить нужный цвет.
| До | После |
|---|---|
|
|
Для замены цвета текста сообщений клиента в стили добавить:
.beesenderchat-comment-container-user p.beesenderchat- {
color: #000 !important;
}
Вместо #000 вставить нужный цвет.
| До | После |
|---|---|
 |
|
Для замены фона сообщений клиента в стили добавить:
.beesenderchat-comment-container-user p.beesenderchat- {
background: #fff !important;
}
Вместо #fff вставить нужный цвет.
| До | После |
|---|---|
|
|
5.8 Изменение цвета времени отправки сообщений
Для замены цвета времени отправки сообщений в стили добавить:
.beesender-msg-time {
color: #000 !important;
}
Вместо #000 вставить нужный цвет.
| До | После |
|---|---|
 |
|
5.9 Изменение цвета текста и фона кнопок
Для замены цвета текста кнопок в стили добавить:
button.beesenderchat-bot-button {
color: #000 !important;
}
Вместо #000 вставить нужный цвет.
| До | После |
|---|---|
|
|
Для замены фона кнопок в стили добавить:
button.beesenderchat-bot-button {
background: #999999 !important;
}
Вместо #999999 вставить нужный цвет.
| До | После |
|---|---|
|
|
5.10 Изменение цвета и прозрачности фона виджета
Для замены цвета и прозрачности фона виджета в стили добавить:
background-color: rgba(203,210,234,.86) !important;
Вместо rgba(203,210,234,.86) вставить нужный цвет и прозрачность.
Для замены цвета и прозрачности фона виджета на определенного размера экране (или при открытии виджета с моб. устройств, открытии DevTools)
в стили добавить:
{
div#beesenderchat-main-feed {
background-color: rgba(203,210,234,.86) !important;
| До | После |
|---|---|
 |
|
Вы можете установить отдельно в браузере настройку по проверке орфографии.
Полный перечень настроек
Ниже предоставлен полный перечень кастомных настроек для виджета (window.beesenderchatconfig) :
channelId : Guid
Параметр является обязательным!
Этот параметр необходим, чтобы привязать виджет к каналу в Creatio. Он генерируется автоматически при создании канала. В случае, если канал подключается, как скрипт, то настройка по умолчанию присутствует в тексте скрипта. В случае добавления канала, как vue-компонент, в код страницы необходимо добавить строчку.
Параметр является обязательным!
window.beesenderchatconfig.channelId = “Ваш channelId”;
clientId : String
Значение по умолчанию – ""
Параметр используется для передачи идентификатора пользователя сайта. Формат и способ генерации выбирается разработчиками. В дальнейшем этот идентификатор может использоваться по вашему усмотрению, например, в бизнес-процессе чат-бота.
window.beesenderchatconfig.clientId = “Ваш идентификатор”;
connectorUrl : String
Значение по умолчанию – "https://balance.beesender.com"
Параметр содержит адрес коннектора, с которым виджет устанавливает соединение по протоколу WS. При разворачивании коннектора On Site необходимо указать его адрес в этом параметре. Не рекомендуется изменять, если коннектор развернут не в режиме On Site.
window.beesenderchatconfig.connectorUrl = "https://balance.beesender.com";
title : String
Значение по умолчанию – 'Beesender'
Параметр содержит заголовок виджета.
window.beesenderchatconfig.title = "Новый заголовок";
subtitle : String
Значение по умолчанию – ''
Параметр необходимо указать, чтоб добавить подзаголовок.
window.beesenderchatconfig.subtitle = "My Subtitle";
chatMessagePlaceholder : String
Значение по умолчанию – ' Введите сообщение и нажмите Enter '
Параметр содержит плейсхолдер поля ввода, куда требуется ввести текстовое сообщение.
window.beesenderchatconfig.chatMessagePlaceholder = "Введите сообщение...";
chatButtonsPlaceholder : String
Значение по умолчанию – 'Выберите один из предложенных вариантов'
Параметр содержит плейсхолдер поля ввода, когда требуется нажать на кнопку в сообщении.
window.beesenderchatconfig.chatButtonsPlaceholder = "Выберите один из предложенных вариантов";
disableInputOnButtonMessages : Boolean
Значение по умолчанию – true
Параметр определяет, будет ли блокироваться поле для ввода сообщения, когда приходит сообщение с кнопками. Это необходимо для того, чтобы запретить пользователю вводить текст, когда требуется нажать на одну из кнопок. Установите значение false, чтобы отключить блокировку.
window.beesenderchatconfig.disableInputOnButtonMessages = false;
sendInitialMessageOnWidgetButtonClick : Boolean
Значение по умолчанию – true
Параметр определяет, будет ли отправляться сообщение от имени клиента в Creatio, когда клиент нажимает на кнопку, чтобы открыть виджет. Текст сообщения определяется параметром initialMessageText. Сообщение отправляется только один раз. Если клиент много раз отроет и закроет виджет, то сообщение отправиться только один раз. Сообщение остаётся невидимым в чате виджета, но отображается в чате Creatio. Для отключения отправки этого сообщения, установите значение false.
window.beesenderchatconfig.sendInitialMessageOnWidgetButtonClick = false;
initialMessageText : String
Значение по умолчанию – 'Клиент открыл виджет'
Параметр содержит текст сообщения, которое отправляется автоматически при нажатии кнопки открытия виджета.
window.beesenderchatconfig.initialMessageText = "Новое сообщение, когда клиент открыл виджет!";
welcomeMessage : Object
Значение по умолчанию – null
Параметр может содержать сообщение-шапку, которая будет отображаться в виде первого сообщения в чате виджета. Сообщение-шапка не является обычным сообщением. Оно не передается оператору Creatio и видно только на стороне клиента в виджете. Вариант использования: попросить клиента подождать, пока ему ответит оператор/чат-бот. Сообщение может содержать кнопки. По умолчанию сообщения шапки нет. Чтобы её добавить, проинициализируйте параметр объектом, как указано в примере. Если кнопки не нужны, то проинициализируйте только атрибут text.
window.beesenderchatconfig.welcomeMessage = {
text: "Оператор скоро ответит! Подождите, пожалуйста!",
buttons: ["Ок", "Не ок"]
};
timeFormatFuntion : Function
Значение по умолчанию –
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};
localStorageLifeTime : Number
Значение по умолчанию – 30
Параметр определяет время хранения истории переписки в виджете в минутах. После истечения указанного времени история будет удалена, а попытка отправить сообщение создаст новый чат в Creatio.
window.beesenderchatconfig.localStorageLifeTime = 100;
footerTitle : String
Значение по умолчанию – "Чаты и чатботы"
Параметр содержит текст описания который находится в footer виджета
window.beesenderchatconfig.footerTitle = "Чаты и чатботы "
footerTitleName : String
Значение по умолчанию – " Beesender"
Параметр содержит текст заголовка который находится в footer виджета
window.beesenderchatconfig.footerTitleName = "Beesender"
footerLink : String
Значение по умолчанию – "http://beesender.com"
Параметр содержит ссылку на ресурс, на который будет осуществлен редирект, после клика на текст заголовка который находится в footer виджета
window.beesenderchatconfig.footerLink = "http://beesender.com"
themeColor : String
Значение по умолчанию – "#ffcb05"
Параметр содержит шестнадцатеричный код цвета, отвечающий за главную цветовую палитру виджета.
window.beesenderchatconfig.themeColor = "#ffcb05"
enableFileUpload : Boolean
Значение по умолчанию – true
Параметр отвечает за возможность отправки файлов из виджета.
window.beesenderchatconfig.enableFileUpload = true
fileServerUrl : String
Значение по умолчанию – "https://files.beesender.com"
Параметр содержит ссылку на файловый сервер, разработанный командой "Beesender", который преобразует все файлы отправленные из виджета в ссылки.
window.beesenderchatconfig.fileServerUrl = "https://files.beesender.com"
errorFileUploadString : String
Значение по умолчанию – "Ошибка"
Параметр отвечающий за пользовательское отображение статуса отправки файла на виджете, в случае если файл не удалось отправить.
window.beesenderchatconfig.errorFileUploadString = "Ошибка"
successFileUploadString : String
Значение по умолчанию – "Загружено"
Параметр отвечающий за пользовательское отображение статуса отправки файла на виджете, в случае если файл удалось успешно отправить.
window.beesenderchatconfig.successFileUploadString = "Загружено"
beesenderDownloadIcon : String
Значение по умолчанию – "https://widget.beesender.com/src/download.svg",
Параметр отвечающий за ссылку иконки изображения, которое рендерится во время отправки пользователем файла.
window.beesenderchatconfig.beesenderDownloadIcon = "https://widget.beesender.com/src/download.svg"
isClientTyping : Boolean
Значение по умолчанию – false
Параметр отвечающий за включения режима "слежения за пользователем", во время набора пользователем текста
window.beesenderchatconfig.isClientTyping = false
operatorInfoMessage : String
Значение по умолчанию – "С вами общается {0}"
Параметр отвечающий за текст сообщения с именем и аватаром оператора, в момент его подключению к чату (Данную функциональность можно включить в crm-системе в настройках виджет-канала).
{0} - внутренний параметр, который заменится на никнейм оператора.
window.beesenderchatconfig.operatorInfoMessage = "С вами общается {0}"
startButtonSvg : String
Главная кнопка виджета
Значение по умолчанию:
Для замены нужно вставить ссылку на .svg файл
window.beesenderchatconfig.startButtonSvg = "https://pictures.beesender.com/startbtnbeesender_7.svg";
attachFileButton : String
Значение по умолчанию – "https://widget.beesender.com/src/upload-button.png"
Параметр отвечающий за ссылку иконки "Прикрепить файл"
window.beesenderchatconfig.attachFileButton = "https://widget.beesender.com/src/upload-button.png"
emojiIcon: String
Значение по умолчанию – "https://widget.beesender.com/src/smile.png"
Параметр отвечающий за ссылку иконки "Эмодзи"
window.beesenderchatconfig.emojiIcon = "https://widget.beesender.com/src/smile.png"