Olá Blippers, tudo bem ?
Espero que todos estejam bem e depois de um tempo venho trazer um novo guia focado em otimização de tempo para quem precisa debug um bot no canal Blip Chat e as vezes precisa de abrir 3 abas postman e outras ferramentas para fazer isso.
Descrição : Nesse guia simples vou mostrar como ter um debug para o Blip Chat que esteja publicado em algum site.
1° Passo : Ativar o log do bot na aba Log :
Isso faz com que o bot registre todos os inputs nessa pagina.
2° Passo: Pegar o código do bot que está publicado no Blip Chat.
Salve ou deixe em um bloco de notas esse codigo.
3°Passo: Pegar a chave http do bot :
Salve ela em um bloco de notas.
4° Passo: Vamos criar um arquivo chamado index.html
Com esse codigo :
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blip simple debbuger</title>
<!-- Scripts do Blip DS (caminho corrigido) -->
<script type="module" src="https://unpkg.com/@takenet/blip-ds/dist/blip-ds.esm.js"></script>
<script nomodule src="https://unpkg.com/@takenet/blip-ds/dist/blip-ds.js"></script>
<!-- CSS do Blip DS -->
<link rel="stylesheet" href="https://unpkg.com/@takenet/blip-ds/dist/blip-ds.css">
<style>
body {
font-family: Arial, sans-serif;
background: var(--color-neutral-light-98, #f8f9fa);
padding: 20px;
display: flex;
flex-direction: column;
height: 100vh;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 15px;
}
#busca {
flex: 0;
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
}
#mensagens-view {
flex: 1;
overflow-y: auto;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
}
#mensagens-view blip-card {
margin-bottom: 15px;
display: block;
}
</style>
<button id="forcar" variant="primary">🔄 Atualizar</button>
</head>
<body class="blip-theme-light">
<h1>Exemplo de debug simples</h1>
<input id="busca" type="text" placeholder="Buscar mensagem..." />
<blip-card>
<h2 slot="title">Bem-vindo!</h2>
<p slot="content">Agora sim um debbuger</p>
</blip-card>
<script src="https://unpkg.com/blip-chat-widget" type="text/javascript"></script>
<script>
(function () {
window.onload = function () {
new BlipChat()
.withAppKey('troque pela sua withappkey')
.withButton({"color":"#0096fa","icon":""})
.withCustomCommonUrl('https://troque pela sua url.chat.blip.ai/')
.build();
}
})();
</script>
<body class="blip-theme-light">
<h1>Mensagens da API</h1>
<div id="mensagens-view">Carregando...</div>
<script>
const view = document.getElementById('mensagens-view');
const busca = document.getElementById('busca');
let mensagensCache = ];
function renderMensagens(lista) {
if (!lista || lista.length === 0) {
view.textContent = "Nenhuma mensagem encontrada.";
return;
}
view.innerHTML = "";
lista.forEach(msg => {
const card = document.createElement("blip-card");
card.innerHTML = `
<h3 slot="title">📨 ${msg.type || "Mensagem"}</h3>
<div slot="content">
<p><strong>De:</strong> ${msg.from}</p>
<p><strong>Para:</strong> ${msg.to}</p>
<p><strong>Data:</strong> ${msg.date_created}</p>
<p><strong>Conteúdo:</strong> ${msg.content}</p>
</div>
`;
view.appendChild(card);
});
}
async function buscarMensagens() {
try {
const response = await fetch("https://seucontrato.http.msging.net/commands", {
method: "POST",
headers: {
"Authorization": "Key sua chave", // ⚠️ use seu token real
"Content-Type": "application/json"
},
body: JSON.stringify({
"method": "get",
"uri": "/messages?$take=100&$skip=0",
"id": crypto.randomUUID(),
"to": "[email protected]"
})
});
if (!response.ok) {
view.textContent = "Erro HTTP: " + response.status;
return;
}
const data = await response.json();
mensagensCache = data.resource?.items || s];
renderMensagens(mensagensCache);
} catch (err) {
view.textContent = "Erro: " + err.message;
}
}
// Busca inicial
buscarMensagens();
// Atualiza a cada 30 segundos
setInterval(buscarMensagens, 30000);
// Botão manual
document.getElementById("forcar").addEventListener("click", buscarMensagens);
// Filtro de busca
busca.addEventListener("input", (e) => {
const termo = e.target.value.toLowerCase();
const filtradas = mensagensCache.filter(msg =>
(msg.content || "").toLowerCase().includes(termo) ||
(msg.from || "").toLowerCase().includes(termo) ||
(msg.to || "").toLowerCase().includes(termo)
);
renderMensagens(filtradas);
});
</script>
</body>
</html>
Troque as informações pelas que você salvou nas linhas : 68,70,111 e 114.
Após isso vamos salvas e abrir em um navegador para ver se está funcionando.
Feature busca de mensagem:
Pagina Completa:
E da para implementar features para adicionar informações ao contato, resetar o contato para iniciar o fluxo novamente.
Qualquer duvida estou a disposição.
