Site

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: Instalar (escolha como adicionar o seu Agente de IA), Aparência (estilo visual) e Conteúdo de texto (os textos e rótulos visíveis ao visitante). A aba Instalar abre com um seletor de método, mantém os controles de disponibilidade e acesso em uma seção própria e exibe um Scenario ID copiável de que os plugins e a API precisam.

Ferramentas opcionais de configuração

• Verificar um trecho de Widget. Verifique o código colado com o Scenario ID fornecido. Não acessa seu site.

• Comparar métodos de implantação. Compare os canais, o acesso ao site e os recursos declarados com as opções do Quickchat AI. Seu site e sua conta não são inspecionados.

• Comparar HTML e Markdown de uma página de exemplo. Obtenha o HTML inicial, o conteúdo Markdown e os links de ferramentas de uma amostra fixa do Quickchat AI. Não executa JavaScript nem inspeciona sites arbitrários.

Os formulários estão em inglês.

Widget

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.

Como adicionar o Widget ao seu site

Abra Canais → Seu site → Instalar. A aba começa com “Como pretende adicionar o seu agente de IA?” e lista os métodos de instalação, começando pelo mais fácil. Escolha o que corresponde ao seu site:

• WordPress: instale o nosso plugin oficial do Agente de IA do Quickchat gratuito, cole o seu Scenario ID e o Widget aparece automaticamente, sem precisar editar o código do tema.
• Shopify: adicione o Widget através do Editor de Temas da sua loja. Consulte o guia do Shopify.
• Webflow, Wix e outros: copie um snippet, cole-o na configuração de código personalizado para o site inteiro do seu construtor e aplique-o a todas as páginas. Não use um elemento Embed ou HTML em uma página. Veja Construtores de sites.
• Partilhe antes um link: não instale nada; partilhe o link da sua Página de Chat hospedada.
• Instalar manualmente com código: copie o snippet bruto do Widget ou do Embed e cole-o você mesmo no seu HTML.

Cada método abre um painel focado, passo a passo, com apenas o código ou o ID de que precisa.

O seu Scenario ID fica no topo da aba Instalar como um campo copiável. É o identificador de que os plugins e a API precisam, então copie-o daqui sempre que um passo de configuração o solicitar.

Instalar manualmente com código

Se você gerencia o seu próprio HTML, expanda Instalar manualmente com código na aba Instalar e:

1. Copie o snippet do Widget.
2. Abra o arquivo HTML da sua página. Em um construtor de sites, use em vez disso a configuração de código para o site inteiro (veja Construtores de sites).
3. Cole o snippet logo antes da tag de fechamento </body> em todas as páginas onde você quer que o Widget apareça.

Construtores de sites

No Webflow, Wix, Squarespace, Hostinger e construtores semelhantes, adicione o Widget uma única vez, pela configuração de código para o site inteiro do construtor:

1. Abra a configuração que adiciona código a todas as páginas. Dependendo do construtor, ela se chama Custom code, Code injection, Footer code ou Body end.
2. Cole ali o snippet do Widget e aplique-o a todas as páginas. Se puder escolher onde o código fica, escolha o rodapé ou o final do body. O snippet não funciona no head.
3. Publique o seu site. O balão de chat aparece em todas as páginas.

Cuidado

Não adicione o Widget com um elemento Embed ou HTML colocado em uma página. Muitos construtores exibem esses elementos dentro de um quadro pequeno e separado, onde o Widget não consegue abrir. Mesmo onde ele carrega, só aparece naquela página.

Onde fica a configuração para o site inteiro:

Construtor	Configuração de código para o site inteiro
Webflow	Site settings → Custom code → Footer code
Wix	Settings → Custom Code, depois All pages e Body - end. Requer um domínio conectado.
Squarespace	Custom Code → Code Injection → Footer. Planos Core, Plus, Advanced e alguns planos antigos.
Hostinger Website Builder	More (⋯) → Integrations → Custom code. Os scripts carregam automaticamente no final da página.

Os menus podem mudar e aparecer traduzidos no idioma do seu construtor. Se o seu construtor ou plano não tiver uma configuração de código para o site inteiro, compartilhe o link da sua Página de Chat em vez disso.

Precisa de ajuda?

Não é programador? A aba Instalar tem dois atalhos em Precisa de ajuda?:

• Peça ajuda à IA: abre o assistente integrado ao app, já preenchido com uma pergunta sobre como adicionar o Agente ao seu site.
• Enviar instruções por email a um programador: envia a um colega de equipe tudo o que ele precisa (o snippet do Widget, o seu Scenario ID e um link para este guia) para que ele possa instalá-lo por você.

Para mais ajuda, entre em contato conosco 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).

Iniciar uma nova conversa

Para reiniciar o chat e começar do zero:

• Widget ou Embed: abra o chat e clique no botão com uma caneta dentro de um quadrado no canto superior direito da janela de chat.
• Página de Chat: selecione Novo chat na barra lateral ou use o botão com uma caneta dentro de um quadrado no cabeçalho.

Isso inicia uma nova conversa com seu Agente de IA. A conversa anterior permanece na Caixa de entrada. Se você fechar e reabrir o Widget ou atualizar a página, a conversa existente poderá ser retomada. Pedir à IA para “reiniciar” ou “limpar o chat” não inicia uma nova conversa. Você não precisa limpar os cookies do navegador.

Controle de acesso

A aba Instalar mantém os controles de acesso em uma seção retrátil Disponibilidade e acesso. Expanda-a para encontrar dois controles que se aplicam à sua implantação:

Acesso a Widget e Incorporar

O botão no topo de Disponibilidade e acesso. 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.

O link Convidar Usuários do Chat abre Configurações → Organização → Membros da equipe. O formulário de convite atual oferece funções de equipe com permissões de acesso ao painel; ele não oferece uma função separada apenas para chat nem uma seção Usuários do Chat. Consulte Membros da equipe e funções antes de convidar alguém.

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: a foto de perfil ou o logo do Agente, 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. Disponível em todos os planos, inclusive no Free.

O Avatar do agente de IA se aplica ao Widget, ao Embed e à Página de Chat, mas não ao Discord, onde o avatar do bot vem do app do Discord que ele usa (veja Discord).

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.
• Fechar o launcher: o launcher Classic tem um pequeno botão de fecho no canto superior direito, revelado ao passar o cursor no computador e sempre visível em dispositivos táteis. Oculta o widget apenas na página atual; o launcher reaparece no carregamento seguinte. Os outros tamanhos de launcher não têm botão de fecho.
• 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: inferior esquerdo, inferior central ou inferior direito.
• 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.

Em Transparência, a opção Fundo define o quanto a janela de chat deixa ver o site. Funciona com todos os modos de tema, e o tema fornece a tonalidade:

• Sólido: a janela de chat tem um fundo sólido. Essa é a opção padrão.
• Vidro: a janela de chat fica translúcida e o site atrás dela fica desfocado, como vidro jateado. Ela ganha um tom branco em Claro, escuro em Escuro e da sua cor de fundo em Personalizado, onde uma cor de cabeçalho diferente do fundo é mantida como está para que sua marca continue visível. Opacidade do vidro define o quanto a tonalidade cobre a página, do nível mais baixo em que o texto do tema continua legível sobre qualquer site (50% em Claro, 65% em Escuro e conforme as suas cores em Personalizado) até 95%. Se em Personalizado nenhuma opacidade mantiver o texto legível com as suas cores, o widget usa um fundo sólido e as configurações explicam o motivo. Vidro continua selecionado e volta a ser aplicado assim que você ajustar as cores do texto ou do fundo para ter contraste suficiente.

A transparência vale para o Widget, inclusive no celular, e para o Embed. A Página de Chat, em tela cheia, sempre tem um fundo sólido. Visitantes que ativaram “Reduzir transparência” no dispositivo veem o estilo Sólido no Chrome e no Edge, os navegadores que repassam essa configuração aos sites. Em um navegador que não consegue desfocar a página, Vidro fica quase sólido para que o texto continue legível.

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

• Introdução por voz: permite que os visitantes gravem uma mensagem falada com o microfone da caixa de chat. É transcrita para o campo de entrada para que possam editá-la antes de enviar. As gravações param automaticamente ao fim de dois minutos (disponível em planos pagos).
• Anexos de ficheiros: permite que os visitantes anexem uma imagem ou um documento à sua mensagem. Ativado por predefinição; desative-o para remover o botão de anexo da caixa de chat.
• Widget de abertura automática: abre o Widget automaticamente quando a página carrega.
• Ocultar 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).

Para permitir que os visitantes avaliem as conversas, abra Conversas → Insights → Avaliação de Conversas. As configurações e os resultados ficam nessa aba; veja Avaliação de Conversas.

Conteúdo de texto

Abra Canais → Seu site → Conteúdo de texto para editar a saudação e os outros textos voltados aos visitantes:

• 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 (o que algumas pessoas chamam de “teaser” ou “mensagem do launcher”) para chamar a atenção antes de o visitante clicar. O balão mostra o próprio texto da mensagem de boas-vindas, então edite esse campo para mudar o que ele diz.
• 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.

A seção Tela Pré-chat fica abaixo desses campos, na mesma aba Conteúdo de texto. Ative-a ali e edite os textos do cabeçalho, do botão e da mensagem.

Idiomas e traduções

Por padrão, o seu Conteúdo de texto é mostrado a todos os visitantes exatamente como você o digitou. Nos planos pagos, você pode adicionar traduções por idioma para que os visitantes vejam o widget no próprio idioma.

1. Abra a subaba Conteúdo de texto e clique em Traduzir em Outros idiomas. O painel Traduzir o texto do widget é aberto, com seu texto principal ao lado de cada tradução, identificado como Padrão (origem).
2. Clique em Adicionar idioma e escolha um idioma. O Quickchat AI gera uma tradução do seu texto atual. Confira e edite os campos (cabeçalho, mensagem de boas-vindas, conversation starters, placeholder de entrada, tela pre-chat, aviso) para esse idioma. As alterações são salvas automaticamente.
3. Qualquer campo deixado em branco usa seu texto padrão, então você traduz apenas o que quer mudar. Se a tradução automática falhar, você ainda pode inserir o texto manualmente.

O número de idiomas que você pode adicionar depende do seu plano.

Como o idioma de um visitante é escolhido

O Quickchat escolhe o idioma nesta ordem:

1. Uma substituição explícita definida no loader: _quickchat("language", "de") (chame-a antes de _quickchat("init", ...)).
2. O atributo <html lang> da sua página — por exemplo <html lang="de"> exibe a sua tradução em alemão. Esta é a abordagem recomendada: defina lang corretamente em cada página localizada e o widget segue automaticamente.
3. O idioma do navegador do visitante e, por fim, o seu texto Default se nada corresponder.

Nota

Se o idioma de um visitante não tiver tradução, ele sempre verá o seu texto Default. Nada fica em branco.

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)
• fornecer valores para API Actions e, quando permitido, personalizar respostas. A IA recebe um subconjunto filtrado, não todos os parâmetros; veja Contexto do modelo e autorização

Veja exemplos de parâmetros customizados úteis:

• visitor_name: Mike
• customer_tier: VIP
• order_id: ord_123

visitor_name é uma chave de contato reconhecida. Chaves personalizadas como customer_tier podem ser armazenadas e usadas em Actions, mas enviá-las por si só não garante que a IA as use na resposta. Trate valores enviados pelo navegador como dados de entrada não verificados, não como autorização para acessar a conta de um cliente.

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", {
  "visitor_name": "Mike",
  "customer_tier": "VIP",
  "order_id": "ord_123",
});

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

Dica

Parâmetros customizados com nomes em snake_case (por exemplo, order_id, customer_tier) podem ser injetados diretamente em API Actions como {{metadata_order_id}}, {{metadata_customer_tier}}, etc. Veja Variáveis de AI Action para detalhes.

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", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _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", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _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

1. 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 e expanda Instalar manualmente com código.
   • Copie o Embed snippet (ele inclui tanto o contêiner <div id="quickchat-embedded"> quanto o loader script).

2. Abra o arquivo HTML do seu site, ou a página no seu construtor de sites.

3. 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.
   • Em um construtor de sites, adicione um elemento de código ou HTML no ponto onde a janela de chat deve aparecer e cole o snippet nele.

Nota

O Embed só funciona quando o seu construtor coloca o código diretamente na página. Alguns construtores, como o Wix, exibem os elementos HTML dentro de um quadro separado, e o Embed não consegue carregar dentro de um quadro. Se a janela de chat não aparecer na sua página publicada, adicione em vez disso o Widget pela configuração de código para o site inteiro, ou compartilhe o link da sua Página de Chat.