Integração de chatbot no Wix: guia passo a passo

O Wix tem um recurso de chat integrado, mas é uma ferramenta de chat ao vivo básica que exige uma pessoa do outro lado. Quando ninguém está on-line, os visitantes recebem um formulário de contato. Isso não é suficiente quando alguém está navegando pelo seu site às 23h tentando decidir se vai reservar o seu serviço ou comprar o seu produto.

Um chatbot de IA treinado com o conteúdo do seu site responde a essas perguntas instantaneamente, sem envolvimento humano. Este guia aborda dois métodos para adicionar um chatbot ao Wix, apresenta a configuração do início ao fim e explica como obter os melhores resultados.

Chat integrado do Wix vs. chatbot de IA

Antes de entrar na instalação, vale entender por que um chatbot de IA dedicado é diferente do que o Wix oferece nativamente.

O Wix Chat funciona bem se você quer conversas humanas em tempo real. Mas a maioria dos donos de pequenos negócios não consegue ficar on-line o dia todo. Um chatbot de IA preenche essas lacunas e cuida das perguntas repetitivas que representam a maior parte das dúvidas dos visitantes.

Você pode usar os dois juntos: o chatbot de IA cuida das perguntas comuns automaticamente, e o Wix Chat fica disponível para os casos em que é preciso um toque humano.

O que você precisa antes de começar

1. Um chatbot treinado no Agentkit.

Cadastre-se gratuitamente, crie um chatbot e treine-o com o conteúdo do seu site Wix. O plano gratuito oferece 1 chatbot e 50 mensagens por mês.

Adicione a URL do seu site Wix como fonte de treinamento. O rastreador indexa suas páginas automaticamente. Depois, adicione pares de perguntas e respostas para os seus tópicos mais importantes (preços, horários, processo de reserva, política de devolução).

Para orientações detalhadas sobre treinamento, veja Como treinar um chatbot com o conteúdo do seu site.

2. Um plano Wix Premium.

Adicionar código personalizado ao Wix exige um plano Premium (qualquer nível). Sites gratuitos do Wix não suportam incorporações HTML personalizadas nem Velo.

Método 1: incorporação HTML (recomendado)

Este é o método mais simples e funciona para todos os usuários do Wix com plano Premium. Você adiciona o script do chatbot usando um elemento de incorporação HTML no Editor do Wix.

Passo 1: obtenha o seu código de incorporação

No painel do Agentkit, vá até Configurações e depois Publicar do seu chatbot. Você verá duas opções de incorporação. Para o Wix, use o código de incorporação em iframe:

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write">
</iframe>

Você também pode usar o widget JavaScript, mas o elemento de incorporação HTML do Wix lida com iframes de forma mais confiável do que com tags de script. O método iframe é a abordagem recomendada para o Wix.

Passo 2: adicione a incorporação HTML à sua página

1. Abra o Editor do Wix do seu site.
2. Clique no botão Adicionar (o ícone azul "+") na barra de ferramentas esquerda.
3. Selecione Código de incorporação e depois Incorporar HTML.
4. Um elemento HTML aparece na sua página. Clique nele e selecione Inserir código.
5. Mude para a aba Código (não a aba URL).
6. Cole o código do iframe do Passo 1.
7. Clique em Atualizar.
8. Redimensione e posicione o elemento onde você quer que o chatbot apareça na página.

Passo 3: torne-o disponível em todo o site (opcional)

O método de incorporação HTML adiciona o chatbot a uma única página. Se você quiser o chatbot em todas as páginas, tem duas opções:

Opção A: adicionar ao cabeçalho ou rodapé do site.

1. No Editor do Wix, clique na seção Cabeçalho ou Rodapé da sua página.
2. Adicione o elemento de incorporação HTML ao cabeçalho ou rodapé.
3. Como o cabeçalho e o rodapé aparecem em todas as páginas, o chatbot ficará disponível em todo o site.

Opção B: use o recurso "Custom Element" do Wix App Market.

1. Vá em Adicionar, depois Código de incorporação e depois Custom Element.
2. Configure-o para carregar o script do seu chatbot em todas as páginas.

A Opção A é mais simples para a maioria dos usuários.

Passo 4: publique e verifique

1. Clique em Publicar no canto superior direito do Editor do Wix.
2. Acesse o seu site publicado (não a pré-visualização do editor).
3. Confirme se o chatbot aparece e responde a mensagens de teste.
4. Verifique em dispositivos móveis para conferir o layout.

Método 2: Velo by Wix (para desenvolvedores)

O Velo é a plataforma de desenvolvimento integrada do Wix. Se você tem familiaridade com JavaScript, o Velo oferece mais controle sobre quando e como o chatbot é carregado.

Quando usar o Velo

• Você quer que o chatbot carregue condicionalmente (por exemplo, somente para membros logados, somente em determinadas páginas).
• Você precisa passar dados dinâmicos para o chatbot (por exemplo, o nome do visitante ou o nível de associação).
• Você quer acionar ações do chatbot de forma programática.

Passo 1: ative o Velo

1. No Editor do Wix, clique em Dev Mode na barra de menu superior.
2. Clique em Turn on Dev Mode.
3. O painel de código aparece na parte inferior do editor.

Passo 2: adicione o script via código da página

1. Selecione a página onde você quer o chatbot.
2. No painel de código na parte inferior, você verá um arquivo para a página (por exemplo, Home.js).
3. Adicione o seguinte código para carregar o widget do Agentkit dinamicamente:

$w.onReady(function () {
  const script = document.createElement('script');
  script.src = 'https://cdn.agentkit.ai/widget.js';
  script.setAttribute('data-chatbot', 'your-chatbot-id');
  script.async = true;
  document.body.appendChild(script);
});

4. Salve e publique.

Passo 3: carregamento em todo o site via masterPage.js

Para carregar o chatbot em todas as páginas:

1. No painel de código, abra o masterPage.js (ele roda em todas as páginas).
2. Adicione o mesmo código de carregamento do script dentro da função onReady.
3. Salve e publique.

Exemplo de carregamento condicional

Se você quiser o chatbot apenas em determinadas páginas:

// masterPage.js
import wixLocation from 'wix-location';

$w.onReady(function () {
  const path = wixLocation.path;
  const chatbotPages = ['services', 'pricing', 'contact', 'faq'];

  if (chatbotPages.some(page => path.includes(page))) {
    const script = document.createElement('script');
    script.src = 'https://cdn.agentkit.ai/widget.js';
    script.setAttribute('data-chatbot', 'your-chatbot-id');
    script.async = true;
    document.body.appendChild(script);
  }
});

Isso carrega o chatbot apenas nas páginas cujo caminho contém services, pricing, contact ou faq.

Comparando opções de chatbot para o Wix

Várias ferramentas de chatbot funcionam com o Wix. Veja como as principais opções se comparam.

Se você quer respostas com IA treinadas no seu próprio conteúdo e com as opções de incorporação mais flexíveis, o Agentkit é a opção mais adequada. Se você precisa de um construtor de fluxo baseado em regras sem IA, o Joonbot foi feito especificamente para isso. E se você só precisa de um chat básico entre humanos, o Wix Chat já vem incluído no seu plano.

Personalizando o chatbot para o seu site Wix

Depois que o chatbot estiver no ar, configure estas opções no painel do Agentkit para obter os melhores resultados.

Cores da marca e posição

Nas Configurações do seu chatbot, personalize a aparência do widget:

• Cor primária: combine com a cor de destaque do seu site Wix.
• Posição: o canto inferior direito é o padrão e funciona para a maioria dos sites. Mude para o canto inferior esquerdo se o seu site Wix tiver um elemento conflitante no canto inferior direito.
• Mensagem de boas-vindas: escreva algo específico para o seu negócio. "Oi! Posso responder perguntas sobre nossos serviços, preços e disponibilidade" é melhor do que "Como posso ajudar?"

Restrição de domínio

Adicione o seu domínio Wix à lista de domínios permitidos. Isso inclui tanto o seu domínio personalizado (por exemplo, yourbusiness.com) quanto a URL padrão do Wix (por exemplo, yourbusiness.wixsite.com/yoursite). A restrição de domínio evita o uso não autorizado do seu chatbot.

Instruções personalizadas

Adicione instruções que moldem o comportamento do chatbot para o seu negócio específico:

• "Se alguém perguntar sobre preços, sempre mencione a opção de consultoria gratuita."
• "Para perguntas sobre disponibilidade, sugira que a pessoa reserve pela página de agendamento."
• "Nunca prometa datas de entrega específicas. Diga para entrar em contato conosco para prazos atuais."
• "Se alguém fizer uma pergunta que você não consiga responder, ofereça-se para coletar o e-mail da pessoa para um retorno posterior."

Captura de leads

Ative a ação de captura de leads para coletar e-mails de visitantes engajados. Isso é especialmente valioso para negócios de serviços no Wix, onde converter um visitante em lead é o objetivo principal.

Os leads capturados aparecem no seu painel do Agentkit. Conecte-os à sua ferramenta de e-mail marketing ou CRM usando o Zapier. Veja o guia de integração para mais detalhes.

Dicas de treinamento para sites Wix

Sites Wix costumam usar layouts visuais, animações e elementos interativos que podem limitar o que um rastreador web consegue extrair. Veja como maximizar o conhecimento do seu chatbot.

Complemente o rastreamento com pares de perguntas e respostas

Depois de treinar com a sua URL, teste o chatbot no Playground. Para qualquer pergunta que ele responda mal, crie um par de pergunta e resposta com a resposta ideal. Tópicos comuns a cobrir:

Envie documentos complementares

Se você tem PDFs, cardápios, folhetos ou catálogos de serviços, envie-os como fontes de documentos. Eles fornecem ao chatbot informações detalhadas que talvez nem estejam no seu site.

Mantenha os dados de treinamento atualizados

Quando você atualizar o seu site Wix, retreine o chatbot. No plano Standard ($119.99/mês) ou superior, o retreinamento automático cuida disso para você. No plano Free ou Hobby, acione um retreinamento manual pelo painel do Agentkit depois de mudanças significativas no conteúdo.

Solução de problemas

O chatbot não aparece depois de publicar

• Verifique o seu plano Wix. Código personalizado exige um plano Premium.
• Veja o site publicado, não o editor. A pré-visualização do Editor do Wix nem sempre executa scripts personalizados.
• Limpe o cache do navegador ou use uma janela anônima.
• Verifique o código de incorporação HTML. Certifique-se de ter colado o iframe ou a tag de script completos, sem caracteres extras.

O elemento de incorporação HTML mostra um espaço em branco

• Aumente a altura do elemento de incorporação HTML. O tamanho padrão pode ser pequeno demais para exibir a interface do chat.
• Confirme se a URL src do iframe está correta e inclui o ID do seu chatbot.
• Verifique o console do navegador (F12) em busca de erros de conteúdo bloqueado.

O chatbot funciona no desktop, mas não em dispositivos móveis

O Wix cuida do design responsivo automaticamente, mas os elementos de incorporação HTML às vezes precisam de ajuste manual para dispositivos móveis. No Editor do Wix:

1. Mude para a visualização do editor em modo mobile.
2. Encontre o elemento de incorporação HTML.
3. Ajuste o tamanho e a posição para dispositivos móveis.
4. Publique e teste.

Se você estiver usando o widget JavaScript via Velo (Método 2), o widget já é responsivo por padrão e deve funcionar em qualquer tamanho de tela sem ajustes.

O chatbot responde de forma imprecisa

Isso é um problema de treinamento, não de incorporação. Vá até o painel do Agentkit e:

1. Verifique quais páginas foram rastreadas com sucesso.
2. Adicione pares de perguntas e respostas para tópicos com respostas ruins.
3. Teste no Playground até as respostas ficarem satisfatórias.
4. Adicione instruções personalizadas para orientar o tom e o comportamento do chatbot.

Considerações sobre preços

Veja como os preços do Agentkit se encaixam nos casos de uso mais comuns do Wix.

A cobrança anual economiza cerca de 20% em todos os planos pagos.

Próximos passos

Agora o seu site Wix tem um chatbot de IA que cuida das perguntas dos visitantes 24 horas por dia. Veja no que focar a seguir:

1. Refine os dados de treinamento com base na primeira semana de conversas. Procure padrões no que os visitantes perguntam e preencha as lacunas no seu treinamento.
2. Ative a captura de leads para transformar conversas em contatos. É aqui que o chatbot se paga sozinho.
3. Conecte-se às suas ferramentas usando Zapier ou webhooks. Envie leads para o Google Sheets, Mailchimp, HubSpot ou qualquer ferramenta que a sua equipe use. Veja o guia de integração.
4. Leia o guia do Squarespace se você gerencia sites em outras plataformas: Adicione um chatbot ao Squarespace.
5. Explore todas as opções de incorporação no guia completo de incorporação.

Crie seu chatbot gratuitamente →

Não é necessário cartão de crédito.