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

Autor: Ana Laura L.

Última atualização: 6 de novembro 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. Ocultar formulário de contato

Você pode ocultar o formulário de boas-vindas que pede os detalhes de contato do cliente no bate-papo ao vivo.

Para fazer isso, use o seguinte código:

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

Para desenvolvedores

Você pode personalizar qualquer um dos componentes da seguinte seção: imopenlines/install/js/imopenlines/component/widget/src/component/

Observe que, após a personalização, você precisará rastrear as alterações nesses componentes e manter suas edições atualizadas.

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

Ir ao Bitrix24

Não tem uma conta? Crie grátis

Suporte Bitrix24