Website
- Tatiana Vecherskaia (Unlicensed)
- 1.1 1. Додавання каналу Вебсайт до Creatio
- 1.2 2. Налаштування віджета
- 1.3 3. Налаштування зовнішнього вигляду віджета
- 1.4 4. Налаштування відображення діалогового вікна
- 1.4.1 4.1 Зміна кольору заголовка
- 1.4.2 4.2 Зміна фотографії оператора в репліках
- 1.4.3 4.3 Зміна логотипу в заголовку віджета
- 1.4.4 4.4 Зміна першої репліки вітання (welcomeMessage)
- 1.4.5 4.5 Зміна кольору та фону системного повідомлення з іменем оператора
- 1.4.5.1 4.5.1 Зміна фону системного повідомлення з іменем оператора
- 1.4.5.2 4.5.2 Зміна кольору тексту системного повідомлення з іменем оператора
- 1.4.5.3 4.6 Зміна системного повідомлення про закриття чату
- 1.4.5.4 4.6.1 Зміна кольору фону Системного повідомлення про закриття чату
- 1.4.5.5 4.6.2 Зміна кольору тексту Системного повідомлення про закриття чату
- 1.4.6 4.7 Налаштування зовнішнього вигляду повідомлень
- 1.4.7 4.8 Зміна кольору часу відправлення повідомлення
- 1.4.8 4.9 Зміна кольору та прозорості фону віджета
- 1.4.9 4.10 Зміна назви віджета
- 1.4.10 4.11 Зміна підзаголовка
- 1.4.11 4.12 Зміна тексту заповнювача поля вводу
- 1.4.12 4.13 Зміна тексту опису у нижньому колонтитулі віджета
- 1.4.13 4.14 Зміна посилання на ресурс у нижньому колонтитулі віджета
- 1.4.14 4.15 Зміна статусу успішного завантаження файлу з віджета
- 1.4.15 4.16 Зміна значка зображення при завантаженні файлу користувачем
- 1.4.16 4.17 Зміна тексту повідомлення з ім'ям та аватаром оператора на момент його підключення до чату
- 1.4.17 4.18 Зміна значка "Прикріпити файл"
- 1.4.18 4.19 Зміна значка Emoji
- 1.4.19 4.20 Зміна статусу помилки відправлення файлу з віджета
- 1.4.20 4.21 Зміна тексту та кольору фону кнопок
- 1.4.20.1 4.21.1 Зміна кольору тексту кнопок
- 1.4.20.2 4.21.1 Зміна кольору фону кнопок
- 1.4.21 4.22 Зміна заповнювача тексту для поля вводу перед натисканням кнопки
- 2 Інші налаштування
- 2.1 5.1 Опція таймера відкриття
- 2.2 5.2 Прив'язка віджета до каналу
- 2.3 5.3 Передача ID клієнта сайту
- 2.4 5.4 Зміна URL коннектора
- 2.5 5.5 Блокування поля вводу під час повідомлення з кнопками
- 2.6 5.6 Зміна та відключення першого повідомлення від клієнта при відкритті віджета
- 2.7 5.7 Час зберігання історії чату у віджеті
- 2.8 5.8 Зміна формату часу повідомлення
- 2.9 5.9 Можливість відправлення файлів з віджета
- 2.10 5.10 Зміна файлового сервера
- 2.11 5.11 Режим відстеження користувача під час набору тексту
1. Додавання каналу Вебсайт до Creatio
Перейдіть до Налаштування> Налаштування чату Beesender > Канали
Натисніть і виберіть WebSite
Заповніть стандартні поля та виберіть прапорець "Як скрипт". Натисніть ОТРИМАТИ КОД
Домен не повинен містити / і http://. Має бути унікальним для кожного вебсайту.
Якщо кілька віджетів встановлено на одному вебсайті (на різних сторінках), то назви цих сторінок вказуються перед доменом.
Наприклад: test.beesender.com - це сторінка beesender.com/test
Неможливо створити більше одного каналу Вебсайт з одним і тим самим доменом. Старий канал автоматично перестане працювати, коли створюється новий канал з тим самим доменом.
Натисніть КОПІЮВАТИ
Натисніть ДОДАТИ
Тепер у вас є скрипт для віджета на вашому вебсайті:
<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 Віджет з додатковими каналами
Щоб додати віджет з додатковими каналами, вам потрібно додати кілька рядків до стандартного скрипта
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. Налаштування зовнішнього вигляду віджета
3.1 Колір кнопки віджета
Щоб змінити колір кнопки віджета, додайте наступний рядок до скрипта, згенерованого в Creatio:
Для зміни кольору замініть значення у лапках на потрібний вам колір.
До зміни | Після зміни |
|---|---|
3.2 Колір внутрішнього елемента кнопки віджета
Щоб змінити колір внутрішнього елемента кнопки віджета, додайте наступний рядок до скрипта, згенерованого в Creatio:
Замініть колір у лапках на потрібний вам колір.
3.3 Колір хвильок кнопки віджета
Щоб змінити колір хвильок кнопки віджета, додайте наступний рядок до скрипта, згенерованого в Creatio:
До зміни | Після зміни |
|---|---|
|
|
Замініть #e91e63 на потрібний вам колір.
3.4 Зображення кнопки віджета
Щоб замінити основну кнопку віджета, вам потрібно додати наступний рядок (який містить посилання на файл зображення .svg бажаної кнопки віджета) до скрипта, згенерованого в Creatio:
Стандартне значення:
4. Налаштування відображення діалогового вікна
4.1 Зміна кольору заголовка
Щоб змінити колір заголовка віджета, вам потрібно (2 способи):
a) додати стиль:
Змініть колір у лапках на потрібний вам.
b) додати рядок до скрипта:
Параметр містить шістнадцятковий код кольору, який відповідає за основну колірну палітру віджета.
Стандартне значення: "#ffcb05”
4.2 Зміна фотографії оператора в репліках
Щоб змінити фотографію оператора в репліках, додайте наступний рядок до скрипта:
Змініть посилання в лапках на потрібне вам.
4.3 Зміна логотипу в заголовку віджета
Щоб змінити фото в заголовку віджета, додайте рядок до скрипта:
Змініть посилання в лапках на потрібне вам.
4.4 Зміна першої репліки вітання (welcomeMessage)
Параметр може містити повідомлення заголовку, яке буде відображатися як перше повідомлення у чаті віджета.
Повідомлення заголовку - це не звичайне повідомлення. Воно не передається оператору Creatio і видиме тільки на стороні клієнта у віджеті.
Сценарій використання: попросити клієнта зачекати, поки оператор/чат-бот йому відповість. Повідомлення може містити кнопки. За замовчуванням заголовкове повідомлення відсутнє.
Щоб додати його, ініціалізуйте параметр об'єктом, як вказано в прикладі. Якщо кнопки не потрібні, ініціалізуйте тільки атрибут тексту.
4.5 Зміна кольору та фону системного повідомлення з іменем оператора
4.5.1 Зміна фону системного повідомлення з іменем оператора
Щоб замінити фон у стилях, додайте:
Вставте потрібний вам колір замість #ffffff.
До зміни | Після зміни |
|---|---|
4.5.2 Зміна кольору тексту системного повідомлення з іменем оператора
Щоб замінити колір тексту у стилях, додайте:
Вставте потрібний вам колір замість #ffffff.
До зміни | Після зміни |
|---|---|
4.6 Зміна системного повідомлення про закриття чату
Щоб відобразити системне повідомлення про закриття чату, вам потрібно активувати системну налаштування BeesenderSendCloseNotification.
Текст повідомлення можна змінити в системній налаштуванні BeesenderCloseChatMessageText.
4.6.1 Зміна кольору фону Системного повідомлення про закриття чату
Щоб замінити фон у стилях, додайте:
Вставте потрібний вам колір замість #ff6161.
До зміни | Після зміни |
|---|---|
4.6.2 Зміна кольору тексту Системного повідомлення про закриття чату
Щоб замінити колір тексту у стилях, додайте:
Вставте потрібний вам колір замість #ff6161.
До зміни | Після зміни |
|---|---|
4.7 Налаштування зовнішнього вигляду повідомлень
Колір області навколо повідомлень
Щоб замінити область навколо повідомлень у стилях, додайте:
Вставте потрібний вам колір замість #999999
До зміни | Після зміни |
|---|---|
4.7.1 Колір тексту повідомлень оператора
Щоб замінити колір тексту повідомлень оператора у стилях, додайте:
Вставте потрібний вам колір замість #000
До зміни | Після зміни |
|---|---|
4.7.2 Колір фону повідомлень оператора
Щоб замінити фон повідомлень оператора у стилях, додайте:
Вставте потрібний вам колір замість #fff
До зміни | Після зміни |
|---|---|
4.7.3 Колір тексту повідомлень клієнта
Щоб замінити колір тексту повідомлень клієнта у стилях, додайте:
Вставте потрібний вам колір замість #000
До зміни | Після зміни |
|---|---|
4.7.4 Колір фону повідомлень клієнта
Щоб замінити фон повідомлень клієнта у стилях, додайте:
Вставте потрібний вам колір замість #fff
До зміни | Після зміни |
|---|---|
|
4.8 Зміна кольору часу відправлення повідомлення
Щоб замінити колір часу відправлення повідомлень у стилях, додайте:
Вставте потрібний вам колір замість #000
До зміни | Після зміни |
|---|---|
|
4.9 Зміна кольору та прозорості фону віджета
Щоб замінити колір та прозорість фону віджета, вам потрібно додати до стиля:
Замість rgba(203,210,234,.86) вставте бажаний колір та прозорість.
Щоб замінити колір та прозорість фону віджета при певному розмірі екрану (або при відкритті віджета з мобільних пристроїв, відкриванні DevTools) вам потрібно додати до стиля:
До зміни | Після зміни |
|---|---|
|
|
4.10 Зміна назви віджета
Стандартне значення: "Beesender"
Щоб змінити назву у заголовку віджета, вам потрібно додати до скрипта:
Вставте потрібний вам текст замість New Title (назва компанії)
До зміни | Після зміни |
|---|---|
4.11 Зміна підзаголовка
Стандартне значення: " "
Щоб додати або змінити підзаголовок у заголовку віджета, вам потрібно додати до скрипта:
Вставте потрібний вам текст замість My Subtitle
До зміни | Після зміни |
|---|---|
|
4.12 Зміна тексту заповнювача поля вводу
Стандартне значення: 'Enter a message ...'
Параметр містить заповнювач для поля вводу, де ви хочете ввести текстове повідомлення. Щоб змінити текст заповнювача, вам потрібно додати до скрипта:
Вставте потрібний вам текст замість "Enter a message ..."
До зміни | Після зміни |
|---|---|
4.13 Зміна тексту опису у нижньому колонтитулі віджета
Стандартне значення: Chats and Chatbots
Щоб змінити текст опису, який знаходиться у нижньому колонтитулі віджета, вам потрібно додати до скрипта:
Вставте потрібний вам текст замість Chats and Chatbots
До зміни | Після зміни |
|---|---|
4.14 Зміна посилання на ресурс у нижньому колонтитулі віджета
4.14.1 Зміна назви заголовку нижнього колонтитула
Стандартне значення: Beesender
Щоб змінити назву заголовку нижнього колонтитула, вам потрібно додати до скрипта:
Вставте потрібний вам текст замість Beesender
До зміни | Після зміни |
|---|---|
4.14.2 Зміна посилання на ресурс у нижньому колонтитулі
Стандартне значення: "Beesender"
Щоб змінити посилання на ресурс у нижньому колонтитулі віджета, вам потрібно додати до скрипта:
Змініть посилання в лапках на потрібне вам.
4.15 Зміна статусу успішного завантаження файлу з віджета
Стандартне значення: Loaded
Параметр відповідає за відображення користувачеві статусу відправки файлу у віджеті, якщо файл було успішно відправлено. Щоб змінити відображення користувачеві успішного завантаження файлу з віджета, вам потрібно додати рядок до скрипта:
Вставте потрібний вам текст замість Loaded
До зміни | Після зміни |
|---|---|
4.16 Зміна значка зображення при завантаженні файлу користувачем
Стандартне значення: “https://widget.beesender.com/src/download.svg"
Параметр відповідає за посилання на зображення значка, яке відображається, коли користувач відправляє файл. Щоб змінити значок, вам потрібно додати до скрипта:
Змініть посилання в лапках на потрібне вам
До зміни | Після зміни |
|---|---|
4.17 Зміна тексту повідомлення з ім'ям та аватаром оператора на момент його підключення до чату
Стандартне значення:"Your agent is {0}"
Параметр відповідає за текст повідомлення з ім'ям та аватаром оператора на момент його підключення до чату (ця функція може бути активована в CRM-системі у налаштуваннях каналу віджета). Щоб змінити текст повідомлення, вам потрібно додати рядок до скрипта:
{0} - внутрішній параметр, який буде замінений на псевдонім оператора.
Вставте потрібний вам текст замість Your agent is {0}
4.18 Зміна значка "Прикріпити файл"
Стандартне значення: "https://widget.beesender.com/src/upload-button.png"
Щоб змінити посилання на зображення значка "Прикріпити файл", вам потрібно додати рядок до скрипта:
Змініть посилання в лапках на потрібне вам
4.19 Зміна значка Emoji
Стандартне значення:"https://widget.beesender.com/src/smile.png"
Щоб змінити посилання на значок "Emoji" у нижньому колонтитулі віджета, вам потрібно додати до скрипта:
Змініть посилання в лапках на потрібне вам
4.20 Зміна статусу помилки відправлення файлу з віджета
Стандартне значення: Send error
Параметр відповідає за відображення користувачеві статусу відправлення файлу у віджеті, у випадку, якщо файл не може бути відправлений. Щоб змінити відображення користувачеві статусу помилки відправлення файлу, вам потрібно додати до скрипта:
Вставте потрібний вам текст замістьError loading
До зміни | Після зміни |
|---|---|
4.21 Зміна тексту та кольору фону кнопок
4.21.1 Зміна кольору тексту кнопок
Щоб замінити колір тексту кнопок, вам потрібно додати до стилів:
Вставте потрібний вам колір замість #000
До зміни | Після зміни |
|---|---|
4.21.1 Зміна кольору фону кнопок
Щоб замінити колір фону, вам потрібно додати до стилів:
Вставте потрібний вам колір замість #999999
До зміни | Після зміни |
|---|---|
4.22 Зміна заповнювача тексту для поля вводу перед натисканням кнопки
Стандартне значення: 'Please select one of the following options'.
Параметр містить заповнювач для поля вводу, коли ви хочете натиснути на кнопку у повідомленні. Щоб змінити текст заповнювача, вам потрібно додати до скрипта:
Вставте потрібний вам текст замість Choose one of the options
До зміни | Після зміни |
|---|---|
|
Інші налаштування
Нижче наведено повний список налаштувань віджета (window.beesenderchatconfig):
5.1 Опція таймера відкриття
Щоб віджет відкривався автоматично, потрібно вставити скрипт у кінець тега <body>, заменiвши число 5000 на бажану кiлкiсть мiлiсекунд:
5.2 Прив'язка віджета до каналу
Цей параметр є обов'язковим! Цей параметр необхідний для прив'язки віджета до каналу в Creatio. Він генерується автоматично при створенні каналу.
Якщо канал підключений як скрипт, то в тексті скрипта присутнє стандартне налаштування.
Якщо ви додаєте канал як компонент vue, потрібно додати рядок до коду сторінки.
5.3 Передача ID клієнта сайту
Стандартне значення: ""
Параметр використовується для передачі ID користувача сайту. Формат та метод генерації обираються розробниками. У майбутньому цей ідентифікатор може бути використаний на ваш розсуд, наприклад, у бізнес-процесі чат-бота. Щоб передати ID клієнта сайту, потрібно додати до скрипта:
5.4 Зміна URL коннектора
Стандартне значення: "https://balance.beesender.com"
Параметр містить адресу коннектора, з яким віджет встановлює зв'язок за допомогою протоколу WS. При розгортанні коннектора On Site слід вказати його адресу у цьому параметрі. Змінювати не рекомендується, якщо коннектор не розгорнутий у режимі On Site.
Змініть посилання на потрібне вам замiсть https://connector.beesender.com
5.5 Блокування поля вводу під час повідомлення з кнопками
Стандартне значення:true
Параметр визначає, чи буде блокуватися поле для введення повідомлення, коли приходить повідомлення з кнопками.
Це необхідно, щоб запобігти введенню тексту користувачем, коли потрібно натиснути на одну з кнопок.
Встановіть false, щоб вимкнути блокування.
5.6 Зміна та відключення першого повідомлення від клієнта при відкритті віджета
5.6.1 Відправлення першого повідомлення, коли клієнт відкриває віджет
Стандартне значення: true
Параметр визначає, чи буде відправлене повідомлення від імені клієнта до Creatio, коли клієнт натисне на кнопку для відкриття віджета.
Текст повідомлення визначається параметром initialMessageText. Повідомлення відправляється лише один раз. Якщо клієнт багаторазово відкриває та закриває віджет, повідомлення буде відправлене лише один раз.
Повідомлення залишається невидимим у чаті віджета, але відображається у чаті Creatio. Щоб вимкнути відправлення цього повідомлення, встановіть false.
5.6.2 Зміна тексту першого повідомлення, коли клієнт відкриває віджет
Стандартне значення:"Client opened widget"
Параметр містить текст повідомлення, яке автоматично відправляється при натисканні на кнопку для відкриття віджета.
До зміни | Після зміни |
|---|---|
|
5.7 Час зберігання історії чату у віджеті
Стандартне значення: 30
Параметр визначає час зберігання історії листування у віджеті в хвилинах.
Після закінчення вказаного часу історія буде видалена, і спроба відправити повідомлення створить новий чат у Creatio. Щоб змінити час зберігання локального сховища, потрібно додати до скрипта:
5.8 Зміна формату часу повідомлення
Стандартне значення:
Параметр містить функцію, яка приймає кількість мілісекунд і повертає рядок часу. Використовується для вказівки формату часу повідомлень.
Використовуйте свою реалізацію для зміни формату часу.
5.9 Можливість відправлення файлів з віджета
Стандартне значення: true
Параметр відповідає за можливість відправлення файлів з віджета.
5.10 Зміна файлового сервера
Стандартне значення: "https://files.beesender.com"
Параметр містить посилання на файловий сервер, розроблений командою Beesender, який перетворює всі файли, відправлені з віджета, на посилання. Щоб змінити файловий сервер, потрібно додати до скрипта:
Змініть посилання в лапках на потрібне вам
5.11 Режим відстеження користувача під час набору тексту
Стандартне значення:false
Параметр відповідає за включення режиму "відстеження користувача" під час набору тексту. Щоб включити режим відстеження користувача, потрібно додати до скрипта:
Увага: Вставте цей код у кінець сторінки!