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

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

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

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

Далее представлен код, который был сгенерирован для виджета, в нем Вам необходимо лишь заменить слово "Title" на название компании или любой другой заголовок, который будет отражаться в виджете

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

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

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

Нужно заменить window.beesenderchatconfig.title (название компании) и ID из сгенерированного в Creatio кода

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

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

window.beesenderchatconfig.menuButtonIcon = 'https://pictures.beesender.com/0/More.png';
window.beesenderchatconfig.showChannelPanel = true;
indow.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. Настройки отображения виджета

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 необходимо  менять на свой цвет.

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

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

В стили добавить:

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

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

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

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

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

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

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

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

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

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

В скрипт необходимо добавить строку, изменив текст в кавычках на нужный:

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

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

Для замены фона в стили добавить:

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

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

До	После

Для замены цвета текста в стили добавить:

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

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

До	После

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

Для замены фона в стили добавить:

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

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

До	После

Для замены цвета текста в стили добавить:

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

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

До	После

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

До	После

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

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

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

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

До	После

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

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

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

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

До	После

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

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

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

До	После

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

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

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;
}}

До	После

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

Ниже предоставлен полный перечень кастомных настроек для виджета (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"