Якщо ви вже використовуєте віджет відкритих ліній на своєму сайті, та маєте потребу ідентифікувати гостьові сесії в Онлайн-чаті, то можна використати запропоноване у цій статті рішення.
Для неавторизованих користувачів у нас є форми контактних даних.
Для авторизованих користувачів є цікавіше рішення, яке не змусить ваших клієнтів повторно заповнювати контактну інформацію.
Існує два варіанта вирішення питання ідентифікації таких клієнтів: перший для сайтів на платформі «Бітрікс: Управління сайтом», другий - для сайтів на інших системах:
1. «Бітрікс: Управління сайтом»
Для «Бітрікс: Управління сайтом» вам достатньо на сторінку, де підключений віджет, додати компонент b24connector.openline.info (компонент модуля Інтеграція з Бітрікс24). Компонент автоматично передає віджету контактні дані авторизованого клієнта, а також дає можливість додатково налаштувати дані що передаються.
2. Ручне налаштування
Для сторонніх систем (наприклад ваш біллінг) можна скористатись Javascript-кодом, який також потібно розмістити на сторінці з підключеним віджетом:
Загальний код, за допомогою якого доступне гнучке налаштування віджету під ваші вимоги, виглядає так:
<script type="text/javascript">window.addEventListener('onBitrixLiveChat', function(event) { var widget = event.detail.widget; // 1. Встановлення зовнішньої авторизації користувача ... // 2. Встановлення додаткових даних ... // 3. Обробка подій ... });</script>
Методи работи з віджетом:
widget.open()
– відкриття віджета;widget.close()
– закриття віджета;widget.subscribe()
– підписка на подію;widget.setUserRegisterData()
– встановлення зовнішньої авторизації користувача;widget.setCustomData()
– встановлення додаткових даних;
1. Встановлення зовнішньої авторизації користувача
<script type="text/javascript">window.addEventListener('onBitrixLiveChat', function(event) { var widget = event.detail.widget; // Встановлення зовнішньої авторизації користувача widget.setUserRegisterData({ 'hash': '12b42ebcec7e3c26a313272c26efddbd', 'name': 'Віктор', 'lastName': 'Іванов', 'avatar': 'http://files.shelenkov.com/images/avatar-ivanov.jpg', 'email': 'victor@ivanov.ru', 'www': 'https://bitrix24.ru', 'gender': 'Ч', 'position': 'Почесний користувач' }); });</script>
hash
– це спеціальне поле, заміна авторизації. Воно повинно бути унікальним в рамках вашого Бітрікс24, щоб не було збігів, і обов'язково в форматі MD5:md5(USER_ID+_адреса_сайту_ + _секретний_код_)
Даний код повинен одночасно ідентифікувати користувача і бути складним для підбору ззовні.
2. Встановлення додаткових даних
Додаткові дані можна задати за допомогою спеціальних блоків:
<script type="text/javascript">window.addEventListener('onBitrixLiveChat', function(event) { var widget = event.detail.widget; // Встановлення додаткових даних (публікується при початку нової сесії, розширений формат) widget.setCustomData([ {"USER": { "NAME" : "Віктор Іванов", "AVATAR" : "http://files.shelenkov.com/images/avatar-ivanov.jpg", }}, {"GRID": [ { "NAME" : "E-mail", "VALUE" : "victor@ivanov.ru", "DISPLAY" : "LINE", }, { "NAME" : "Код клієнта", "VALUE" : "12234", "COLOR" : "#ff0000", "DISPLAY" : "LINE" }, { "NAME": "Сайт", "VALUE": location.hostname, "DISPLAY": "LINE" }, { "NAME": "Сторінка", "VALUE": "[url="+location.href+"]"+(document.title || location.href)+"[/url]", "DISPLAY": "LINE" }, ]} ]); });</script>
Якщо потрібно передати дані в звичайному текстовому вигляді, то доцільно використовувати спрощену конструкцію. У тексті можна використовувати HTML-теги: BR
, B
, U
, I
, S
, URL
.
<script type="text/javascript">window.addEventListener('onBitrixLiveChat', function(event) { var widget = event.detail.widget; widget.setCustomData("[b]Віктор Іванов[/b] (victor@ivanov.ru)"); });</script>
3. Опрацювання подій
<script type="text/javascript">window.addEventListener('onBitrixLiveChat', function(event) { var widget = event.detail.widget; // Обработка событий widget.subscribe({ type: BX.LiveChatWidget.SubscriptionType.ТИП_ПІДПИСКИ_НА_ПОДІЮ, callback: function(data) { // будь-яка команда ... } }); });</script>
-
BX.LiveChatWidget.SubscriptionType.configLoaded
– подія завантаження інформації про Відкриту лінію. -
BX.LiveChatWidget.SubscriptionType.widgetOpen
– подія відкриття віджету. -
BX.LiveChatWidget.SubscriptionType.widgetClose
– подія закриття віджету. BX.LiveChatWidget.SubscriptionType.sessionStart
– подія старту сесії.
Приклад результату:{sessionId: 123}
BX.LiveChatWidget.SubscriptionType.sessionOperatorChange
– подія зміни оператора.
Приклад результату:{operator: {name: '',firstName: '',lastName: '',workPosition: '',avatar: '',online: false}}
BX.LiveChatWidget.SubscriptionType.sessionFinish
– подія закінчення сесії.
Приклад результату:{sessionId: 123}
BX.LiveChatWidget.SubscriptionType.operatorMessage
– подія повідомлення оператора.
Приклад результату:{id:"44609041",chatId:711773,senderId:1246,recipientId:"chat711773",date:"2018-11-22T20:17:57.000Z",text:"привіт!"}
BX.LiveChatWidget.SubscriptionType.userForm
– подія заповнення форми користувачем.
Приклад результату:{form: "welcome", fields: {name: "", phone: "", email: ""}} // welcome|offline|history
BX.LiveChatWidget.SubscriptionType.userMessage
– подія повідомлення користувача.
Приклад результату:{id: 123, text: ''}
BX.LiveChatWidget.SubscriptionType.userVote
– подія голосування користувачем.
Приклад результату:{vote: "like"} // like|dislike
BX.LiveChatWidget.SubscriptionType.every
– подія, в якій можна виводити результати всіх подій за один раз.
Виклик подіїevery
трохи відрізняється від вищеописаного:
<script type="text/javascript">
Приклад результату:window.addEventListener('onBitrixLiveChat', function(event) { var widget = event.detail.widget; widget.subscribe({ type: BX.LiveChatWidget.SubscriptionType.every, callback: function(event) { if (event.type == BX.LiveChatWidget.SubscriptionType.configLoaded) { widget.open(); } } }); });
</script>{type: "userVote", data: {vote: "like"}}
В
type
буде переданий код події, вdata
– дані події, приклади цих даних вказані вище біля кожної події.
Можна комбінувати підсумковий JavaScript за допомогою 3 складових коду, в залежності від ваших потреб.
Наприклад:
<script type="text/javascript">window.addEventListener('onBitrixLiveChat', function(event) { var widget = event.detail.widget; // Встановлення зовнішньої авторизації користувача widget.setUserRegisterData({ 'hash': '12b42ebcec7e3c26a313272c26efddbd', 'name': 'Віктор', 'lastName': 'Іванов', 'avatar': 'http://files.shelenkov.com/images/avatar-ivanov.jpg', 'email': 'victor@ivanov.ru', 'www': 'https://bitrix24.ru', 'gender': 'Ч', 'position': 'Почесний користувач' }); // Встановлення додаткових даних (публікується при початку нової сесії, розширений формат) widget.setCustomData([ {"USER": { "NAME" : "Віктор Іванов", "AVATAR" : "http://files.shelenkov.com/images/avatar-ivanov.jpg", }}, {"GRID": [ { "NAME" : "E-mail", "VALUE" : "victor@ivanov.ru", "DISPLAY" : "LINE", }, { "NAME" : "Код клієнта", "VALUE" : "12234", "COLOR" : "#ff0000", "DISPLAY" : "LINE" }, { "NAME": "Сайт", "VALUE": location.hostname, "DISPLAY": "LINE" }, { "NAME": "Сторінка", "VALUE": "[url="+location.href+"]"+(document.title || location.href)+"[/url]", "DISPLAY": "LINE" }, ]} ]); widget.subscribe({ type: BX.LiveChatWidget.SubscriptionType.every, callback: function(event) { if (event.type == BX.LiveChatWidget.SubscriptionType.configLoaded) { widget.open(); } } }); });</script>
4. Зміна стандартних фраз у вікні віджета
Іноді може знадобитися зміна стандартних фраз, які відображаються у вікні віджета.
Зробити це можна Javascript-кодом:
<script>window.addEventListener('onBitrixLiveChat', function(event) { var widget = event.detail.widget; widget.subscribe({ type: BX.LiveChatWidget.SubscriptionType.configLoaded, callback: function() { widget.addLocalize({ЗМІННА_ФРАЗИ: 'Замінюваний текст'}); } }); });</script>
Повний список змінних фраз можна отримати командою в консолі браузера:
console.table(BXLiveChat.__privateMethods__.localize);
Приховати форму контактних даних
Ви можете приховати форму із запитом контактних даних клієнта в Онлайн-чаті:
Зробити це можна за допомогою невеликого лайф-хака - методу мутації віджета:
<script>window.addEventListener('onBitrixLiveChat', function(event) { var widget = event.detail.widget; widget.mutateTemplateComponent('bx-livechat-form-welcome', { template: '<div></div>'}); });</script>
Для розробників
Ви можете кастомізувати будь-який з компонентів, які перебувають тут:
imopenlines / install / js / imopenlines / component / widget / src / component /
Зверніть увагу, після кастомізації вам доведеться відстежувати зміни в даних компонентах і підтримувати актуальність своїх правок.
Детальніше про кастомізацію компонентів можна прочитати в курсі Розробник Bitrix Framework.
Застарілий формат
Даним кодом можна продовжувати користуватися до кінця 2019 року, але ми наполегливо рекомендуємо замінити його на новий формат (див. вище):
<script type="text/javascript">window.BxLiveChatInit = function() { return { 'user': { 'hash': 'a588e1a88baf2013940b0b33b1eefc2d', // унікальний uid користувача, заміна авторизації 'name': 'Віктор', 'lastName': 'Іванов', 'avatar': 'http://files.shelenkov.com/images/avatar-ivanov.jpg', 'email': 'victor@ivanov.ru', }, 'firstMessage': "Віктор Іванов (victor@ivanov.ru) [br]"+ "Код клієнта: 12234[br]"+ "Сайт: "+location.hostname+"[br]"+ "Сторінка: [url="+location.href+"]"+(document.title || location.href)+"[/url]" // будь-який текст для оператора чату відкритої лінії }; }</script>
hash
– це спеціальне поле, заміна авторизації. Воно повинно бути унікальним в рамках вашого Бітрікс24, щоб не було збігів, і обов'язково в форматі MD5:md5(USER_ID+_адреса_сайту_ + _секретний_код_)
Даний код повинен одночасно ідентифікувати користувача і бути складним для підбору ззовні.
-
Поле
firstMessage
не є обов'язковим, можна його не налаштовувати. Тоді оператору буде відправлене посилання сторінки, з якої клієнт почав звернення.