Adicionar um chatbot da ChatLab ao seu site Webflow permite que os visitantes interajam com o seu assistente de IA diretamente no seu site. Este guia explica os passos para obter o código de incorporação da ChatLab e colá-lo no Webflow.
Antes de começar
Antes de começar, crie o seu chatbot e verifique se o seu site ou espaço de trabalho do Webflow inclui acesso a código personalizado. Consulte os requisitos de código personalizado do Webflow. Também precisa de permissões para editar e publicar o website.
Passo 1 - Copiar o código de incorporação da ChatLab
- Inicie sessão no ChatLab e selecione o chatbot que pretende incorporar
- Clique no separador Deploy (Publicar) e, em seguida, selecione Webflow no painel de plataformas à direita
- Escolha Widget para a instalação no cabeçalho descrita abaixo. Para um chat sempre visível, escolha Iframe e siga as instruções para iframe abaixo. Consulte Qual é a diferença entre widget e Iframe? para obter uma comparação
- Clique em Copy to clipboard (Copiar para a área de transferência)
Passo 2 - Adicionar o código ao Webflow
Adicionar o código em Site Settings (Definições do site) coloca o chatbot em todas as páginas do seu site Webflow.
- Abra o seu projeto no Webflow Dashboard (Painel do Webflow)
- Aceda a Site settings > Custom code (Definições do site > Código personalizado)
- Cole o código copiado na secção Head Code (Código do cabeçalho)
- Clique em Save Changes (Guardar alterações)
- Clique em Publish (Publicar) no seu site para que as alterações entrem em vigor
Adicionar apenas a uma única página
Se pretender que o chatbot apareça numa página específica e não em todo o site:
- Abra a página no Webflow Designer
- Clique no ícone de roda dentada para abrir as Page Settings (Definições da página)
- Desça até à secção Custom Code (Código personalizado)
- Cole o código no campo Head Code (Código do cabeçalho)
- Guarde e publique o seu site
Adicionar um iframe sempre visível
No Webflow Designer, coloque um elemento Code Embed (Incorporação de código) no local pretendido para o chatbot, cole o snippet de Iframe da ChatLab e defina a largura e a altura adequadas ao seu layout. Guarde e publique o site. O iframe deve ser inserido no conteúdo da página, e não no Head Code.
Verificar a instalação
Após a publicação, abra o seu site Webflow num navegador. Deverá ver o ícone de chat no canto da página (no modo widget) ou a janela de chat incorporada na própria página (no modo iframe). Clique no ícone para abrir o chat e envie uma mensagem de teste para confirmar que tudo está a funcionar corretamente.