top_de
LogIn
Ihr Bitrix24
Loggen Sie sich in Ihrem Bitrix24 ein.
LogIn

Bitrix24Help

Erweiterte Widget-Einstellungen

Ranking:

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;

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.

widget.png

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


Danke, das hilft Danke :) Das hilft nicht Schade :(
Könnten Sie bitte sagen, warum:
Es ist nicht das, was ich suche
Es ist zu kompliziert und unverständlich

Sehen Sie sich unsere Videos an

Bitrix24 Webinaraufnahmen und Videos
Weitere Videos anschauen