Integrando chat ao site ou sistemas

Em Configurações -> Configurações de Chat -> Geral, você encontra o script HTML que poderá ser usado no seu site ou aplicação web. Antes de copiar o código, certifique-se de configurar os ícones e cores de acordo com a sua preferência, pois o script HTML é modificado conforme essa seleção.

Clique no botão copiar para que todo o código seja copiado e cole direto no seu site ou aplicação web para ativá-lo, lembrando que o chat precisa estar ativo dentro do Tiflux.

Parâmetros extras no chat

Você pode enviar para o chat do Tiflux, parâmetros extras que o seu site ou aplicação web poderá fornecer.‌

Por exemplo, se você tem um software web para seus clientes e deseja que o Tiflux reconheça o nome do cliente, login, telefone é necessário que a informação venha conforme o exemplo abaixo.

<script>
  var organization_token = '52ff5d6902defdb76a506089376c2f28aeb39efd';   
  var name = 'nome';   (já vem com o nome preenchido)
  var mail = '[e-mail]';   (já vem com o email preenchido)
  var phone = '47 999999999'; (já vem com o telefone preenchido)
  var autoSend = 'true'; (já abre o chat pedindo departamentos porque o nome e etc foi preenchido)
  var icon_color = 'null';   
  var init_minimal = 'true';   
  var show_chat_icon = 'true';   
  var script = document.createElement('script');   
  script.type = 'text/javascript';  
  script.src = 'https://public-assets.tiflux.com/chat_widget.js?organization_token='+organization_token+'&name='+name+'&mail='+mail+'&phone='+phone+'&autoSend='+autoSend;   
  document.head.appendChild(script); 
</script>

Seu sistema precisa informar estes parâmetros para que o chat do Tiflux receba estas informações e exiba em tela no momento do atendimento dos chats.

Se for preciso outras informações elas podem ser enviadas como parâmetros extras, segue abaixo um exemplo com 2 parâmetros extras (param_1 e param_2).

<script> 
 var organization_token = 'TOKEN DA ORG';  
 var icon_color = 'null'; 
 var init_minimal = 'true';  
 var show_chat_icon = 'false';  
 var script = document.createElement('script'); 
 var extra_params = {param_1: "param 1", param_2: "param 2"}; 
 script.type = 'text/javascript'; 
 script.src = 'https://public-assets.tiflux.com/chat_widget.js?organization_token='+organization_token;  
 document.head.appendChild(script);
</script>

Uma vantagem adicional de usar o “extra_param” é que é possível usá-lo em parceria com o fluxo “Verificar parâmetros” dentro do seu fluxo de chatbot, assim você pode usar o chat Widget de maneira mais estratégica.

Personalização da posição do Chat Widget

Agora é possível personalizar a posição do Chat Widget adicionando um parâmetro extra no código HTML do seu sistema ou site. Essa configuração permite definir a distância do ícone em relação às bordas inferiores e direitas da tela, garantindo melhor adaptação ao layout do site ou sistema.

Como configurar

Para ajustar a posição do ícone do Chat Widget, utilize o objeto extra_params, definindo os valores de margem em porcentagem (%). Veja abaixo um exemplo de implementação:

<script> 
 var organization_token = 'TOKEN DA ORG';  
 var icon_color = 'null'; 
 var init_minimal = 'true';  
 var show_chat_icon = 'false';  
 var script = document.createElement('script'); 
 var extra_params = {
 margin_bottom: 50,
 margin_right: 50
 };
 script.type = 'text/javascript'; 
 script.src = 'https://public-assets.tiflux.com/chat_widget.js?organization_token='+organization_token;  
 document.head.appendChild(script);
</script>

• margin_bottom: controla a distância vertical (margem inferior).

• margin_right: controla a distância horizontal (margem direita).

Com essa configuração, o ícone do Chat Widget será reposicionado conforme os valores definidos, proporcionando maior flexibilidade na integração com seu sistema ou site.