Testando antes de integrar

🎯 Como testar o Assistente da aiBlue no CodePen (em 1 minuto)

1) Acesse o CodePen

https://codepen.io/pen

Vai abrir uma tela com 3 caixas:

• HTML

• CSS

• JS

Você só vai usar a primeira, a de HTML.

---

2) Cole o snippet na caixa HTML

Copie e cole exatamente isto na caixa HTML:

<script defer 
src="https://aiblue.dev/vendor/chatbot-voice/js/external-chatbot-voice.js" 
data-chatbot-uuid="8984939f-cc68-47de-9524-cf90bab127f" 
data-language="en"></script>

(Se o seu assistente for outro, só substitua o UUID e o idioma.)

---

3) Aguarde 2 a 5 segundos

O botão do assistente vai aparecer automaticamente na parte de baixo da tela, assim como no seu screenshot:

✅ Apareceu o botão → Funcionou. ▶️ Clique para testar o assistente ao vivo.

---

🧠 O que está acontecendo aqui

Você não precisa configurar nada no CodePen. O assistente já vem pronto, e esse código:

• Chama o assistente da aiBlue

• Carrega o botão

• Mostra ele na tela

• Pronto.

Não precisa tocar em CSS, não precisa tocar no JS.

---

❗ Perguntas comuns

Dúvida	Resposta
Não aparece nada	Aguarde 5 segundos → ou recarregue a página
O botão aparece muito embaixo	Isso é normal no CodePen
Posso trocar o idioma?	Sim — mude data-language="en" para "pt" ou "es"
Posso testar outro assistente?	Sim — só troque o data-chatbot-uuid

---

✨ Resultado Final (como aparece)

Você verá exatamente isto embaixo do preview:

[ 🔊 Saiba tudo sobre o franchising da aiBlue aqui ]

Clique e teste a conversa.