> For the complete documentation index, see [llms.txt](https://guia-de-uso.tiflux.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guia-de-uso.tiflux.com/sistema/configuracoes/configuracoes-gerais/configurando-o-chat/novo-chat-widget.md).

# Novo Chat Widget

## 📝 Novo Chat Widget

```
📍 Localização:
📂 Menu > Configurações > Geral > Chat
```

***

### Introdução

O **Chat Widget** do Tiflux é uma ferramenta moderna e inteligente que permite integrar um chat de atendimento diretamente no site ou aplicação dos seus clientes. Com **inteligência artificial integrada**, o widget oferece respostas automáticas, triagem inteligente e suporte 24/7, melhorando significativamente a experiência do usuário e a eficiência do atendimento.

Antes de implementar em produção, o sistema permite realizar **testes e visualização prévia** para garantir que o widget esteja configurado conforme suas necessidades. O widget se integra perfeitamente ao ecossistema Tiflux, criando automaticamente tickets e registrando todas as interações para acompanhamento pela sua equipe.

> ✅ Ideal para atendimento automatizado, captação de leads, suporte ao cliente e integração com IA para respostas inteligentes.

***

### 📚 Sumário

* 🎨 Configuração do Chat Widget
* 🤖 Integração com Inteligência Artificial
* 👁️ Testes e Visualização Prévia
* 🚀 Implementação em Produção
* 📊 Acompanhamento de Chats
* ️ Exclusão do Widget
* ️ Avisos importantes
* ❓ Perguntas Frequentes (FAQ)
* 🔍 Palavras-chave para IA, indexação e busca

***

### 🎨 Configuração do Chat Widget

Para configurar o Chat Widget no Tiflux, siga os passos abaixo:

#### **Acessando as Configurações:**

1. No menu lateral esquerdo, clique em **"Configurações"**
2. Na seção **"Geral"**, clique em **"Chat"**
3. Depois na aba Chat Widget

<figure><img src="/files/y9gqkZUbKGCwCKqqeMHd" alt=""><figcaption></figcaption></figure>

#### **Personalização do Widget:**

Na tela de configuração, você poderá ajustar:

* **Cor do Widget**: Personalize as cor do widget para combinar com a identidade visual da sua empresa
* **Nome:** De um nome identificador para este Chat Widget
* **Comportamento > Reconhecer Usuário Automaticamente:** Estando este ativado, e o chat identificando que o Usuário ja encontra-se cadastrado, a mensagem de boas vindas sera direcionada para o nome dele de acordo com a configuração.
* **Aparência**: Você pode definir onde ficara o "balão" de mensagem do Chat Widget

  * Superior esquerdo
  * Superior direito
  * Inferior esquerdo
  * Inferior direito

  <figure><img src="/files/AcWTQtpqBriMKcGWP0yO" alt=""><figcaption></figcaption></figure>
* Cor do widget: Você consegue definir a cor do balão de mensagem<br>

  <figure><img src="/files/kk28BjmZOVw0hfOObU9Q" alt=""><figcaption></figcaption></figure>

> 💡 **Dica:** Configure uma mensagem de boas-vindas amigável e objetiva para criar uma boa primeira impressão.

<figure><img src="/files/SMSMWWfSzY47FUONKRWi" alt="" width="239"><figcaption></figcaption></figure>

Quando o Widget não for para reconhecer automático, campos serão necessarios ser definidos como obrigatórios para poderem ser iniciadas as conversas.

Conforme imagem abaixo, o campo Nome por padrão é automático

Para os campos "Telefone / Whatsapp" ou "E-mail", um deles devera ser Obrigatório tambem, tendo a opção de escolha para os 2.

<figure><img src="/files/PEUQP7JQQG61X7vAigl9" alt="" width="239"><figcaption></figcaption></figure>

***

### 🤖 Integração com Inteligência Artificial

O Chat Widget do Tiflux já nasce com **IA integrada**, oferecendo funcionalidades avançadas de atendimento automatizado (necessário contrato de creditos de IA):

#### **Funcionalidades de IA:**

* **Respostas Automáticas**: A IA pode responder perguntas automaticamente.
* **Triagem Inteligente**: Classifica e direciona o atendimento para o departamento correto

***

### 👁️ Testes e Visualização Prévia

Antes de colocar o Chat Widget em produção, é essencial realizar testes para garantir que tudo funcione conforme esperado.

Clicando no "balão" do chat widget, abrir a tela de conversa, inclusive mostrando conversas anteriores no historico.

#### **Como Realizar Testes:**

1. **Visualização Prévia:**
   * Na tela de configuração, selecione **Prévia de uso**
   * Uma janela será aberta mostrando como o widget aparecerá para os visitantes
   * Teste diferentes cenários (abertura, mensagens, fechamento)
2. **Teste de Funcionalidades:**
   * Envie mensagens de teste
   * Teste o fluxo de chat caso tenha algum definido
   * Valide o redirecionamento para departamentos
   * Verifique o registro no histórico de chats
3. **Ajustes:**
   * Faça os ajustes necessários baseados nos testes
   * Repita o processo até estar satisfeito com o resultado

> 💡 **Dica:** Crie um ambiente de teste com usuários internos antes de liberar para clientes reais.

<figure><img src="/files/7FzBKCctmW10q4xA1rlZ" alt=""><figcaption></figcaption></figure>

***

### 🚀 Implementação em Produção

Após testar e validar o Chat Widget, é hora de implementá-lo em seu site ou aplicação:

#### **Obtendo o Código de Instalação:**

1. Na tela de configuração do Chat Widget
2. Clique em **"Código HTML"**
3. Copie o código JavaScript fornecido
4. Cole o código antes do fechamento da tag `</body>` do seu site

<figure><img src="/files/jSrfbmEog2wWAxljsr9y" alt=""><figcaption></figcaption></figure>

***

### ️ Exclusão do Widget

Para excluir o Chat Widget do Tiflux, existem regras específicas que devem ser seguidas:

{% hint style="info" %}

#### **Nota: NÃO é possível excluir o Chat Widget enquanto houver chats ativos no sistema.**

{% endhint %}

#### **Processo de Exclusão:**

1. **Verifique Chats Ativos:**
   * Acesse **"Chats"** no menu lateral
   * Filtre por **"Em atendimento"**
   * Verifique se existem conversas em andamento
2. **Encerre os Chats:**
   * Para cada chat ativo:
     * **Encerre** o atendimento (se concluído)
3. **Aguarde Processamento:**
   * Após encerrar todos os chats, aguarde alguns segundos
   * O sistema precisa atualizar o status
4. **Exclua o Widget:**
   * Retorne para **Configurações > Geral > Chat > Chat Widget**
   * Clique no botão **"Lixeira"**&#x20;
   * Confirme a exclusão

#### **O que Acontece Após Excluir:**

* ✅ O widget é removido do seu site imediatamente
* ✅ O histórico de chats no widget é removido
* ✅ O histórico de chats no Tiflux é mantido
* ✅ Os tickets criados permanecem na base
* Novos visitantes não verão mais o chat
* Chats em andamento são interrompidos

***

### ❓ Perguntas Frequentes (FAQ)

🔹 **Posso personalizar as cores do widget?**\
Sim! Você pode personalizar cores do botão, para combinar com a identidade visual da sua marca.

🔹 **Os visitantes precisam se identificar para usar o chat?**\
Você pode configurar isso. É possível permitir chat anônimo ou exigir identificação (nome e email) antes de iniciar a conversa.

🔹 **Como faço para saber se o widget está funcionando no meu site?**\
Após instalar, acesse seu site e verifique se o ícone do chat aparece no canto inferior direito. Você também pode usar o modo de visualização prévia nas configurações.

🔹 **Posso ter mais de um widget no mesmo site?**\
Sim! Você pode criar múltiplos widgets para diferentes páginas ou departamentos, cada um com configurações específicas.

🔹 **O que acontece se eu excluir o widget com chats ativos?**\
O sistema **não permitirá** a exclusão. Você receberá uma mensagem de erro informando que existem chats ativos. É necessário encerrar todos os chats primeiro.

🔹 **Posso desativar temporariamente o widget sem excluí-lo?**\
Sim! Nas configurações, você pode desativar o widget temporariamente. Ele permanecerá configurado mas não aparecerá no site até ser reativado.

🔹 **O histórico de chats é armazenado por quanto tempo?**\
O histórico é armazenado indefinidamente no Tiflux, permitindo consultas futuras e análise de métricas. Você pode exportar os dados quando desejar.

**A IA consegue acessar a base de conhecimento automaticamente?**\
Sim! Quando configurada, a IA consulta automaticamente os artigos KCS da base de conhecimento para fornecer respostas precisas aos visitantes.

🔹 **Como faço para transferir um chat da IA para um atendente humano?**\
A transferência pode ser: (1) Automática - quando a IA não entende a solicitação; (2) Manual - o atendente assume o chat pelo painel; (3) Por regra - baseada em palavras-chave ou prioridade.

🔹 **O widget funciona em aplicativos móveis nativos?**\
Sim! Além de sites, o widget pode ser integrado em aplicativos iOS e Android através de WebView ou SDKs específicos.

🔹 **Posso bloquear determinados usuários ou IPs?**\
Sim! Nas configurações de segurança, você pode criar listas de bloqueio por IP, domínio de email ou comportamento suspeito.

***

### 🔍 Palavras-chave para IA, indexação e busca

```
chat widget tiflux,
chat com ia,
inteligência artificial chat,
widget de atendimento,
chatbot tiflux,
atendimento automatizado,
chat ao vivo,
live chat,
configurar chat widget,
instalar chat no site,
teste chat widget,
visualização prévia chat,
excluir chat widget,
chats ativos,
ia integrada,
atendimento 24/7,
chat responsivo,
personalização chat,
cores chat widget,
mensagem de boas-vindas,
integração chat,
automação atendimento,
```