Leia as perguntas frequentes
Novo
Suporte do Bitrix24
Inscrição e autorização
Como Começar?
Feed
Bate-papos e chamadas
Calendário
Bitrix24 Drive
E-mail
Grupos de trabalho
Tarefas e Projetos
CRM
CoPilot - IA no Bitrix24
Contact Center
Telefonia
CRM + Loja On-line
Sales Center (beta)
Análise CRM (beta)
Sales Intelligence (beta)
Criador de BI
Automação
Marketing
Bitrix24.Sites
Loja On-line (beta)
Gerenciamento do inventário
Empresa
Base de conhecimento
Videoconferências em HD
Processos de negócio
Robotic Process Automation (beta)
Market (Aplicativos)
Assinatura
Enterprise
Configurações
Meu perfil
Aplicativo desktop
Aplicativo móvel
Bitrix24 On-premise
Questões Gerais
Novidades do Helpdesk (arquivo)

Suporte Bitrix24

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

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.shelenkov.com/images/avatar-ivanov.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.shelenkov.com/images/avatar-ivanov.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.shelenkov.com/images/avatar-ivanov.jpg',
		'email': 'rodrigo@pereira.com.br',
		'www': 'https://bitrix24.ru',
		'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.shelenkov.com/images/avatar-ivanov.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