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>
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>
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 zdarzeniaevery
jest nieco inny:
<script type="text/javascript">
Przykład rezultatu: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
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>