Supporto Bitrix24

Widget sito web: impostazioni avanzate

Se hai già un widget connesso al tuo sito web e vuoi identificare i clienti nella Live Chat Bitrix24, puoi utilizzare le soluzioni elencate in questo articolo.

Ad esempio, hai un online store Bitrix24 e un sito web Bitrix24. Il cliente ha acquistato qualcosa nel tuo online store e ora visita il tuo sito web per la prima volta.

Per i clienti che non hanno effettuato l’accesso a uno dei tuoi servizi sono previsti gli appositi moduli CRM.

Per quanto riguarda i clienti che hanno effettuato l’accesso a uno dei tuoi servizi, è prevista una soluzione più conveniente, e i tuoi clienti non dovranno compilare nuovamente il modulo di contatto.


Come funziona

Configurazione manuale

Per i sistemi di terzi parti, puoi aggiungere un codice Javascript alla pagina in cui è inserito il tuo widget.

Generalmente questo codice ha il seguente aspetto:

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

	// 1. Impostazione autenticazione utente esterno
	...
	
	// 2. Impostazione dati personalizzati
	...
	
	// 3. Gestione eventi
	...
	
});
</script>

Utilizzare il widget sito web:

  • widget.open(): widget aperto;
  • widget.close(): widget chiuso;
  • widget.subscribe(): iscrizione all'evento;
  • widget.setUserRegisterData(): impostazione dell'autenticazione esterna dell'utente;
  • widget.setCustomData(): impostazione di dati personalizzati;
  • widget.setOption(): impostazione di opzioni aggiuntive.

1. Impostazione dell’autenticazione esterna dell’utente

<script type="text/javascript">

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

	// Impostazioni autenticazione utente esterno
	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>

Attenzione!

hash è un campo che sostituisce l'autorizzazione e deve essere unico all'interno di Bitrix24 e in formato MD5 e non può corrispondere ad altri dati.

Ad esempio: md5(ID_utente+_sito_indirizzo_ + _codice_segreto_)

Seleziona un codice che identifichi l'utente ma, allo stesso tempo, sia difficile da indovinare.


2. Impostazione di dati personalizzati

Puoi impostare dati personalizzati utilizzando blocchi speciali:

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

	// Impostazione dati personalizzati (pubblicati all'inizio di una nuova conversazione, formato esteso)
	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>

Per pubblicare i dati in formato testo, puoi utilizzare una costruzione semplificata. Nel testo, puoi usare i tag 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>

Ulteriori informazioni sui blocchi e su come utilizzarli sono disponibili nel Corso sulla piattaforma Bot di Bitrix24.


3. Gestione eventi

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

	// Gestione eventi	
	widget.subscribe({
		type: BX.LiveChatWidget.SubscriptionType.EVENT_SUBSCRIPTION_TYPE,
		callback: function(data) {
		// qualsiasi comando
		...
		}
	});
	
});
</script>

  • BX.LiveChatWidget.SubscriptionType.configLoaded: evento "le informazioni sul canale aperto sono state caricate".

  • BX.LiveChatWidget.SubscriptionType.widgetOpen: evento "il widget è stato aperto".

  • BX.LiveChatWidget.SubscriptionType.widgetClose: evento "il widget è stato chiuso".

  • BX.LiveChatWidget.SubscriptionType.sessionStart: evento "la conversazione è stata avviata".
    Esempio del risultato:
    {sessionId: 123}
  • BX.LiveChatWidget.SubscriptionType.sessionOperatorChange: evento "l'agente è stato modificato".
    Esempio del risultato:
    {operator: {name: '',firstName: '',lastName: '',workPosition: '',avatar: '',online: false}}
  • BX.LiveChatWidget.SubscriptionType.sessionFinish: evento "la conversazione è stata terminata".
    Esempio del risultato:
    {sessionId: 123}
  • BX.LiveChatWidget.SubscriptionType.operatorMessage: evento "l'agente ha inviato un messaggio".
    Esempio del risultato:
    {id:"44609041",chatId:711773,senderId:1246,recipientId:"chat711773",date:"2018-11-22T20:17:57.000Z",text:"hi!"}
  • BX.LiveChatWidget.SubscriptionType.userForm: evento "il cliente ha compilato il modulo web".
    Esempio del risultato:
    {form: "welcome", fields: {name: "", phone: "", email: ""}} // welcome|offline|history
  • BX.LiveChatWidget.SubscriptionType.userMessage: evento "il cliente ha inviato un messaggio".
    Esempio del risultato:
    {id: 123, text:"hi!"}
  • BX.LiveChatWidget.SubscriptionType.userVote: evento "il cliente ha valutato la conversazione".
    Esempio del risultato:
    {vote: "like"} // like|dislike
  • BX.LiveChatWidget.SubscriptionType.every: in questo evento, è possibile specificare i risultati di tutti gli eventi.
    Il tipo evento every è leggermente diverso:
    <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>
    Esempio del risultato:
    {type: "userVote", data: {vote: "like"}}

    type mostra un tipo di evento, data mostra i dati dell'evento (esempi di questi dati sono forniti sopra).

Il tuo codice JavaScript finale può essere composto da 3 parti, a seconda delle tue esigenze.

Ad esempio:

<script type="text/javascript">

window.addEventListener('onBitrixLiveChat', function(event)
{
	var widget = event.detail.widget;
	
	// Impostazione autenticazione utente esterno
	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'
	});	

	// Impostazione dati personalizzati (pubblicati all'inizio di una nuova conversazione, formato esteso)
	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"
			},
		]}
	]);
		
	widget.subscribe({
		type: BX.LiveChatWidget.SubscriptionType.every,
		callback: function(event) {
			if (event.type == BX.LiveChatWidget.SubscriptionType.configLoaded)
			{
				widget.open();
			}
		}
	});	
	
});
</script>

4. Personalizza le frasi utilizzate nel widget sito web

Puoi personalizzare le frasi utilizzate nel widget sito web Bitrix24.

A tal fine, usa il codice 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>

Puoi ottenere l’elenco completo delle variabili utilizzando il seguente comando nella console del browser:

console.table(BXLiveChat.__privateMethods__.localize);

Ulteriori informazioni sono disponibili nell'articolo: Personalizza le frasi utilizzate nel widget sito web (articolo in inglese).


5. Nascondere Il modulo di contatto

Puoi nascondere il modulo di contatto nella Live Chat Bitrix24.

<script>
window.addEventListener('onBitrixLiveChat', function(event)
{
 var widget = event.detail.widget;
 widget.mutateTemplateComponent('bx-livechat-form-welcome', { template: '<div></div>' });
});
</script>

Per sviluppatori

Puoi personalizzare qualsiasi componente presente qui:

imopenlines / install / js / imopenlines / component / widget / src / component /

Nota che dopo la personalizzazione occorre monitorare le modifiche apportate a questi componenti e mantenere aggiornate le proprie modifiche.


6. Disattivare ulteriori verifiche della configurazione multisito per il widget

Quando si utilizza Il single sign-on (autenticazione unica) con configurazione multisito allo stesso kernel e sottodominio del dominio principale, si verifica il ripristino dell'autorizzazione dell’utente.

Per evitarlo, occorre effettuare alcune impostazioni.

Per impostazione predefinita, la verifica della configurazione multisito per il widget Bitrix24 è attivata nel modulo Canali aperti (imopenlines) a partire dalla versione 21.400.0. Un volta rilevata questa configurazione, riceverai una notifica nel widget.

Il seguente codice disattiva la verifica:

<script>
window.addEventListener('onBitrixLiveChat', function(event){
  var widget = event.detail.widget;
  widget.setOption('checkSameDomain', false);
    });
</script>

È stato utile
Grazie :)
Opzionale:
Lascia un feedback sull'articolo
Non è stato utile
Mi dispiace :(
Ti dispiacerebbe dirci perché?
Lascia un feedback sull'articolo
Ho ancora qualche domanda