WebSite

Owned by Valery Tanchev (Unlicensed)
Last updated: Jan 05, 2024 by Vasilina Grosheva (Unlicensed)
13 min read

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

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


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

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

Домен не должен содержать / и http://. Должен быть уникальным для каждого вебсайта. Если на один вебсайт вешается несколько виджетов (на разные страницы), то названия этих страниц указываются до домена. Например: test.beesender.com это страница beesender.com/test

Обратите внимание на то, что нельзя создать несколько каналов типа "WebSite" с одинаковым доменом. Если будет создан новый канал, использующий тот же домен, старый канал автоматически перестанет работать.

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

 

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

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

 

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

Для добавления виджета без дополнительных каналов нужно заменить window.beesenderchatconfig.title (название компании) и window.beesenderchatconfig.channelId из сгенерированного в 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>

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

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 Цвет пульсации кнопки виджета

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

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

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

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

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

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

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

 

 

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

До

После

До

После

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

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

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

До

После

До

После

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

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

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

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

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

До

После

До

После

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

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

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

До

После

До

После

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

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

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

До

После

До

После

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

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

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

До

После

До

После

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

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

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

До

После

До

После

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

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

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

До

После

До

После



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

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

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

До

После

До

После

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

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

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

До

После

До

После



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

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

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

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

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

До

После

До

После

 

Вы можете установить отдельно в браузере настройку по проверке орфографии. 

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

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

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

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

До

После

До

После

 

 

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

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

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

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

До

После

До

После

 

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

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

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

До

После

До

После

 

 

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

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

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

До

После

До

После

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

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

До

После

До

После

 

 

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

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

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

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

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

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

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

До

После

До

После

 

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

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

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

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

До

После

До

После

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

До

После

До

После

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

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

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

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

До

После

До

После

 

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

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

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

До

После

До

После

 

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

До

После

До

После

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

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

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

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

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

function (timestamp) {

var date = new Date(timestamp);

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

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

 }

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

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

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

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

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

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

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

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

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

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

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