Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

1. Додавання каналу Вебсайт до Creatio

  1. Перейдіть до Налаштування> Налаштування чату Beesender > Канали

  2. Натисніть ➕ і виберіть WebSite

...

  1. Заповніть стандартні поля та виберіть прапорець "Як скрипт". Натисніть ОТРИМАТИ КОД

...

Code Block
languagejs
<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 і вставити отриманий скрипт у код сторінки.

...

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

  2. Code Block
    languagehtml
    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" },
    ];
  3. Залиште тільки рядки з каналами, які підключені до системи.

  4. Повний скрипт із вибором каналів виглядає так:

  5. Code Block
    languagehtml
    <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
breakoutModewide
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 AddedImage Added

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

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

Code Block

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

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

До зміни

Після зміни

Image AddedImage Added

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

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

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

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

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

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

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

До зміни

Після зміни

Image AddedImage Added

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

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

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

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

До зміни

Після зміни

Image AddedImage Added

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

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

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

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

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

До зміни

Після зміни

Image AddedImage Added

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

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

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

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

До зміни

Після зміни

Image AddedImage Added


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

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

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

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

До зміни

Після зміни

Image AddedImage Added

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

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

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

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

До зміни

Після зміни

Image AddedImage Added

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

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

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

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

До зміни

Після зміни

Image AddedImage Added

 

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

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

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

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

До зміни

Після зміни

Image AddedImage 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 AddedImage 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 AddedImage Added

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

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

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

Code Block
window.beesenderchatconfig.footerTitle = "Chatbots"

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

До зміни

Після зміни

Image AddedImage Added

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

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

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

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

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

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

До зміни

Після зміни

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

До зміни

Після зміни

Image AddedImage Added

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

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

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

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

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

До зміни

Після зміни

Image AddedImage Added

4.17 Зміна тексту повідомлення з ім'ям та аватаром оператора на момент його підключення до чату

Стандартне значення:"Your agent is {0}"

Параметр відповідає за текст повідомлення з ім'ям та аватаром оператора на момент його підключення до чату (ця функція може бути активована в CRM-системі у налаштуваннях каналу віджета). Щоб змінити текст повідомлення, вам потрібно додати рядок до скрипта:

Code Block
window.beesenderchatconfig.operatorInfoMessage = "Your agent is {0}"

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

Вставте потрібний вам текст замість Your agent is {0}

4.18 Зміна значка "Прикріпити файл"

Стандартне значення: "https://widget.beesender.com/src/upload-button.png"

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

Code Block
window.beesenderchatconfig.attachFileButton = "https://widget.beesender.com/src/upload-button.png"

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

4.19 Зміна значка Emoji

Стандартне значення:"https://widget.beesender.com/src/smile.png"

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

Code Block
window.beesenderchatconfig.emojiIcon = "https://widget.beesender.com/src/smile.png"

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

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

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

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

Code Block
window.beesenderchatconfig.errorFileUploadString = "Error loading"

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

До зміни

Після зміни

Image AddedImage Added

4.21 Зміна тексту та кольору фону кнопок

4.21.1 Зміна кольору тексту кнопок

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

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

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

До зміни

Після зміни

Image AddedImage Added

4.21.1 Зміна кольору фону кнопок

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

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

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

До зміни

Після зміни

Image AddedImage Added

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

Стандартне значення: 'Please select one of the following options'.

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

Code Block
window.beesenderchatconfig.chatButtonsPlaceholder = "Choose one of the options";

Вставте потрібний вам текст замість Choose one of the options

До зміни

Після зміни

Image AddedImage Added

Інші налаштування

Нижче наведено повний список налаштувань віджета (window.beesenderchatconfig):

5.1 Опція таймера відкриття

Щоб віджет відкривався автоматично, потрібно вставити скрипт у кінець тега <body>, заменiвши число 5000 на бажану кiлкiсть мiлiсекунд:

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

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

Цей параметр є обов'язковим! Цей параметр необхідний для прив'язки віджета до каналу в Creatio. Він генерується автоматично при створенні каналу.

Якщо канал підключений як скрипт, то в тексті скрипта присутнє стандартне налаштування.

Якщо ви додаєте канал як компонент vue, потрібно додати рядок до коду сторінки.

Code Block
window.beesenderchatconfig.channelId = “Your channelId”;

5.3 Передача ID клієнта сайту

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

Параметр використовується для передачі ID користувача сайту. Формат та метод генерації обираються розробниками. У майбутньому цей ідентифікатор може бути використаний на ваш розсуд, наприклад, у бізнес-процесі чат-бота. Щоб передати ID клієнта сайту, потрібно додати до скрипта:

Code Block
window.beesenderchatconfig.clientId = “Your identifier”;

5.4 Зміна URL коннектора

Стандартне значення: "https://balance.beesender.com"

Параметр містить адресу коннектора, з яким віджет встановлює зв'язок за допомогою протоколу WS. При розгортанні коннектора On Site слід вказати його адресу у цьому параметрі. Змінювати не рекомендується, якщо коннектор не розгорнутий у режимі On Site.

Code Block
window.beesenderchatconfig.connectorUrl = "https://connector.beesender.com";

Змініть посилання на потрібне вам замiсть https://connector.beesender.com

5.5 Блокування поля вводу під час повідомлення з кнопками

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

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

Це необхідно, щоб запобігти введенню тексту користувачем, коли потрібно натиснути на одну з кнопок.

Встановіть false, щоб вимкнути блокування.

Code Block
window.beesenderchatconfig.disableInputOnButtonMessages = false;

5.6 Зміна та відключення першого повідомлення від клієнта при відкритті віджета

5.6.1 Відправлення першого повідомлення, коли клієнт відкриває віджет

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

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

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

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

Code Block
window.beesenderchatconfig.sendInitialMessageOnWidgetButtonClick = false;

5.6.2 Зміна тексту першого повідомлення, коли клієнт відкриває віджет

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

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

Code Block
window.beesenderchatconfig.initialMessageText = "A new message when the client opened the widget!";

До зміни

Після зміни

Image Added

 

Image Added

5.7 Час зберігання історії чату у віджеті

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

Параметр визначає час зберігання історії листування у віджеті в хвилинах.

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

Code Block
window.beesenderchatconfig.localStorageLifeTime = 100;

5.8 Зміна формату часу повідомлення

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

Code Block
function (timestamp) {
var date = new Date (timestamp);
return `$ {date.getHours ()}: $ {(date.getMinutes () <10)? "0" +
date.getMinutes (): date.getMinutes ()} `;
}

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

Використовуйте свою реалізацію для зміни формату часу.

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

5.9 Можливість відправлення файлів з віджета

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

Параметр відповідає за можливість відправлення файлів з віджета.

Code Block
window.beesenderchatconfig.enableFileUpload = true

5.10 Зміна файлового сервера

Стандартне значення: "https://files.beesender.com"

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

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

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

5.11 Режим відстеження користувача під час набору тексту

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

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

Code Block
window.beesenderchatconfig.isClientTyping = false
Note

Увага: Вставте цей код у кінець сторінки!