top_pl
Logowanie

Bitrix24Care

Bitrix24Care
Odpowiedzi

Widżet na stronę: ustawienia zaawansowane

Andrey Glushkov
Autor: Andrey Glushkov

Jeśli masz już podłączony widżet na stronę i chcesz identyfikować klientów z czatu Bitrix24 na żywo, możesz skorzystać z rozwiązań wymienionych w tym artykule.

Na przykład masz sklep online Bitrix24 i stronę internetową Bitrix24. Klient kupił coś w Twoim sklepie online i teraz odwiedza Twoją stronę internetową po raz pierwszy.

Dla klientów niezalogowanych w żadnym z Twoich serwisów, możesz wykorzystać specjalny formularz internetowy CRM.

Dla klientów zalogowanych w dowolnym z Twoich serwisów, mamy bardziej interesujące rozwiązanie, dzięki któremu Twoi klienci nie będą musieli ponownie wypełniać formularza kontaktowego.

Sposób działania

Do strony, z którą połączony jest widżet na stronę, możesz dodać specjalny kod JavaScript.

Generalnie, kod ten wygląda w ten sposób: 

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
	var widget = event.detail.widget;

	// 1. Ustawianie zewnętrznego uwierzytelniania użytkownika
	...
	
	// 2. Ustawianie danych niestandardowych
	...
	
	// 3. Obsługa zdarzeń
	...
	
});
</script>

Praca z widżetem na stronę:

  • widget.open() вАУ otwórz widżet;
  • widget.close() вАУ zamknij widżet;
  • widget.subscribe() вАУ subskrypcja wydarzenia;
  • widget.setUserRegisterData() вАУ ustaw zewnętrzne uwierzytelnianie użytkownika;
  • widget.setCustomData() вАУ ustaw dane niestandardowe;

1. Ustawianie zewnętrznego uwierzytelniania użytkownika

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
	var widget = event.detail.widget;

	// Ustawianie zewnętrznego uwierzytelniania użytkownika
	widget.setUserRegisterData({
		'hash': '12b42ebcec7e3c26a313272c26efddbd',
		'name': 'John',
		'lastName': 'Smith',
		'avatar': 'http://files.smith.com/images/avatar-john.jpg',
		'email': 'john@smith.com',
		'www': 'https://bitrix24.com',
		'gender': 'M',
		'position': 'Loyal Customer'
	});
	
});
</script>
Informacja:
hash to specjalne pole, które „zastępuje” uwierzytelnianie. Kod ten musi być w formacie MD5 i musi być unikalny w ramach danego systemu Bitrix24. Na przykład: md5(USER_ID+_website_address_ + _secret_code_)

2. Ustawianie danych niestandardowych

Dane niestandardowe możesz ustawić za pomocą specjalnych bloków: 

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
	var widget = event.detail.widget;

	// Ustawianie danych niestandardowych (publikowane na początku nowej rozmowy, format rozszerzony)
	widget.setCustomData([
		{"USER": {
			"NAZWA" : "John Smith",
			"AWATAR" : "http://files.smith.com/images/avatar-john.jpg",
		}},
		{"GRID": [
			{
				"NAZWA" : "E-mail",
				"WARTOŚĆ" : "john@smith.com",
				"WYŚWIETL": "LINIA"
			},
			{
				"NAZWA" : "ID klienta",
				"WARTOŚĆ" : "12234",
				"KOLOR" : "#ff0000",
				"WYŚWIETL": "LINIA"
			},
			{
				"NAZWA": "Strona internetowa",
				"WARTOŚĆ": location.hostname,
				"WYŚWIETL": "LINIA"
			},
			{
				"NAZWA": "Strona",
				"WARTOŚĆ": "[url="+location.href+"]"+(document.title || location.href)+"[/url]",
				"WYŚWIETL": "LINIA"
			},
		]}
	]);
	
});
</script>

Aby opublikować dane w formacie tekstowym, możesz użyć uproszczonej konstrukcji. W tekście możesz korzystać z tagów HTML: BR, B, U, I, S, URL. 

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
	var widget = event.detail.widget;

	widget.setCustomData("[b]John Smith[/b] (john@smith.com)");

});
</script>
Dowiedz się więcej na temat bloków i jak je wykorzystywać: Kurs dotyczący Platformy botów Bitrix24.

3. Obsługa zdarzeń

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
	var widget = event.detail.widget;

	// Obsługa zdarzeń	
	widget.subscribe({
		type: BX.LiveChatWidget.SubscriptionType.EVENT_SUBSCRIPTION_TYPE,
		callback: function(data) {
		// dowolne polecenie
		...
		}
	});
	
});
</script>

  • BX.LiveChatWidget.SubscriptionType.configLoaded вАУ zdarzenie "załadowano informację o Otwartym kanale".

  • BX.LiveChatWidget.SubscriptionType.widgetOpen вАУ zdarzenie "otwarto widżet".

  • BX.LiveChatWidget.SubscriptionType.widgetClose вАУ zdarzenie "zamknięto widżet".

  • BX.LiveChatWidget.SubscriptionType.sessionStart вАУ zdarzenie "rozpoczęto rozmowę".
    Przykład rezultatu: 
    {sessionId: 123}
  • BX.LiveChatWidget.SubscriptionType.sessionOperatorChange вАУ zdarzenie "zmieniono konsultanta".
    Przykład rezultatu: 
    {operator: {name: '',firstName: '',lastName: '',workPosition: '',avatar: '',online: false}}
  • BX.LiveChatWidget.SubscriptionType.sessionFinish вАУ zdarzenie "zakończono rozmowę".
    Przykład rezultatu: 
    {sessionId: 123}
  • BX.LiveChatWidget.SubscriptionType.operatorMessage вАУ zdarzenie "konsultant wysłał wiadomość".
    Przykład rezultatu: 
    {id:"44609041",chatId:711773,senderId:1246,recipientId:"chat711773",date:"2018-11-22T20:17:57.000Z",text:"cześć!"}
  • BX.LiveChatWidget.SubscriptionType.userForm вАУ zdarzenie "klient wypełnił formularz internetowy".
    Przykład rezultatu: 
    {form: "witaj", fields: {name: "", phone: "", email: ""}} // welcome|offline|history
  • BX.LiveChatWidget.SubscriptionType.userMessage вАУ zdarzenie "wysłano wiadomość do użytkownika".
    Przykład rezultatu: 
    {id: 123, text:"cześć!"}
  • BX.LiveChatWidget.SubscriptionType.userVote вАУ zdarzenie "klient ocenił rozmowę".
    Przykład rezultatu: 
    {vote: "like"} // like|dislike
  • BX.LiveChatWidget.SubscriptionType.every вАУ w tym zdarzeniu można określić jednocześnie rezultaty wszystkich zdarzeń.
    Typ zdarzenia every jest nieco inny:
    <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>
    Przykład rezultatu: 
    {type: "userVote", data: {vote: "like"}}

    type pokazuje typ zdarzenia, data вАУ dane zdarzenia (przykłady tych danych podano powyżej).


W zależności od potrzeb ostateczny kod JavaScript może składać się z 3 części.

Na przykład: 

<script type="text/javascript">


 
window.addEventListener('onBitrixLiveChat', function(event)
{
	var widget = event.detail.widget;
	
	// Ustawianie zewnętrznego uwierzytelniania użytkownika
	widget.setUserRegisterData({
		'hash': '12b42ebcec7e3c26a313272c26efddbd',
		'name': 'John',
		'lastName': 'Smith',
		'avatar': 'http://files.smith.com/images/avatar-john.jpg',
		'email': 'john@smith.com',
		'www': 'https://bitrix24.com',
		'gender': 'M',
		'position': 'Loyal Customer'
	});	

	// Ustawianie danych niestandardowych (publikowane na początku nowej rozmowy, format rozszerzony)
	widget.setCustomData([
		{"USER": {
			"NAZWA" : "John Smith",
			"AWATAR" : "http://files.smith.com/images/avatar-john.jpg",
		}},
		{"GRID": [
			{
				"NAZWA" : "E-mail",
				"WARTOŚĆ" : "john@smith.com",
				"WYŚWIETL": "LINIA"
			},
			{
				"NAZWA" : "ID klienta",
				"WARTOŚĆ" : "12234",
				"KOLOR" : "#ff0000",
				"WYŚWIETL": "LINIA"
			},
			{
				"NAZWA": "Strona internetowa",
				"WARTOŚĆ": location.hostname,
				"WYŚWIETL": "LINIA"
			},
			{
				"NAZWA": "Strona",
				"WARTOŚĆ": "[url="+location.href+"]"+(document.title || location.href)+"[/url]",
				"WYŚWIETL": "LINIA"
			},
		]}
	]);
		
	widget.subscribe({
		type: BX.LiveChatWidget.SubscriptionType.every,
		callback: function(event) {
			if (event.type == BX.LiveChatWidget.SubscriptionType.configLoaded)
			{
				widget.open();
			}
		}
	});	
	
});
</script>

4. Dostosuj frazy używane w widżecie na stronę

Możesz dostosowywać frazy używane w widżecie na stronę Bitrix24.

Aby to zrobić, wykorzystaj kod JavaScript: 

<script>
window.addEventListener('onBitrixLiveChat', function(event)
{
	var widget = event.detail.widget;

	widget.subscribe({
		type: BX.LiveChatWidget.SubscriptionType.configLoaded,
		callback: function() 
		{
			widget.addLocalize({VARIABLE: 'Nowy tekst'});				
		}
	});
	
});
</script>
Dowiedz się więcej w artykule - Dostosowywanie fraz używanych w widżecie na stronę.
To pomogło Dzięki :) To nie pomogło Przykro nam :( Komentarz
Czy możesz nam powiedzieć, dlaczego:
Nie tego szukam
To zbyt skomplikowane