Site

Coloque o Quickchat AI no seu site como um Widget flutuante, um Embed inline ou uma Página de Chat hospedada. Cobre instalação, controle de acesso, aparência, conteúdo de texto e parâmetros customizados.

Há três formas de colocar o seu Agente de IA do Quickchat na web. Escolha a que melhor se encaixa na superfície que você quer mostrar:

Widget: o balão de chat flutuante no canto do seu site. Ideal para suporte de uso geral.
Embed: uma janela de chat inline que fica exatamente onde você quiser na página. Ideal para incorporar a IA dentro de uma tela específica de um app, página de central de ajuda ou página de detalhe de produto.
Página de Chat: uma experiência de chat hospedada em tela cheia, servida pelo Quickchat (sem instalação, sem código). Ideal para quando você quer compartilhar um link com alguém (por exemplo, e-mail de suporte, Slack interno, beta testers) sem mexer no navegador da pessoa.

Instale a superfície escolhida em Canais → Seu site → Instalar. A página tem três sub-abas que espelham a estrutura deste artigo: Instalar (snippets + acesso), Aparência (estilo visual) e Conteúdo de texto (os textos e rótulos visíveis ao visitante).

O Widget permite incorporar o seu Agente de IA do Quickchat diretamente no seu site, oferecendo aos usuários uma forma simples de interagir com a IA. O Widget geralmente aparece como um balão de chat no canto inferior direito da página. Ao clicar, ele expande para uma janela de chat, permitindo que os usuários façam perguntas, peçam ajuda ou acessem informações.

Localize o código da sua página

Abra o arquivo HTML do seu site ou acesse o editor de código do seu construtor de sites.
Obtenha o código do Widget
- Acesse o app do Quickchat AI.
- Vá em Seu site dentro da categoria Canais na barra lateral esquerda.
- Clique na aba Instalar.
- Copie o código do Widget script.
Cole o código

Insira o Widget script logo antes da tag de fechamento </body> em todas as páginas onde você quer que o Widget apareça.

Se você usa WordPress

A forma mais fácil é o nosso plugin oficial do Agente de IA do Quickchat: instale-o pelo Diretório de Plugins do WordPress, cole o seu Scenario ID e o Widget aparece automaticamente, sem precisar editar o código do tema. O guia do WordPress tem instruções passo a passo, além de uma opção de script manual caso você prefira não usar o plugin.

Se você usa um Website Builder

Se você usa plataformas como WordPress, Webflow ou Wix, consulte a documentação delas sobre como adicionar código customizado.

Para ajuda, entre em contato pelo contact@quickchat.ai.

Página de Chat

A Página de Chat é uma versão hospedada em tela cheia do seu Agente de IA que fica em uma URL do Quickchat. Não há nada para instalar: compartilhe o link e seus visitantes podem conversar com o seu Agente diretamente no navegador. Use-a quando:

Você quer uma experiência de chat, mas não tem um site (ou não quer mexer no código dele).
Você está compartilhando a IA internamente com um grupo pequeno (beta testers, equipe de suporte, prospects de vendas) e precisa de um link com controle de acesso em vez de um widget público.
Você quer enviar a IA como canal de follow-up por e-mail, Slack ou no seu CRM.

Configure quem pode abrir a Página de Chat em Instalar → Acesso à Página de Chat (veja Controle de acesso abaixo).

Controle de acesso

A aba Instalar tem dois controles de acesso que se aplicam à sua implantação:

Um botão principal no topo da aba Instalar. Quando ativado, os scripts do Widget e do Embed funcionam normalmente nos navegadores dos visitantes. Quando desativado, o Widget e o Embed ficam indisponíveis no seu site mesmo que o script ainda esteja colado, útil para colocar a IA offline temporariamente sem remover o snippet, ou para restringir o acesso público enquanto você mantém a Página de Chat aberta para usuários convidados.

Acesso à Página de Chat

Independente do controle do Widget e Embed, você pode restringir quem pode abrir a Página de Chat:

Qualquer pessoa: a URL da Página de Chat é pública. Qualquer pessoa com o link pode usá-la.
Apenas usuários convidados: apenas os Usuários do Chat que você convidou (por e-mail) podem usar a Página de Chat. Eles precisarão se autenticar.
Ninguém: a Página de Chat fica totalmente desativada.

Para conceder acesso em Apenas usuários convidados, clique em Convidar Usuários do Chat ao lado do botão de seleção. Isso leva você a Configurações da Conta → Usuários do Chat, onde você pode enviar convites por e-mail e gerenciar quem tem acesso.

Personalização

As sub-abas Aparência e Conteúdo de texto permitem ajustar a aparência do Widget, Embed e Página de Chat e o texto que seus visitantes veem. As três superfícies de implantação compartilham essas configurações: altere uma vez e elas se aplicam em todos os lugares onde o seu Agente está implantado.

O painel direito das abas Instalar/Aparência/Conteúdo de texto tem seus próprios controles de pré-visualização: alterne entre as prévias de Widget, Embed e Página de Chat, e entre os viewports Desktop e Mobile, para ver suas alterações antes de publicar.

Aparência

Estilo visual das superfícies de chat, agrupado em Marca, Tamanho e Posição, Tema e Outras Configurações.

Marca

Avatar do agente de IA: uma única imagem usada tanto no cabeçalho do chat quanto no botão do launcher (máx. 5 MB). É uma única configuração, não duas: você envia uma imagem e ela aparece nos dois lugares (substitui o antigo “logo do cabeçalho” e o “ícone do launcher”, que eram separados). Todo Agente já vem com um avatar padrão integrado. Redefinir para padrão restaura esse padrão e, ao excluí-la, nenhum avatar é exibido.

Tamanho e posição

Tamanho do launcher: Classic, Input Only ou Pequeno. Controla a aparência do launcher do chat antes de ele ser aberto.
Rótulo do launcher: exibido apenas quando Pequeno está selecionado: texto customizado no botão do launcher pequeno (até 25 caracteres), por exemplo “Ask AI” ou “Chat”. Deixe vazio para um launcher apenas com ícone.
Posição do widget: canto inferior direito ou inferior esquerdo.
Dimensões da janela de chat: largura (300–700px) e altura (400–1200px) da janela de chat.
Launcher arrastável: permite que os visitantes arrastem o launcher para outro ponto da página. Útil quando ele cobre conteúdo importante.

Tema

Escolha como as superfícies de chat são coloridas:

Claro e Escuro são presets fixos que ficam iguais em qualquer conta.
Personalizado libera uma paleta completa só sua. Quando Personalizado está selecionado, surgem controles de cor para o fundo, cabeçalho e texto do cabeçalho, cor de destaque (usada em botões como o botão de início do pré-chat, os chips de sugestão e as ações de avaliação), balão de mensagem e seu texto, texto das mensagens da IA, cor dos links, campo de entrada, bordas e mais. Cada cor é verificada quanto ao contraste WCAG AA em relação ao seu fundo e avisa você quando uma combinação fica difícil de ler.

As cores de marca do cabeçalho e de destaque ficam no tema Personalizado. Claro e Escuro permanecem presets neutros, então alternar entre eles nunca carrega uma cor customizada.

Quando Personalizado está selecionado, a Chat Page também tem suas próprias cores de barra lateral: Fundo da barra lateral, Texto da barra lateral, Hover da barra lateral e Texto ao passar o cursor. Aplicam-se apenas à visualização em página inteira da Chat Page, não ao widget bubble nem embed. Deixe as cores de texto sem definir e a Chat Page escolherá automaticamente uma cor legível para o fundo que você escolher.

Você também pode definir o raio dos cantos (arredondamento de balões, campos de entrada e botões) e o tamanho do texto. Ambos se aplicam em todos os modos de tema.

Outras configurações

Widget de abertura automática: abre o Widget automaticamente quando a página carrega.
Remover marca do Quickchat AI: oculta o rodapé “Powered by Quickchat AI” para uma experiência totalmente white-label (disponível em planos que incluem white-labeling).
Avaliação da Conversa: permite que os visitantes avaliem a conversa no final. Os resultados aparecem em Insights → Avaliação da Conversa.

Conteúdo de texto

A sub-aba Conteúdo de texto controla cada texto visível ao visitante:

Texto do cabeçalho: texto exibido no topo da janela de chat.
Mensagem de boas-vindas: a primeira mensagem do Agente de IA no início de cada conversa (por exemplo, “Olá, você precisa de ajuda?”).
Mostrar como pop-up: um botão que mostra a mensagem de boas-vindas como um balão de fala flutuante ao lado do launcher para chamar a atenção antes de o visitante clicar.
Iniciadores de conversa: até 3 mensagens de exemplo exibidas ao visitante antes de ele começar a digitar. Clicar em uma delas a envia como primeira mensagem, útil para direcionar os visitantes aos pontos fortes da sua IA (“Como instalo o widget?”, “Quais integrações vocês oferecem?”).
Placeholder de entrada: texto de dica no campo de mensagem vazio.
Texto de aviso: texto exibido por trás da conversa, normalmente informando aos usuários que eles estão falando com uma IA. Recomendamos manter esse texto claro e visível.

Recursos avançados: parâmetros personalizados

O Widget e o Embed do Quickchat AI permitem passar parâmetros customizados na inicialização. Eles podem ser usados para:

aprimorar a analítica (ficam disponíveis no export em CSV na plataforma do Quickchat)
personalizar a conversa (o Quickchat AI tem ciência de todos os parâmetros fornecidos)

Veja exemplos de parâmetros customizados úteis:

User name: Mike
Subscription Tier: VIP
Most recently purchased item: Silver package (upgraded)
Next account level: Platinum
Points required to reach the next account level: 758

Veja um exemplo de conversa mostrando um Agente de IA ciente dos valores fornecidos em parâmetros customizados:

Exemplo de conversa com parâmetros customizados

Para adicionar parâmetros customizados como os acima, inclua a linha a seguir no script que você encontrou em Seu site > Instalar.

O Widget e o Embed usam a mesma assinatura de chamada:

_quickchat("custom_params", {
  "User name": "Mike",
  "Subscription Tier": "VIP",
  "Most recently purchased item": "Silver package (upgraded)",
  "Next account level": "Platinum",
  "Points required to reach the next account level": "758",
});

Esses atributos são atribuídos a cada nova conversa; recomendamos limitar isso a algumas chaves.

Exemplo de script:

widget

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("custom_params", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758"});
  _quickchat("init", "abcdefghij");
</script>

Embed

<div id="quickchat-embedded" style="height:600px;overflow:hidden;"></div>
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("containerId", "quickchat-embedded");
  _quickchat("custom_params", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758"});
  _quickchat("init", "abcdefghij");
</script>

Embed

O Embed permite colocar o Agente de IA do Quickchat diretamente dentro de uma página como uma janela de chat inline, em vez de um balão flutuante. Use-o quando quiser que o chat fique em um ponto específico da página: uma coluna da central de ajuda, uma página de contato, uma barra lateral dentro do app, etc.

Como adicionar o Embed

Obtenha o código do Embed
- Acesse o app do Quickchat AI.
- Vá em Canais → Seu site na barra lateral esquerda.
- Clique na aba Instalar.
- Copie o Embed snippet (ele inclui tanto o contêiner <div id="quickchat-embedded"> quanto o loader script).
Abra o arquivo HTML do seu site ou o editor de código do seu construtor de sites.
Cole o código
- Insira o Embed snippet dentro do <body> da sua página.
- Coloque-o exatamente no ponto onde você quer que a janela de chat apareça. O <div> controla o tamanho: ajuste o style="height:600px" inline para combinar com o espaço no seu layout.

Site

Widget

Como incorporar o Widget no seu site