Przeczytaj FAQ
Nowości Bitrix24
Aktualizacje artykułów
Jak zacząć?
Wsparcie Bitrix24
Aktualności
Rejestracja i autoryzacja
Zadania i projekty
Komunikator Bitrix24
Grupy robocze
Kalendarze
Zarządzanie asortymentem produktów
Dysk
Baza Wiedzy
Poczta internetowa
Automatyzacja
CRM
Analityka CRM
Marketing CRM
Centrum Sprzedaży
Firma
Strony internetowe
Sklep online
Bitrix24.Market
Centrum Kontaktowe
Telefonia
Workflow
Aplikacja mobilna
Ustawienia
Bitrix24 On-premise
Subskrypcja
AI CoPilot
Aplikacja desktopowa
CRM + Sklep internetowy
Enterprise
Mój profil
Sales Intelligence
Wsparcie aplikacji mobilnej Bitrix24
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.

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
Przejdź do Bitrix24
Nie masz konta? Utwórz za darmo