Розширені налаштування віджета Онлайн-чату

Автор: Валерія Башкірова

17 Червня 2020

Якщо ви вже використовуєте віджет відкритих ліній на своєму сайті, та маєте потребу ідентифікувати гостьові сесії в Онлайн-чаті, то можна використати запропоноване у цій статті рішення.

Для неавторизованих користувачів у нас є форми контактних даних.

Для авторизованих користувачів є цікавіше рішення, яке не змусить ваших клієнтів повторно заповнювати контактну інформацію.

Існує два варіанта вирішення питання ідентифікації таких клієнтів: перший для сайтів на платформі «Бітрікс: Управління сайтом», другий - для сайтів на інших системах:

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>

Про використання блоків можна прочитати докладніше в курсі Бот платформа Бітрікс24.

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 не є обов'язковим, можна його не налаштовувати. Тоді оператору буде відправлене посилання сторінки, з якої клієнт почав звернення.

Допомогло! Дякуємо :) Не допомогло Дуже шкода :( Відгук

Дізнайтесь, чому:

Це не те, що я шукаю

Дуже складно і незрозуміло