Erweiterte Widget-Einstellungen

Autor: Mia Fuchs

Zuletzt aktualisiert am 4. August 2021

Wenn Sie bereits ein Widget an Ihre Website angebunden haben und Gastsitzungen im Live-Chat identifizieren möchten, können Sie die folgende Lösung benutzen.

Für die nicht autorisierten Nutzer bieten wir Kontaktanfrageformulare an.

Für die autorisierten Nutzer haben wir auch eine interessante Lösung, mit der Ihre Kunden nicht aufgefordert werden, erneut Kontaktanfrageformulare auszufüllen.

Manuelle Einstellungen

In den Fremdsystemen (z.B. Ihr Billing) sind erweiterte Einstellungen mit dem Javascript-Code möglich, den man in die Seite mit dem Website-Widget einbettet.

Der endgültiger Code, womit Sie das Widget an Ihre Anforderungen anpassen können, sieht folgenderweise aus:

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

	// 1. Externe Benutzerautorisierung
	...
	
	// 2. Installation der zusätzlichen Daten
	...
	
	// 3. Ereignisbehandlung
	...
	
});
</script>

Arbeitsmethoden mit dem Website-Widget

widget.open() – Widget öffnen;
widget.close() – Widget schließen;
widget.subscribe() – Widget abonnieren;
widget.setUserRegisterData() – Externe Benutzerautorisierung;
widget.setCustomData() – Installation der zusätzlichen Daten;
widget.setOption() – Installation der zusätzlichen Optionen.

1. Externe Benutzerautorisierung

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

	// Externe Benutzerautorisierung
	widget.setUserRegisterData({
		'hash': '12b42ebcec7e3c26a313272c26efddbd',
		'name': 'Jens',
		'lastName': 'Müller',
		'avatar': 'http://files.shelenkov.com/images/avatar-ivanov.jpg',
		'email': 'jens@muller.de',
		'www': 'https://bitrix24.de',
		'gender': 'M',
		'position': 'Ehrenuser'
	});
	
});
</script>

Wichtig!

hash ist ein spezielles Feld, Ersatzautorisierung.Es muss einmalig in Ihrem Bitrix24 und im MD5-Format sein, z.B.: md5(USER_ID+_Seitenadresse_ + _Geheimcode_)

Dieser Code muss sowohl den Nutzer identifizieren als auch sicher sein.

Installation der zusätzlichen Daten

Zusätzliche Daten kann man mit speziellen Blöcken angeben:

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

	// Installation der zusätzlichen Daten (wird am Anfang der neuen Konversation veröffentlicht, das erweiterte Format)
	widget.setCustomData([
		{"USER": {
			"NAME" : "Jens Müller",
			"AVATAR" : "http://files.shelenkov.com/images/avatar-ivanov.jpg",
		}},
		{"GRID": [
			{
				"NAME" : "E-mail",
				"VALUE" : "jens@muller.de",
				"DISPLAY" : "LINE",
			},
			{
				"NAME" : "Kunden-ID-Nummer",
				"VALUE" : "12234",
				"COLOR" : "#ff0000",
				"DISPLAY" : "LINE"
			},
			{
				"NAME": "Website",
				"VALUE": location.hostname,
				"DISPLAY": "LINE"
			},
			{
				"NAME": "Seite",
				"VALUE": "[url="+location.href+"]"+(document.title || location.href)+"[/url]",
				"DISPLAY": "LINE"
			},
		]}
	]);
	
});
</script>

Um die Daten im Textformat zu veröffentlichen, können Sie eine erleichterte Konstruktion verwenden. Im Text kann man HTML-Tags benutzen: BR, B, U, I, S, URL.

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

	widget.setCustomData("[b]Jens Müller[/b] (jens@muller.de)");

});
</script>

Weitere Informationen zu Blöcken und deren Anwendung finden Sie im Kurs Bitrix24 Bot Platform.

3. Ereignisbehandlung

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

	// Ereignisbehandlung	
	widget.subscribe({
		type: BX.LiveChatWidget.SubscriptionType.TYP_DES_EREIGNISABONNEMENTES,
		callback: function(data) {
		// beliebiger Befehl
		...
		}
	});
	
});
</script>

BX.LiveChatWidget.SubscriptionType.configLoaded – Informationen zum Kommunikationskanal wurden heruntergeladen.
BX.LiveChatWidget.SubscriptionType.widgetOpen – Das Widget wurde geöffnet.
BX.LiveChatWidget.SubscriptionType.widgetClose – Das Widget wurde geschlossen.
BX.LiveChatWidget.SubscriptionType.sessionStart – Die Konversation wurde gestartet.
Beispielergebnis:
```
{sessionId: 123}
```
BX.LiveChatWidget.SubscriptionType.sessionOperatorChange – Der verantwortliche Mitarbeiter wurde geändert.
Beispielergebnis:
```
{operator: {name: '',firstName: '',lastName: '',workPosition: '',avatar: '',online: false}}
```
BX.LiveChatWidget.SubscriptionType.sessionFinish – Die Konversation wurde geschlossen.
Beispielergebnis:
```
{sessionId: 123}
```

BX.LiveChatWidget.SubscriptionType.operatorMessage – Der Mitarbeiter hat geantwortet.
Beispielergebnis:

{id:"44609041",chatId:711773,senderId:1246,recipientId:"chat711773",date:"2018-11-22T20:17:57.000Z",text:"Hallo!"}

BX.LiveChatWidget.SubscriptionType.userForm – Der Kunde hat das Formular ausgefüllt.
Beispielergebnis:
```
{form: "welcome", fields: {name: "", phone: "", email: ""}} // welcome|offline|history
```
BX.LiveChatWidget.SubscriptionType.userMessage – Der Kunde hat geantwortet.
Beispielergebnis:
```
{id: 123, text: ''}
```
BX.LiveChatWidget.SubscriptionType.userVote – Der Kunde hat abgestimmt.
Beispielergebnis:
```
{vote: "like"} // like|dislike
```

BX.LiveChatWidget.SubscriptionType.every – Das Ereignis, in dem die Ergebnisse aller Ereignisse auf einmal angegeben werden können.
Ereignisaufrufevery unterscheidet sich vom oberen Beispiel:

<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>

Ergebnisbeispiel:

{type: "userVote", data: {vote: "like"}}

In type erhalten Sie den Ereigniscode, in data – die Ereignisdaten, die Beispiele für diese Daten wurden oben für jedes Ereignis angegeben.

Ihr endgültiger JavaScript-Code kann je nach Ihren Anforderungen aus 3 Bestandteilen bestehen.

Beispiel:

<script type="text/javascript">

 window.addEventListener('onBitrixLiveChat', function(event)
{
	var widget = event.detail.widget;
	
	// Externe Benutzerautorisierung
	widget.setUserRegisterData({
		'hash': '12b42ebcec7e3c26a313272c26efddbd',
		'name': 'Jens',
		'lastName': 'Müller',
		'avatar': 'http://files.shelenkov.com/images/avatar-ivanov.jpg',
		'email': 'jens@muller.de',
		'www': 'https://bitrix24.de',
		'gender': 'M',
		'position': 'Eherenuser'
	});	

	// Installation der zusätzlichen Daten (wird am Anfang der neuen Konversation, das erweiterte Format)
	widget.setCustomData([
		{"USER": {
			"NAME" : "Jens Müller",
			"AVATAR" : "http://files.shelenkov.com/images/avatar-ivanov.jpg",
		}},
		{"GRID": [
			{
				"NAME" : "E-mail",
				"VALUE" : "jens@muller.de",
				"DISPLAY" : "LINE",
			},
			{
				"NAME" : "Kunden-ID-Nummer",
				"VALUE" : "12234",
				"COLOR" : "#ff0000",
				"DISPLAY" : "LINE"
			},
			{
				"NAME": "Website",
				"VALUE": location.hostname,
				"DISPLAY": "LINE"
			},
			{
				"NAME": "Seite",
				"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. Standardphrasen im Website-Widget ändern

Es ist auch möglich, Standardphrasen im Website-Widget zu verarbeiten.

In Bitrix24.Website-Widgets kann man bei Bedarf Standardphrasen verarbeiten.

Dies ist mit Javascript möglich.

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

	widget.subscribe({
		type: BX.LiveChatWidget.SubscriptionType.configLoaded,
		callback: function() 
		{
			widget.addLocalize({VARIABLE_DER_PHRASE: 'Neuer Text'});				
		}
	});
	
});
</script>

Die vollständige Liste aller variablen Phrasen wird mit folgendem Befehl in der Browserkonsole aufgerufen:

console.table(BXLiveChat.__privateMethods__.localize);

Weitere Informationen zum Thema finden Sie im Beitrag "Standardphrasen im Website-Widget ändern".

Kontaktanfrageformular ausblenden

Sie können das Kontaktanfrageformular im Live-Chat ausblenden. Dabei hilft Ihnen der folgende Trick - eine Widget-Mutationsmethode:

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

Deaktivieren der zusätzlichen Prüfung der Multisite-Konfiguration für das Widget

Bei der einheitlichen End-to-End-Autorisierung zwischen der Bitrix24 Website und dem Bitrix24-Account in einer Multisite-Konfiguration auf demselben Kernel und auf der Subdomain der Hauptdomäne wird die Nutzerautorisierung zurückgesetzt.

Um dies zu vermeiden, nehmen Sie folgende Einstellungen vor:

Standardmäßig ist die Multisite-Konfiguration im Modul Kommunikationskanäle (imopenlines) ab der Version 21.400.0. aktiviert. Wenn das System diese Konfiguration entdeckt, erhalten Sie eine entsprechende Benachrichtigung.

Dieser Code schaltet die Prüfung ab:

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

War diese Information hilfreich?

Assistenz von Integrationsspezialisten anfordern

Nicht das, wonach ich suche.

Kompliziert und unverständlich formuliert.

Die Information ist veraltet.

Zu kurz, ich benötige mehr Informationen.

Mir gefällt nicht, wie das Tool funktioniert.

Zu Bitrix24 wechseln

Sie haben noch keinen Account? Jetzt kostenfrei erstellen

Verwandte Beiträge

Besonderheiten und Vorgehensweise der Warteschleifen Kommunikationskanäle erstellen: Einstellungen der Kommunikationskanäle Kommunikationskanäle mit dem Account verbinden Vordefinierte Antworten Kontaktanfrageformular Kommunikationskanäle: Chat-Interface