Aprenda a integrar seu Chatbot personalizado ao seu site com facilidade.
Integrar o Chatbot Swiftron ao seu site é simples e rápido. Com uma integração única e sem necessidade de alterações contínuas, você pode aprimorar o engajamento com seus clientes de forma fluida. Siga estes passos fáceis para começar:
Passo 1: Copie o Código de Integração
Vá para Página de Integração da Swiftron e copie o seguinte código:
<script async type="module" project-id="YOUR_PROJECT_ID" lang="auto" src="https://swiftron.eu/static/js/chatbot-boot.min.js"></script>
- project-id: Este é o seu ID de Projeto único e será preenchido automaticamente.
- lang: O idioma alvo para o seu chatbot. Você pode usar:
- Qualquer código de idioma válido de códigos de idioma ISO 639 (por exemplo, 'en' para inglês, 'de' para alemão).
- 'auto', que seleciona o idioma com base nas configurações do navegador do usuário.
- 'site', que usa o idioma especificado no cabeçalho HTML do site. Isso lê o valor de
document.documentElement.lang
e define o idioma do chatbot de acordo.
Passo 2: Cole o código no seu site
Usando um Construtor de Sites:
Se você estiver usando construtores de sites como Jimdo, WordPress ou Squarespace, siga as instruções deles para inserir código personalizado:
- Jimdo: Como inserir código personalizado
- WordPress: Usando bloco HTML personalizado
- Squarespace: Adicionando código personalizado ao seu site
Gerenciando seu próprio código:
Insira o código de integração copiado no HTML de cada página onde você deseja que o chatbot apareça. Aqui está um exemplo:
<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Site</title>
</head>
<body>
<div>Your Content</div>
</body>
<script async type="module"
project-id="YOUR_PROJECT_ID"
lang="auto"
src="https://swiftron.eu/static/js/chatbot-boot.min.js">
</script>
</html>
Definir Botão de Alternância do Chatbot (Opcional)
Se você já tem uma caixa de comunicação existente ou deseja criar seu próprio botão para abrir ou fechar o chatbot, você pode integrá-lo facilmente adicionando seu ID nas configurações do 'Botão de Alternância do Chatbot' na Página de Integração da Swiftron.
Exemplo:
<button id="btn-toggle-chatbot">Seu Ícone do Chatbot</button>
Basta definir o campo 'Botão de Alternância do Chatbot' para o ID do seu botão, por exemplo, 'btn-toggle-chatbot'. O tipo de botão pode ser qualquer um (por exemplo, div, span). Você não precisa adicionar nenhum JavaScript ou manipuladores de eventos; o chatbot da Swiftron detectará automaticamente este botão e lidará com a lógica necessária.
Se nenhum elemento com o ID fornecido for encontrado, ou se o campo 'Botão de Alternância do Chatbot' estiver vazio, a Swiftron criará seu próprio botão de alternância do chatbot em seu site.
Personalizar a Colocação do Chatbot (Opcional)
Você pode renderizar o chatbot em um elemento específico, especificando seu ID no campo 'Personalizar a Colocação do Chatbot' na Página de Integração da Swiftron. O chatbot aparecerá dentro deste elemento e substituirá qualquer conteúdo existente nele.
Neste caso, nenhum botão de alternância do chatbot será renderizado ou utilizado. O chatbot estará sempre visível dentro do elemento especificado e não poderá ser minimizado pelo usuário.