top_pl
Logowanie

Bitrix24Care

Widżet strony: ustawienia zaawansowane

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.

To pomogło Dzięki :) To nie pomogło Przykro nam :( Komentarz
Czy możesz nam powiedzieć, dlaczego:
Nie tego szukam
To zbyt skomplikowane