# Integrando chat widget ao seu site

## 🛠️ Integração do Chat do Tiflux com Sites e Sistemas

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

***

### 🎯 Introdução

A integração do **Chat do Tiflux** com sites e sistemas permite oferecer suporte em tempo real diretamente dentro das aplicações web dos clientes. Com a configuração adequada, é possível personalizar o visual do chat, enviar informações pré-preenchidas e adaptar a posição do widget para melhor usabilidade.

***

### 📚 Sumário

* 🌐 Inserir o Chat do Tiflux no Site
* 🧩 Enviar Parâmetros Extras no Chat
* 🧠 Uso Estratégico de Parâmetros Extras no Chatbot
* 🎯 Personalização da Posição do Chat Widget
* ❓ Perguntas Frequentes (FAQ)
* 🔍 Palavras-chave para IA, indexação e busca

***

### 🌐 Inserir o Chat do Tiflux no Site

#### ✅ Definição

O Tiflux oferece um script HTML configurável que pode ser integrado a sites ou aplicações web, permitindo a ativação do chat.

#### 🛠️ Passo a Passo

1. Acesse: `Configurações > Geral > Chat` 
2. Configure as cores e ícones conforme a identidade visual desejada.
3. Copie o script HTML gerado.
4. Cole o código no site ou aplicação web.
5. Certifique-se de que o chat esteja ativo no Tiflux.

#### 💡 Boas Práticas

* Configure o chat visualmente antes de copiar o script.
* Garanta que o código seja inserido em todas as páginas relevantes do site.

<figure><img src="https://2304813967-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LCU_zijA4r4IkDIJyZG%2Fuploads%2FtdOdE7NZB4d7a3kXDjNu%2Fimage.png?alt=media&#x26;token=576bf298-0ac7-4d78-a4dc-abeb6385f506" alt=""><figcaption></figcaption></figure>

***

### 🧩 Enviar Parâmetros Extras no Chat

#### ✅ Definição

É possível enviar informações personalizadas (ex: nome, e-mail, telefone) diretamente do site para o chat do Tiflux.

#### 🛠️ Exemplo de Código com Parâmetros

```html
<script>
  var organization_token = '52ff5d69025353454354354354354353aeb39efd';   
  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>
```

#### 💡 Boas Práticas

* O preenchimento prévio agiliza o atendimento.
* Informações como nome, e-mail e telefone devem ser passadas com precisão.

***

### 🧠 Uso Estratégico de Parâmetros Extras no Chatbot

#### ✅ Definição

Os parâmetros extras podem ser utilizados no fluxo "Verificar parâmetros" do chatbot, permitindo respostas personalizadas.

#### 🛠️ Exemplo com Parâmetros Personalizados

```html
htmlCopiarEditar<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: "valor 1", param_2: "valor 2"};
 script.type = 'text/javascript';
 script.src = 'https://public-assets.tiflux.com/chat_widget.js?organization_token='+organization_token;
 document.head.appendChild(script);
</script>
```

#### 💡 Boas Práticas

* Personalize os fluxos do chatbot usando os parâmetros recebidos.
* Integre o chat a sistemas que já tenham dados do cliente para automatizar o atendimento.

{% embed url="<https://www.youtube.com/watch?v=9Q5hw70clHQ>" %}

***

### 🎯 Personalização da Posição do Chat Widget

#### ✅ Definição

Agora é possível ajustar a posição do ícone do chat na tela do usuário.

#### 🛠️ Exemplo de Código

```html
htmlCopiarEditar<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>
```

#### 💡 Boas Práticas

* **margin\_bottom**: ajusta a distância da parte inferior da tela.
* **margin\_right**: ajusta a distância da lateral direita da tela.
* Personalize para garantir que o ícone não sobreponha elementos do site.

***

### ❓ Perguntas Frequentes (FAQ)

🔹 **O chat pode ser inserido em qualquer site?**\
Sim, desde que seja possível adicionar código HTML.

🔹 **O que acontece se não enviar parâmetros extras?**\
O chat abrirá normalmente, mas sem informações pré-preenchidas do cliente.

🔹 **É possível esconder o ícone do chat?**\
Sim, utilizando o parâmetro `show_chat_icon = 'false'`.

🔹 **O chat pode ser personalizado para diferentes sistemas?**\
Sim, cada sistema pode enviar parâmetros próprios no script.

🔹 **O que é autoSend?**\
Quando `autoSend` está ativado, o chat abre automaticamente solicitando a seleção de departamentos.

***

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

```
integração chat Tiflux,
inserir chat site,
parâmetros extras chat,
personalizar chat widget,
configurar chat Tiflux,
autoSend chat,
chatbot parâmetros Tiflux,
chat com dados pré-preenchidos,
chat personalizado Tiflux,
script chat site
```

***