Site

Neste guia, vamos integrar seu Assistente de IA ao seu site usando Widget ou iFrame.

Widget

O Widget permite incorporar o Agente do Quickchat AI diretamente no site. Geralmente aparece como um balão de chat no canto inferior direito. Ao clicar, expande para uma janela de chat.

Como incorporar o Widget

1. Localize o código da sua página

   Abra o HTML do site ou o editor do seu construtor.

2. Obtenha o código do Widget

   • Acesse o app do Quickchat AI.
   • Vá em Website dentro de Channels na barra lateral esquerda.
   • Clique na aba Install.
   • Copie o Widget script.

3. Cole o código

   Insira o script logo antes da tag de fechamento </body> em todas as páginas desejadas.

Se você usa WordPress

Usando footer.php

1. Acesse o painel do WordPress.
2. Vá em Aparência > Editor do tema e abra footer.php.
3. Cole o script logo antes de </body>.
4. Salve.

Vídeo passo a passo usando footer.php:

Usando um Plugin

1. Instale um plugin como Insert Headers and Footers.
2. Abra as configurações (Settings > Insert Headers and Footers).
3. Cole o script na seção do rodapé.
4. Salve.

Vídeo passo a passo usando plugin:

Se você usa um Website Builder

Veja a documentação de WordPress, Webflow ou Wix para adicionar código customizado.

Para suporte: contact@quickchat.ai.

Personalizando o Widget

Na seção Appearance, ajuste visual e experiência do Widget.

Opções:

• Primary Color: cor principal das mensagens do usuário
• Header Background Color: fundo do cabeçalho
• Header Text Color: cor do texto do cabeçalho
• AI Avatar Image: avatar do Agente no cabeçalho e nas mensagens
• Widget Bubble: ícone visível antes de abrir
• Widget Bubble Size: pequeno, médio ou grande
• Widget Bubble Position: canto inferior direito ou esquerdo
• Widget Chat Window Dimensions: largura (320–720 px) e altura (520–1020 px)
• Animate AI Responses: respostas animadas em tempo real
• Auto-Open Widget: abrir automaticamente ao carregar
• Remove Quickchat AI Branding: experiência white‑label
• Animate Chat Header Collapsing: animação suave após a primeira mensagem

Recursos avançados: Parâmetros customizados

Widget e iFrame permitem passar parâmetros na inicialização. Úteis para:

• analítica (aparecem no CSV na plataforma)
• personalização da conversa (a IA tem ciência dos parâmetros)

Exemplos:

• 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

Exemplo de conversa com parâmetros:

Para adicionar parâmetros como os acima, inclua a linha abaixo no script em Your Website > Install.

widget:

_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",
});

iFrame:

_quickchat_embedded("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",
});

Até cinco chaves são permitidas; serão atribuídas a cada nova conversa.

Script completo:

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://widget.quickchat.ai/chat.js","_quickchat");
  _quickchat("host", "app.quickchat.ai");
  _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>

iFrame

<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://widget.quickchat.ai/embed.js","_quickchat_embedded");
  _quickchat_embedded("host", "app.quickchat.ai");
  _quickchat_embedded("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_embedded("init", "0zmn6up7zo");
</script>

iFrame

O iFrame permite incorporar o Agente como janela de chat em um ponto específico da página.

Como incorporar o iFrame

1. Obter o código do iFrame do Quickchat

   • Acesse o app do Quickchat AI.
   • Vá em Website na seção Channels.
   • Clique em Install.
   • Copie o iFrame script.

2. Abra o HTML do site ou o editor do construtor

3. Cole o código

   • Insira o iFrame dentro do <body>.
   • Posicione exatamente onde deseja mostrar a janela de chat.