> For the complete documentation index, see [llms.txt](https://aiblue.gitbook.io/aiblue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aiblue.gitbook.io/aiblue/documentation/comece-aqui/criando-seu-assistente-24-7/testando-antes-de-integrar.md).

# 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&#x20;*****HTML***

Copie e cole exatamente isto na caixa **HTML**:

```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.)*

***

<figure><img src="/files/Su9vwKjvwojLJ4UOWy2p" alt=""><figcaption></figcaption></figure>

#### **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.