Website

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

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

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

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

5. Натисніть КОПІЮВАТИ

6. Натисніть ДОДАТИ

Тепер у вас є скрипт для віджета на вашому вебсайті:

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

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

Необхідно замінити window.beesenderchatconfig.title (5) та ідентифікатор каналу (4) з коду, згенерованого у 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://connector.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.2 Віджет з додатковими каналами

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

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: "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" },
   ];

4. Залиште тільки рядки з каналами, які підключені до системи.

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

6. <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:

window.beesenderchatconfig.widgetButtonColor = "#ff8c00"

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

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

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

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

window.beesenderchatconfig.widgetButtonColorLine = "#ffffff"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

window.beesenderchatconfig.themeColor = "#ffcb05"  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

window.beesenderchatconfig.title = "New Title";

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

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

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

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

window.beesenderchatconfig.subtitle = "My Subtitle";

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

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

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

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

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

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

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

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

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

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

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

window.beesenderchatconfig.footerTitle = "Chatbots"

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

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

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

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

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

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

window.beesenderchatconfig.footerTitleName = "New text"

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

Before	After

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

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

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

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

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

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

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

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

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

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

Before	After

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

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

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

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

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

Before	After