Widżet strony: ustawienia zaawansowane

Autor: Dorota Wiśniewska

Ostatnia aktualizacja: 4 lutego 2020 r.

Jeśli masz już podłączony do swojej witryny widżet i chcesz zidentyfikować 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 witrynę 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 inne rozwiązanie, dzięki któremu Twoi klienci nie będą musieli ponownie wypełniać formularza kontaktowego.

Jak to działa?

Do strony, z którą połączony jest widżet, 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. Setting external user authentication
        ...
        
        // 2. Setting custom data
        ...
        
        // 3. Event handling
        ...
        
    });
</script>

Praca z widżetem witryny:

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;
    
        // Settings external user authentication
        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>

Uwaga:
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;
    
        // Setting custom data (get published at the beginning of a new conversation, extended format)
        widget.setCustomData([
            {"USER": {
                "NAME" : "John Smith",
                "AVATAR" : "http://files.smith.com/images/avatar-john.jpg",
            }},
            {"GRID": [
                {
                    "NAME" : "E-mail",
                    "VALUE" : "john@smith.com",
                    "DISPLAY" : "LINE",
                },
                {
                    "NAME" : "Customer ID",
                    "VALUE" : "12234",
                    "COLOR" : "#ff0000",
                    "DISPLAY" : "LINE"
                },
                {
                    "NAME": "Website",
                    "VALUE": location.hostname,
                    "DISPLAY": "LINE"
                },
                {
                    "NAME": "Page",
                    "VALUE": "[url="+location.href+"]"+(document.title || location.href)+"[/url]",
                    "DISPLAY": "LINE"
                },
            ]}
        ]);
        
    });
</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;
    
        // Event handling	
        widget.subscribe({
            type: BX.LiveChatWidget.SubscriptionType.EVENT_SUBSCRIPTION_TYPE,
            callback: function(data) {
            // any command
            ...
            }
        });
        
    });
</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: 'New Text'});				
            }
        });
        
    });
</script>

Dowiedz się więcej w artykule - Dostosuj frazy używane w widżecie witryny.

Czy te informacje były pomocne?

Pomoc specjalisty ds. integracji

To nie jest to, czego szukam

Skomplikowany i niezrozumiały tekst

Informacje są nieaktualne

Artykuł jest za krótki. Potrzebuję więcej informacji

Nie podoba mi się sposób działania tego narzędzia

Otrzymaj pomoc przy konfiguracji Bitrix24 od lokalnych specjalistów

ZNAJDŹ PARTNERA BITRIX24 W POBLIŻU