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>

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

Є кілька попередньо налаштованих скриптів, у яких вам потрібно замінити 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.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";

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