Tiflux
  • CONCEITOS
    • Tiflux - Solução de Service Desk
    • Glossário
    • SLA - Resumo prático
    • Ticket
    • Mesa
    • Clientes
    • Single Sign-On (SSO)
  • SISTEMA
    • Dashboard
      • Explicando Widgets
        • Widgets sobre Tickets
        • Widgets sobre Chats
        • Widget sobre Recursos
    • Chats
      • Pré-requisitos
      • Utilização
      • Integrando chat ao site ou sistemas
    • Clientes
      • Novo Cliente
      • Informações
      • Usuários
      • Tickets
      • Contratos
      • Recursos
      • Relacionamentos
      • Faturamento
    • Portal do Cliente
      • Cadastrando um Usuário Cliente
        • Associando o Usuário a Múltiplos Clientes
        • Permissões do Usuário Cliente
        • Acessando o Portal do Cliente
      • Usabilidade
        • Dashboard
        • Tickets
          • Autorização para novos tickets
            • Configurando a Funcionalidade de Autorização de Novos Tickets
            • Autorizando a Abertura de Novos Tickets
          • Revisão e Avaliação de Tickets Fechados
        • Recursos
        • Contratos
        • Relatórios
          • Extrato de Consumo Cliente
            • Filtros
            • Download XLSX
            • Download Sintético
            • Download Detalhado
          • Gráfico Consumo Cliente
            • Filtros
            • Visualização
          • Executivo
            • Filtros
            • Visualização
        • Base de Conhecimento no Portal do Cliente
          • Configurações
      • Funcionalidades Adicionais
    • Recursos
      • Dashboard de Recurso
      • Diferença de Recurso e Agente
      • Instalação do Agente
        • Pré-requisitos para a instalação
        • Instalação agente: Windows
        • Instalação do agente: Hyper-V
        • Instalação agente: Linux
        • Instalação agente: Mac
          • Splashtop em MacOS
        • Instalação agente via GPO
      • Acesso Remoto P2P
        • Pré-requisitos
        • Configurando o Tiflux
        • Instalação para o Técnico
        • Utilização e Funcionalidades
        • Acesso Remoto P2P Mobile
        • Configurando o acesso remoto P2P mobile
        • Utilização e Funcionalidade P2P mobile
      • Dashboard de Agente
      • Informação sobre o agente remoto
    • Contratos
      • Menu de Contratos
      • Tipos de Contratos
        • Limite de Atendimento
        • Tipo Livre
        • Tipo Produto / SaaS
        • Crédito
        • Crédito compartilhado
        • Horas
        • Horas Cumulativas
      • Criando um Contrato
      • Editar um contrato
      • Como confirmar os valores do contrato?
    • Relatórios
      • Atendentes
        • Atraso de apontamentos
          • Filtros
          • Exibições
        • Carga de trabalho
          • Filtros
        • Chat Detalhado
        • Deslocamentos
        • Executivo atendentes
        • Extrato de apontamentos
        • Gráficos de apontamentos
        • Picos de atendimento
      • Faturamento
        • Erros de faturamento em lote
        • Extrato consumo de cliente
        • Faturamentos pendentes
        • Gastos Extras
        • Gráfico consumo contrato
          • Filtros
          • Visualização
        • Histórico de faturamentos
        • Reajuste de contrato
      • Administrativo
        • Avaliações de atendimento
        • Catálogo de serviço
        • Engajamento de clientes
        • Executivo
          • Criando um novo Modelo de relatório Executivo
        • Exportar
        • Gestão e indicadores
      • Recursos
        • Gatilhos disparados
        • Histórico de ações
        • Histórico de gatilhos
        • Informações de recursos
        • Softwares e Licenças
      • Excluídos
    • Agenda
    • Conhecimento
      • Avaliação de Conhecimentos
    • Cofre de senhas
    • Configurações
      • Geral
        • Campos personalizados
        • Chat
          • Geral
          • Botões na avaliação do chat
          • Departamentos
          • Fluxo de Chatbot
          • Expediente
          • Mensagens Personalizadas
          • Notificações
          • Catálogo de Serviços
        • E-mail
          • Configuração de SPF
        • Integrações
        • Organização
          • Geral
          • Notificações
          • Financeiro
          • Caixa de Pré-tickets
          • Formulário externo
          • Whitelabel
          • Licenciamento
          • Excluir Organização
          • Segurança
      • Financeiro
        • Deslocamentos
        • Gastos extras
        • Serviços avulsos
        • Tipos de contrato
      • Recurso
        • Agente remoto
        • Gatilhos
          • [New] Gatilhos
            • Processador
            • Uso de Disco
        • Monitoramento
          • Monitoramento X Monitoramento Avançado
        • Recursos de backup
        • Scripts
        • Tipos de recurso
      • Mesa de serviço
        • Atividades agendadas
        • Automações
        • Catálogos de serviços
        • Checklists
        • Feriados
        • Mesas de serviço
          • Prioridade
          • Clientes
          • Grupos de atendentes
          • Mesas de serviço
          • Expediente
          • Estágio
          • Status
          • Reabertura de tickets
          • Catálogo de Serviço
          • Revisão
          • Avaliação de tickets
        • Modelos
          • Modelos de E-mail
          • Modelos de apontamentos
          • Modelos de respostas
          • Modelos de relatórios
          • Modelo de abertura de ticket
          • Modelo de chat
        • Variáveis
      • Usuários
        • Grupos de atendentes
        • Grupos de permissão
        • Minha Conta
        • Autenticação de dois Fatores (2FA)
        • Usuários
      • Importações
        • Autorizações
        • Campanha
        • Catálogo de serviços
        • Clientes
        • Cofre de senhas
        • Recursos
        • Solicitantes
    • Tickets
      • Informações gerais
      • Apontamentos
      • Comunicação
      • Compromissos
      • Chat
      • Valorização
      • Empréstimos
      • Checklists
      • Assinatura eletrônica
      • Jira
      • GitHub
      • Histórico
  • APLICATIVOS
    • Tiflux Chats
    • Tiflux Tickets
  • Sobre a Tiflux
    • Canal de suporte
    • LGPD e Segurança
      • Obrigatoriedade Autenticação 2FA
    • Links úteis
    • Release Notes 🚀
  • Integrações
    • Inteligência Artificial
      • Como configurar a integração com a OpenAI
      • Como criar uma conta na OpenAI e como adicionar uma forma de pagamento
    • Financeiro
      • Asaas
      • Conta Azul
        • Características
        • FAQ
    • Análise de dados
      • API v1
        • Capturando ID das Entidades
        • Capturando ID das Mesas e Estágios
      • API v2
        • Autenticação
        • Consulta de Dados - Requisições do Tipo GET
        • Inserção de Dados - Requisições do Tipo POST
        • Atualização de Dados - Requisições do Tipo PUT
        • Exclusão de Dados - Requisições do Tipo DELETE
      • Data Warehouse
        • Manipulando as informações no Power BI
        • Ajuste seu Power BI usando o Data Warehouse
        • Dicionário de dados
      • Power BI
        • Como utilizar
    • API Oficial do WhatsApp
      • Gupshup
        • Gerenciador de Negócios
        • Gupshup
        • Modelo de mensagem HSM
        • Como fazer recargas no Gupshup
        • Selo de conta verificada do WhatsApp
      • WhatsApp Cloud API
        • Como inserir um número no WhatsApp Cloud API
      • Especificações das API’s Oficiais do WhatsApp
        • Limites de mensagens das API's Oficiais
        • FAQ
    • Telefonia
      • PABXFLEX Telefonia
        • Configurando PABXFLEX integrada ao tiflux
      • VIP Solutions Telefonia
        • Configurando VIP Solutions integrada ao tiflux
    • Projetos
      • Jira
        • Não foi possível criar a Issue pelo Tiflux
      • GitHub
        • Instalação
        • Criação de Issues
    • Terceiros
      • Make
      • Zabbix
    • Splashtop
      • Instalação para técnico
      • Liberações Splashtop
  • FAQ
    • Sobre o FAQ Tiflux
      • Agenda
      • Chat
        • O que fazer quando o cliente responde errado o chatbot?
        • Url para início e consulta de conversas
        • Pesquisar histórico de conversas do chatbot
        • Por que o aplicativo WhatsApp para Desktop não exibe botões de ação rápida ou menus de lista?
      • Agente Remoto
        • [FAQ] Acesso Remoto P2P
        • Acesso Remoto Apenas Carregando
        • Caminho Logs do Agente
        • Erro de imagem durante o acesso remoto via Splashtop
        • Instalação e Remoção do Agente Remoto
        • Problemas mais comuns no Agente Tiflux - Windows
        • Reiniciar os serviços do agente em Linux
      • Contratos
      • Recursos
        • Excluir licenças do Windows de dentro do recurso
        • Coleta de Logs do Acesso Remoto (TiPeerToPeer)
        • Problemas com visualização de atualizações no Dashboard
      • Relatórios
        • Por que campos iguais de relatórios diferentes mostram valores diferentes?
      • Tickets
        • Editar o cliente no ticket
        • Ao abrir um ticket, não são listados os clientes ou as mesas de serviços
        • Enviar Ticket para outra mesa
        • Automações não estão sendo disparadas
      • Usuários
        • Usuário sem acesso ao Sistema
        • Problema de autenticação 2 fatores - iOS
        • Exclusão de usuários
Powered by GitBook
On this page
  • Parâmetros extras no chat
  • Personalização da posição do Chat Widget
  • Como configurar
  1. SISTEMA
  2. Chats

Integrando chat ao site ou sistemas

PreviousUtilizaçãoNextClientes

Last updated 1 month ago

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 = 'email@email.com';   (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.