Widget de chat em JavaScript para integração fácil utilizando JS, HTML e CSS externos. Ideal para adicionar um assistente virtual alimentado por IA em páginas web.
- Botão flutuante (FAB) para abrir o chat
- Modal de chat com histórico de mensagens
- Integração com API de chatbot
- Interface responsiva e personalizável
- Carregamento dinâmico de template e estilos via CDN
- Clone o repositório:
git clone https://github.com/ateliware/ateliware-chatbot-frontend.git
- Edite os arquivos em
src/conforme necessário. - Abra
demo/index.htmlno navegador para testar o widget localmente.
No arquivo src/ateliware-chat.widget.js, basta comentar a linha do CDN:
const CDN_BASE = "https://cdn.jsdelivr.net/gh/ateliware/ateliware-chatbot-frontend@main/src/";E descomentar a linha local:
const CDN_BASE = "../src/";Assim, o widget irá carregar os arquivos diretamente do seu projeto local.
Inclua as seguintes tags no <head> ou antes do fechamento do <body> do seu site:
⚠️ Atenção:Sempre utilize o número da versão da tag desejada na URL do CDN (por exemplo,
@v1.0.5). Isso garante que você está usando uma versão estável e imutável do widget. Sempre que possível, prefira utilizar a versão mais recente disponível para garantir maior estabilidade e evitar quebras inesperadas por atualizações futuras.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ateliware/ateliware-chatbot-frontend@main/src/ateliware-chat.style.css">
<script src="https://cdn.jsdelivr.net/gh/ateliware/ateliware-chatbot-frontend@main/src/ateliware-chat.widget.js"></script>O widget será carregado automaticamente na página.
O widget expõe funções globais para facilitar a integração e personalização:
Para abrir o chat programaticamente, utilize:
window.openAteliwareChat();Para alterar o idioma da interface do chat, utilize:
window.setChatLanguage('en'); // ou 'pt-br', 'es'Você pode chamar essas funções a partir de qualquer script na sua página, por exemplo ao clicar em um botão:
<button onclick="window.openAteliwareChat()">Abrir Chat</button>
<button onclick="window.setChatLanguage('es')">Espanhol</button>Para disponibilizar uma nova versão do widget via CDN:
-
Altere o valor de
CDN_BASEemsrc/ateliware-chat.widget.jspara a nova tag desejada, por exemplo:const CDN_BASE = "https://cdn.jsdelivr.net/gh/ateliware/ateliware-chatbot-frontend@main/src/";
-
Faça o commit das alterações:
git add src/ateliware-chat.widget.js git commit -m "Atualiza CDN_BASE para v1.2.0" -
Crie uma nova tag correspondente à versão:
git tag v1.2.0
-
Envie o commit e a tag para o repositório remoto:
git push origin main --tags
Após esses passos, o CDN irá servir a nova versão e os links com a nova tag estarão disponíveis e validados.