Widget sito web: impostazioni avanzate

Autore: Veronika Smoliak

Ultimo aggiornamento: 15 Febbraio 2023

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'utente è 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'utente 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>

Questa informazione è stata utile?

Assistenza di uno specialista

Non è quello che sto cercando.

Testo complesso e incomprensibile

Le informazioni sono obsolete.

Troppo breve, ho bisogno di maggiori informazioni.

Non mi soddisfa come funziona questo strumento

Vai a Bitrix24

Non hai ancora un account? Crealo gratuitamente

Supporto Bitrix24