Page Comparison

...

Code Block

language	js

<link rel="stylesheet" href="https://widget.beesender.com/3.0/widget.css">
<div id="beesender-chat"></div>
<script>
    window.beesenderchatconfig = {};
    window.beesenderchatconfig.channelId = '00000000-0000-0000-0000-000000000000';
    window.beesenderchatconfig.connectorUrl = 'https://balance.beesender.com';
</script>
<script src="https://widget.beesender.com/3.0/widget.js" async></script>
<script src="https://widget.beesender.com/3.0/chunk-vendors.js" async></script>

2. Налаштування віджета

Є кілька попередньо налаштованих скриптів, у яких вам потрібно замінити window.beesenderchatconfig.channelId і вставити отриманий скрипт у код сторінки.

...

Щоб додати віджет з додатковими каналами, вам потрібно додати кілька рядків до стандартного скрипта

Code Block

language	html

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: "instagram", name : "Instagram", link : "https://www.instagram.com/beesender/" },
{ 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" },
];

Залиште тільки рядки з каналами, які підключені до системи.
Повний скрипт із вибором каналів виглядає так:

Code Block

language	html

<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.connectorUrl = 'https://connector.beesender.com';
window.beesenderchatconfig.title = "Beesender";
window.beesenderchatconfig.headerImageSrc = "https://pictures.beesender.com/0/Localiser-300x300.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.channelPanelHeader = 'Choose a channel to continue your communication ';
window.beesenderchatconfig.backToChannelChooseCaption = 'Back to the list of channels';
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: "instagram", name : "Instagram", link : "https://www.instagram.com/beesender/" },
{ type : "telegram", name : "Telegram", link : "https://t.me/DiverTestBot" },
{ 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>
<script src="https://widget.beesender.com/prod/widget.js" async></script>
<script src="https://widget.beesender.com/prod/chunk-vendors.js" async></script>

3. Налаштування зовнішнього вигляду віджета

...

3.1 Колір кнопки віджета

Щоб змінити колір кнопки віджета, додайте наступний рядок до скрипта, згенерованого в Creatio:

...

Для зміни кольору замініть значення у лапках на потрібний вам колір.

До зміни	Після зміни

3.2 Колір внутрішнього елемента кнопки віджета

Щоб змінити колір внутрішнього елемента кнопки віджета, додайте наступний рядок до скрипта, згенерованого в Creatio:

...

Замініть колір у лапках на потрібний вам колір.

3.3 Колір хвильок кнопки віджета

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

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

До зміни	Після зміни
Image Modified	Image Modified

Замініть #e91e63 на потрібний вам колір.

3.4 Зображення кнопки віджета

Щоб замінити основну кнопку віджета, вам потрібно додати наступний рядок (який містить посилання на файл зображення .svg бажаної кнопки віджета) до скрипта, згенерованого в Creatio:

Code Block

breakoutMode	wide

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

Стандартне значення:

...

4. Налаштування відображення діалогового вікна

...

4.1 Зміна кольору заголовка

Щоб змінити колір заголовка віджета, вам потрібно (2 способи):

a) додати стиль:

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

Змініть колір у лапках на потрібний вам.

...

b) додати рядок до скрипта:

Code Block
window.beesenderchatconfig.themeColor = "#ffcb05"

Параметр містить шістнадцятковий код кольору, який відповідає за основну колірну палітру віджета.

Стандартне значення: "#ffcb05”

4.2 Зміна фотографії оператора в репліках

Щоб змінити фотографію оператора в репліках, додайте наступний рядок до скрипта:

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

Змініть посилання в лапках на потрібне вам.

...

4.3 Зміна логотипу в заголовку віджета

Щоб змінити фото в заголовку віджета, додайте рядок до скрипта:

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

Змініть посилання в лапках на потрібне вам.

...

4.4 Зміна першої репліки вітання (welcomeMessage)

Параметр може містити повідомлення заголовку, яке буде відображатися як перше повідомлення у чаті віджета.

Повідомлення заголовку - це не звичайне повідомлення. Воно не передається оператору Creatio і видиме тільки на стороні клієнта у віджеті.

Сценарій використання: попросити клієнта зачекати, поки оператор/чат-бот йому відповість. Повідомлення може містити кнопки. За замовчуванням заголовкове повідомлення відсутнє.

Щоб додати його, ініціалізуйте параметр об'єктом, як вказано в прикладі. Якщо кнопки не потрібні, ініціалізуйте тільки атрибут тексту.

Code Block
window.beesenderchatconfig.welcomeMessage = { text: "The operator will answer soon! Please wait!", buttons: ["Ok", "Not ok"] };

4.5 Зміна кольору та фону системного повідомлення з іменем оператора

4.5.1 Зміна фону системного повідомлення з іменем оператора

Щоб замінити фон у стилях, додайте:

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

Вставте потрібний вам колір замість #ffffff.

До зміни	Після зміни
Image Added	Image Added

4.5.2 Зміна кольору тексту системного повідомлення з іменем оператора

Щоб замінити колір тексту у стилях, додайте:

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

Вставте потрібний вам колір замість #ffffff.

До зміни	Після зміни
Image Added	Image Added

4.6 Зміна системного повідомлення про закриття чату

Щоб відобразити системне повідомлення про закриття чату, вам потрібно активувати системну налаштування BeesenderSendCloseNotification.

Текст повідомлення можна змінити в системній налаштуванні BeesenderCloseChatMessageText.

4.6.1 Зміна кольору фону Системного повідомлення про закриття чату

Щоб замінити фон у стилях, додайте:

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

Вставте потрібний вам колір замість #ff6161.

До зміни	Після зміни
Image Added	Image Added

4.6.2 Зміна кольору тексту Системного повідомлення про закриття чату

Щоб замінити колір тексту у стилях, додайте:

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

Вставте потрібний вам колір замість #ff6161.

До зміни	Після зміни
Image Added	Image Added

4.7 Налаштування зовнішнього вигляду повідомлень

Колір області навколо повідомлень

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

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

Вставте потрібний вам колір замість #999999

До зміни	Після зміни
Image Added	Image Added

4.7.1 Колір тексту повідомлень оператора

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

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

Вставте потрібний вам колір замість #000

До зміни	Після зміни
Image Added	Image Added

4.7.2 Колір фону повідомлень оператора

Щоб замінити фон повідомлень оператора у стилях, додайте:

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

Вставте потрібний вам колір замість #fff

До зміни	Після зміни
Image Added	Image Added

4.7.3 Колір тексту повідомлень клієнта

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

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

Вставте потрібний вам колір замість #000

До зміни	Після зміни
Image Added	Image Added

4.7.4 Колір фону повідомлень клієнта

Щоб замінити фон повідомлень клієнта у стилях, додайте:

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

Вставте потрібний вам колір замість #fff

До зміни	Після зміни
Image Added	Image Added

4.8 Зміна кольору часу відправлення повідомлення

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

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

Вставте потрібний вам колір замість #000

До зміни	Після зміни
Image Added	Image Added

4.9 Зміна кольору та прозорості фону віджета

Щоб замінити колір та прозорість фону віджета, вам потрібно додати до стиля:

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

Замість rgba(203,210,234,.86) вставте бажаний колір та прозорість.

Щоб замінити колір та прозорість фону віджета при певному розмірі екрану (або при відкритті віджета з мобільних пристроїв, відкриванні DevTools) вам потрібно додати до стиля:

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

До зміни	Після зміни
Image Added	Image Added

4.10 Зміна назви віджета

Стандартне значення: "Beesender"
Щоб змінити назву у заголовку віджета, вам потрібно додати до скрипта:

Code Block
window.beesenderchatconfig.title = "New Title";

Вставте потрібний вам текст замість New Title (назва компанії)

До зміни	Після зміни
Image Added	Image Added

4.11 Зміна підзаголовка

Стандартне значення: " "

Code Block
window.beesenderchatconfig.subtitle = "My Subtitle";

Щоб додати або змінити підзаголовок у заголовку віджета, вам потрібно додати до скрипта:
Вставте потрібний вам текст замість My Subtitle

До зміни	Після зміни
Image Added	Image Added

4.12 Зміна тексту заповнювача поля вводу

Стандартне значення: 'Enter a message ...'

Параметр містить заповнювач для поля вводу, де ви хочете ввести текстове повідомлення. Щоб змінити текст заповнювача, вам потрібно додати до скрипта:

Code Block
window.beesenderchatconfig.chatMessagePlaceholder = "Enter a message ...";

Вставте потрібний вам текст замість "Enter a message ..."

До зміни	Після зміни
Image Added	Image Added

4.13 Зміна тексту опису у нижньому колонтитулі віджета

Стандартне значення: Chats and Chatbots

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

Code Block
window.beesenderchatconfig.footerTitle = "Chatbots"

Вставте потрібний вам текст замість Chats and Chatbots

До зміни	Після зміни
Image Added	Image Added

4.14 Зміна посилання на ресурс у нижньому колонтитулі віджета

4.14.1 Зміна назви заголовку нижнього колонтитула

Стандартне значення: Beesender

Щоб змінити назву заголовку нижнього колонтитула, вам потрібно додати до скрипта:

Code Block
window.beesenderchatconfig.footerTitleName = "New text"

Вставте потрібний вам текст замість Beesender

Before	After
Image Added	Image Added

4.14.2 Зміна посилання на ресурс у нижньому колонтитулі

Стандартне значення: "Beesender"

Щоб змінити посилання на ресурс у нижньому колонтитулі віджета, вам потрібно додати до скрипта:

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

Змініть посилання в лапках на потрібне вам.

4.15 Зміна статусу успішного завантаження файлу з віджета

Стандартне значення: Loaded

Параметр відповідає за відображення користувачеві статусу відправки файлу у віджеті, якщо файл було успішно відправлено. Щоб змінити відображення користувачеві успішного завантаження файлу з віджета, вам потрібно додати рядок до скрипта:

Code Block
window.beesenderchatconfig.successFileUploadString = "Successfully <br> loaded"

Вставте потрібний вам текст замість Loaded

Before	After
Image Added	Image Added

4.16 Зміна значка зображення при завантаженні файлу користувачем

Стандартне значення: “https://widget.beesender.com/src/download.svg"

Параметр відповідає за посилання на зображення значка, яке відображається, коли користувач відправляє файл. Щоб змінити значок, вам потрібно додати до скрипта:

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

Змініть посилання в лапках на потрібне вам

Before	After
Image Added	Image Added

Versions Compared

Old Version 2

New Version 3

Key

2. Налаштування віджета

3. Налаштування зовнішнього вигляду віджета

3.1 Колір кнопки віджета

3.2 Колір внутрішнього елемента кнопки віджета

3.3 Колір хвильок кнопки віджета

3.4 Зображення кнопки віджета

4. Налаштування відображення діалогового вікна

4.1 Зміна кольору заголовка

4.2 Зміна фотографії оператора в репліках

4.3 Зміна логотипу в заголовку віджета

4.4 Зміна першої репліки вітання (welcomeMessage)

4.5 Зміна кольору та фону системного повідомлення з іменем оператора

4.5.1 Зміна фону системного повідомлення з іменем оператора

4.5.2 Зміна кольору тексту системного повідомлення з іменем оператора

4.6 Зміна системного повідомлення про закриття чату

4.6.1 Зміна кольору фону Системного повідомлення про закриття чату

4.6.2 Зміна кольору тексту Системного повідомлення про закриття чату

4.7 Налаштування зовнішнього вигляду повідомлень

Колір області навколо повідомлень

4.7.1 Колір тексту повідомлень оператора

4.7.2 Колір фону повідомлень оператора

4.7.3 Колір тексту повідомлень клієнта

4.7.4 Колір фону повідомлень клієнта

4.8 Зміна кольору часу відправлення повідомлення

4.9 Зміна кольору та прозорості фону віджета

4.10 Зміна назви віджета

4.11 Зміна підзаголовка

4.12 Зміна тексту заповнювача поля вводу

4.13 Зміна тексту опису у нижньому колонтитулі віджета

4.14 Зміна посилання на ресурс у нижньому колонтитулі віджета

4.14.1 Зміна назви заголовку нижнього колонтитула

4.14.2 Зміна посилання на ресурс у нижньому колонтитулі

4.15 Зміна статусу успішного завантаження файлу з віджета

4.16 Зміна значка зображення при завантаженні файлу користувачем