# 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="/files/BpKOq5efvOqzE8gf7NoE" 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
<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
<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
```

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guia-de-uso.tiflux.com/sistema/chat/integrando-chat-ao-site-ou-sistemas.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.