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.
Antes de começar
Crie e treine o seu chatbot antes de o partilhar com os clientes. Para a instalação, também precisa de permissão para editar e publicar o website. Consulte Como criar o seu primeiro chatbot.
Abrir o separador Deploy
Selecione o seu chatbot no painel principal e, em seguida, clique no separador Deploy (Publicar).
Escolher a sua plataforma
O painel Select Platform (Selecionar plataforma) à direita lista os destinos suportados em dois grupos: Website, para colocar o chatbot em páginas que controla, e Messaging channels (Canais de mensagens), para o ligar a uma conta de conversação existente. Clique na entrada correspondente ao local onde pretende que o chatbot apareça para ver instruções personalizadas.
Plataformas suportadas:
- HTML Code - funciona com qualquer website onde possa editar o código HTML
- WordPress - através do plugin oficial do ChatLab ou inserção manual de código
- Wix - através de Settings > Custom Code
- Webflow - através de Site settings > Custom code, com acesso a código personalizado ativado para o seu site ou espaço de trabalho
- PrestaShop - através do módulo ChatLab para PrestaShop ou inserção manual de código
- Shopify - através do ficheiro theme.liquid
- WooCommerce - através do plugin do WordPress ou 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
Canais de mensagens:
- WhatsApp Business - responde numa conta WhatsApp Business, consulte WhatsApp para Empresas
- Facebook Messenger - responde às mensagens da sua página de Facebook, consulte Integração com o Facebook Messenger
- Instagram - responde a mensagens diretas do Instagram, consulte Integração com o Instagram
Os canais de mensagens não utilizam o código de incorporação abaixo. Ficam ligados a uma conta que já possui, pelo que nenhum código é colado num website.
Cada plataforma apresenta instruções passo a passo específicas para essa integração. Para plataformas com artigos de ajuda dedicados, é apresentado um link 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 na secção
<head> - Atualize o seu navegador para verificar se o ícone do chatbot aparece
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 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).
Instalação por plugin (recomendado)
- Clique em Get the plugin on WordPress.org, depois instale e ative o plugin do ChatLab.
- Abra o ChatLab no WordPress. Para uma loja WooCommerce, mantenha selecionada a opção WooCommerce integration para ligar também os dados da loja.
- Clique em Continue, inicie sessão no ChatLab e selecione o seu chatbot.
- Conclua a ligação, abra o seu website publicado e envie uma mensagem de teste.
Instalação manual
Mude para Manual Installation e copie o código do Widget para o cabeçalho do seu site utilizando um plugin de inserção de código. Para o Iframe, utilize um bloco de HTML no conteúdo da página que permita HTML iframe. Publique a página e teste o chat. Instale o widget apenas uma vez, recorrendo ao plugin ou a um fragmento de código manual.
Para obter todos os detalhes, consulte Como adicionar o seu chatbot ao website WordPress.
Adicionar através de outras plataformas
Para Shopify, Wix, Webflow, PrestaShop, Abicart e CS-Cart, selecione a plataforma no painel Select Platform. Cada plataforma apresenta:
- O código de incorporação com as opções Widget e Iframe
- Instruções passo a passo de colagem específicas da plataforma
- Um link View full instructions para o guia completo da plataforma
Conformidade com o RGPD
Se necessita que o seu chatbot carregue apenas após a concessão de consentimento de cookies, consulte Configurar o ChatLab para conformidade com o RGPD para obter guias de integração que abrangem CookieBot, Usercentrics e Google Tag Manager.
Content Security Policy (CSP)
Se o seu website utiliza cabeçalhos de Content Security Policy (Política de Segurança de Conteúdo), tem de autorizar 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 as seguintes origens do ChatLab às suas diretivas CSP existentes; não substitua a política relativa ao restante website:
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. A sua política também tem de autorizar o script de configuração inline, por exemplo através de um nonce ou hash CSP. Autorize as origens de imagem utilizadas pelo seu bot e cartões de produto em img-src; o áudio e outras funcionalidades ativadas podem exigir origens adicionais. Para um domínio de agência, utilize os domínios do fragmento de código gerado.
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 carrega a folha de estilos do contentor do widget a partir de um ficheiro CSS externo. Não autoriza o seu script de configuração inline nem garante que todos os estilos personalizados e funcionalidades ativadas cumpram a sua política.
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, teste uma política de folhas de estilo sem 'unsafe-inline'. Um ponto de partida é:
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
A página principal tem de permitir a origem contida no URL do iframe copiado. Para o alojamento padrão do ChatLab, adicione isto à política existente:
frame-src https://api.chatlab.com;