Configurações avançadas do widget do bate-papo ao vivo

Autor: Ana Laura L.

Última atualização: 26 de dezembro de 2024

Se você já estiver usando o widget dos Canais Abertos no seu site, use este tutorial para identificar a sessão convidado.

Para os usuários não autorizados, você pode usar os formulários de contato.

Para identificar os usuários autorizados e evitar a coleta repetida das suas informações de contato, configure o widget manualmente com a ajuda do Javascript.

Configuração manual

O Bitrix24 pode exibir os dados recebidos dos serviços externos no widget dos Canais Abertos. Para isso, é preciso adicionar o código Javascript à página que contém o widget.

Em geral, o código ficará assim:

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

	// 1. Identificação da autorização externa do usuário
	...
	
	// 2. Identificação das informações adicionais
	...
	
	// 3. Processamento dos eventos
	...
	
});
</script>

Comandos:

widget.open() – abrir o widget;
widget.close() – fechar o widget;
widget.subscribe() – seguir o evento;
widget.setUserRegisterData() – identificar a autorização externa do usuário;
widget.setCustomData() – identificar as informações adicionais;
widget.setOption() – estabelecer opções adicionais.

1. Identificar a autorização externa do usuário

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

	// Identificação da autorização externa do usuário
	widget.setUserRegisterData({
		'hash': '12b42ebcec7e3c26a313272c26efddbd',
		'name': 'Rodrigo',
		'lastName': 'Pereira',
		'avatar': 'http://files.smith.com/images/avatar-rodrigo.jpg',
		'email': 'rogrigo@pereira.com.br',
		'www': 'https://bitrix24.com.br',
		'gender': 'M',
		'position': 'Ouro'
	});
	
});
</script>

Atenção:

hash – é um campo que substitui a autorização. Tem que ser único dentro do seu Bitrix24, não pode coincidir com outros dados e deve ser no formato MD5. Por exemplo:
md5(USER_ID+_endereço_do_site_ + _código_secreto_)
Escolha um código que identifique o usuário mas, ao mesmo tempo, seja difícil de adivinhar.

2. Identificação das informações adicionais

Defina as informações adicionais com a ajuda dos blocos especiais:

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

	// Identificação das informações adicionais (formato alargado; publicado no início de uma nova sessão)
	widget.setCustomData([
		{"USER": {
			"NAME" : "Rodrigo Pereira",
			"AVATAR" : "http://files.smith.com/images/avatar-rodrigo.jpg",
		}},
		{"GRID": [
			{
				"NAME" : "E-mail",
				"VALUE" : "rodrigo@pereira.com.br",
				"DISPLAY" : "LINE",
			},
			{
				"NAME" : "Código do cliente",
				"VALUE" : "12234",
				"COLOR" : "#ff0000",
				"DISPLAY" : "LINE"
			},
			{
				"NAME": "Site",
				"VALUE": location.hostname,
				"DISPLAY": "LINE"
			},
			{
				"NAME": "Página",
				"VALUE": "[url="+location.href+"]"+(document.title || location.href)+"[/url]",
				"DISPLAY": "LINE"
			},
		]}
	]);
	
});
</script>

Caso você precise transmitir dados no formato de texto, pode usar uma construção simplificada. Além disso, pode usar os tags HTML: BR, B, U, I, S, URL.

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

	widget.setCustomData("[b]Rodrigo Pereira[/b] (rodrigo@pereira.com.br)");

});
</script>

Saiba mais sobre os blocos no curso de treinamento Bitrix24 Bot Platform.

3. Processamento dos eventos

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

	// Processamento dos eventos	
	widget.subscribe({
		type: BX.LiveChatWidget.SubscriptionType.TIPO_DE_SEGUIR,
		callback: function(data) {
		// qualquer comando
		...
		}
	});
	
});
</script>

BX.LiveChatWidget.SubscriptionType.configLoaded – as informações do Canal Aberto foram carregadas.
BX.LiveChatWidget.SubscriptionType.widgetOpen – o widget foi aberto.
BX.LiveChatWidget.SubscriptionType.widgetClose – o widget foi fechado.
BX.LiveChatWidget.SubscriptionType.sessionStart – a sessão de atendimento foi iniciada.
Exemplo do resultado:
```
{sessionId: 123}
```
BX.LiveChatWidget.SubscriptionType.sessionOperatorChange – o operador foi alterado.
Exemplo do resultado:
```
{operator: {name: '',firstName: '',lastName: '',workPosition: '',avatar: '',online: false}}
```
BX.LiveChatWidget.SubscriptionType.sessionFinish – a sessão de atendimento foi fechada.
Exemplo do resultado:
```
{sessionId: 123}
```

BX.LiveChatWidget.SubscriptionType.operatorMessage – o operador enviou uma mensagem.
Exemplo do resultado:

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

BX.LiveChatWidget.SubscriptionType.userForm – o usuário preencheu formulário.
Exemplo do resultado:
```
{form: "welcome", fields: {name: "", phone: "", email: ""}} // welcome|offline|history
```
BX.LiveChatWidget.SubscriptionType.userMessage – o usuário enviou uma mensagem.
Exemplo do resultado:
```
{id: 123, text: 'bom dia!'}
```
BX.LiveChatWidget.SubscriptionType.userVote – o usuário avaliou a conversa.
Exemplo do resultado:
```
{vote: "like"} // like|dislike
```

BX.LiveChatWidget.SubscriptionType.every – o evento que permite exibir todos os eventos de uma vez.
O código que chama o evento every distingue-se do anterior:

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

Exemplo do resultado:

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

No type você receberá o código do evento, e no data - os dado do evento (refere-se à lista acima).

Você pode montar o Javascript final usando as 3 componentes do código descritas acima de acordo com as suas necessidades.

Exemplo:

<script type="text/javascript"> window.addEventListener('onBitrixLiveChat', function(event)
{
	var widget = event.detail.widget;
	
	// Identificação da autorização externa do usuário
	widget.setUserRegisterData({
		'hash': '12b42ebcec7e3c26a313272c26efddbd',
		'name': 'Rodrigo',
		'lastName': 'Pereira',
		'avatar': 'http://files.smith.com/images/avatar-rodrigo.jpg',
		'email': 'rodrigo@pereira.com.br',
		'www': 'https://bitrix24.com.br',
		'gender': 'M',
		'position': 'Ouro'
	});	

	// Identificação das informações adicionais (formato alargado; publicado no início de uma nova sessão)
	widget.setCustomData([
		{"USER": {
			"NAME" : "Rodrigo Pereira",
			"AVATAR" : "http://files.smith.com/images/avatar-rodrigo.jpg",
		}},
		{"GRID": [
			{
				"NAME" : "E-mail",
				"VALUE" : "rodrigo@pereira.com.br",
				"DISPLAY" : "LINE",
			},
			{
				"NAME" : "Código do cliente",
				"VALUE" : "12234",
				"COLOR" : "#ff0000",
				"DISPLAY" : "LINE"
			},
			{
				"NAME": "Site",
				"VALUE": location.hostname,
				"DISPLAY": "LINE"
			},
			{
				"NAME": "Página",
				"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. Alterar as frases padrão no widget

No Bitrix24 você pode alterar as frases padrão exibidas no widget do site.

Para fazer isso, use o seguinte código Javascript:

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

	widget.subscribe({
		type: BX.LiveChatWidget.SubscriptionType.configLoaded,
		callback: function() 
		{
			widget.addLocalize({VARIÁVEL_DA_FRASE: 'Novo texto'});				
		}
	});
	
});
</script>

Para acessar a lista completa das frases, chame a consola do navegador e insira a seguinte expressão:

console.table(BXLiveChat.__privateMethods__.localize);

Saiba mais no artigo Alterar as frases padrão no widget do site.

5. Desativar a verificação adicional de configuração de multisite para o widget

Na configuração de multisite em um núcleo e no subdomínio do domínio principal, a autorização do usuário é redefinida.

Para evitar que a autorização seja redefinida, você precisa fazer algumas configurações.

Por padrão, a verificação de configuração multisite do widget de Bitrix24 está habilitada no módulo Canais abertos (imopenlines) desde a versão 21.400.0. Se tal configuração for encontrada, uma notificação será exibida no widget.

O código a seguir desativa a verificação:

<script>window.addEventListener('onBitrixLiveChat', function(event){

  var widget = event.detail.widget;

  widget.setOption('checkSameDomain', false);

    });
</script>

Essa informação foi útil?

Assistência de Especialistas em Integração

Não é o que estou procurando

Texto complexo e incompreensível

Informações estão desatualizadas

Explicação muito breve, preciso de mais informações

Não gosto de como esta ferramenta funciona

Obtenha seu Bitrix24 configurado por profissionais locais

ENCONTRAR PARCEIRO BITRIX24 NAS PROXIMIDADES

Ir ao Bitrix24

Não tem uma conta? Crie grátis

Bitrix24 Helpdesk