Adicionar o ChatLab ao seu website permite que os visitantes interajam com o seu chatbot de IA diretamente no seu site. Este guia explica como obter o código de incorporação e adicioná-lo ao seu website.
Abrir o separador Deploy
Selecione o seu chatbot a partir do painel principal e, em seguida, clique no separador Deploy (Publicar).
Escolher a sua plataforma
O painel Select Platform (Selecionar plataforma) à direita mostra todas as plataformas suportadas. Clique na plataforma correspondente ao seu website para ver instruções de instalação personalizadas.
Plataformas suportadas:
- HTML Code - funciona com qualquer website onde possa editar o HTML
- WordPress - através do plugin oficial do ChatLab ou por inserção manual de código
- Wix - através de Settings > Advanced > Custom Code
- Webflow - através de Site Settings > Custom Code (requer um plano Webflow premium)
- PrestaShop - através do módulo ChatLab para PrestaShop ou por inserção manual de código
- Shopify - através do ficheiro theme.liquid
- WooCommerce - através do plugin WordPress ou por inserção manual de código
- Abicart - através de Store design > Themes > Site header
- CS-Cart - através de Design > Layouts > Custom HTML code
Cada plataforma apresenta instruções passo a passo específicas para essa integração. Para plataformas com artigos de ajuda dedicados, surge uma ligação View full instructions (Ver instruções completas) na parte inferior.
Adicionar através de HTML Code
A opção HTML Code funciona com qualquer website onde tenha acesso ao código-fonte. Verá duas opções de incorporação: Widget e Iframe.
Modo Widget
O separador Widget mostra o código que adiciona um ícone de chat ao seu website. Quando os visitantes clicam no ícone, abre-se uma janela de chat.
- Clique no separador Widget
- Clique em Copy to clipboard (Copiar para a área de transferência) para copiar o código
- Localize a secção
<head>do seu website - Cole o código como o último elemento dentro da secção
<head> - Atualize o browser para verificar se o ícone do chatbot é apresentado
Modo Iframe
O separador Iframe mostra o código que incorpora o chatbot diretamente no conteúdo da sua página. O chatbot fica sempre visível e pode ser envolvido por outros elementos da página.
- Clique no separador Iframe
- Clique em Copy to clipboard (Copiar para a área de transferência) para copiar o código
- Cole o código em qualquer parte do HTML do seu website onde pretenda que o chatbot apareça
- Ajuste os atributos
widtheheightpara se adaptarem ao seu layout
Não sabe qual escolher? Leia Qual é a diferença entre widget e iframe? para uma comparação detalhada.
Adicionar através do WordPress ou WooCommerce
As plataformas WordPress e WooCommerce oferecem dois métodos de instalação: Plugin Installation (Instalação por plugin - recomendado) e Manual Installation (Instalação manual).
Plugin Installation (recomendado)
- Clique em Get WordPress Plugin (Obter plugin WordPress) para abrir o repositório de plugins do WordPress
- Instale e ative o plugin "ChatLab - AI Chatbot"
- Aceda à página de definições do plugin na administração do WordPress
- Copie o seu Bot ID a partir do ChatLab utilizando o botão Copy
- Cole o Bot ID nas definições do plugin e guarde
- Verifique se o chatbot aparece no seu website
Manual Installation
Mude para o separador Manual Installation para uma instalação baseada em código:
- Instale o plugin "Insert Headers and Footers" no WordPress
- Aceda a Settings > Insert Headers and Footers
- Copie o código do ChatLab e cole-o na secção Header
- Guarde e atualize o seu website
Para obter todos os detalhes, consulte Como adicionar o seu chatbot a um website WordPress.
Adicionar através de outras plataformas
Para o Shopify, Wix, Webflow, PrestaShop, Abicart e CS-Cart, selecione a plataforma no painel Select Platform. Cada plataforma mostra:
- O código de incorporação com as opções Widget e Iframe
- Instruções passo a passo específicas da plataforma para colar o código
- Uma ligação View full instructions para o guia completo da plataforma
Conformidade com o RGPD
Se necessita que o seu chatbot carregue apenas após o consentimento de cookies ser concedido, consulte Configurar o ChatLab para conformidade com o RGPD para guias de integração com o CookieBot, Usercentrics e Google Tag Manager.
Content Security Policy (CSP)
Se o seu website utiliza cabeçalhos de Content Security Policy, é necessário permitir os domínios do ChatLab para que o chatbot funcione. As diretivas necessárias dependem de utilizar o modo Widget ou o modo Iframe.
Modo Widget
O widget carrega um script na sua página que cria a interface de chat. Adicione estas diretivas ao seu cabeçalho CSP:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com 'unsafe-inline';
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Por predefinição, o widget injeta alguns estilos inline, pelo que 'unsafe-inline' é obrigatório em style-src.
CSP Safe Mode - evitar unsafe-inline
Se a política de segurança do seu website não permitir 'unsafe-inline' em style-src, pode ativar o CSP Safe Mode. Isto faz com que o widget carregue todos os estilos a partir de ficheiros CSS externos em vez de os injetar inline.
Para o ativar, adicione window.aichatbotCspSafe = true; antes da tag de script do ChatLab:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Com o CSP Safe Mode ativado, já não precisa de 'unsafe-inline' e o seu cabeçalho CSP pode utilizar:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com;
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Modo Iframe
O iframe carrega o chatbot completo a partir de um único URL, pelo que apenas é necessária uma diretiva:
frame-src https://api.chatlab.com;