Configure verify token, WhatsApp Business Account ID, Phone Number ID, access token e versão da Graph API.
O canal WhatsApp pode usar Meta Cloud API, Blip ou Sinch. No painel de provedores, escolha o provider e preencha as credenciais exigidas. Em seguida, defina o flow ou agente que receberá as mensagens.
Configure Contract ID e Authorization Key quando a entrega das mensagens sair pela infraestrutura Blip.
Use Conversation API com project/app/token ou modo relay com service number, username e token.
Webhooks do WhatsApp
Para Meta, configure no painel da Meta o callback público do Canvas Flow e o mesmo verify token salvo no provedor. Use webhook por flow quando quiser apontar direto para um fluxo, ou webhook principal por agente quando o agente deve decidir a rota.
GET https://seu-host/api/canvas-flow/webhook/whatsapp/<FLOW_ID>
POST https://seu-host/api/canvas-flow/webhook/whatsapp/<FLOW_ID>
GET https://seu-host/api/canvas-flow/webhook/whatsapp-main/<AGENT_ID>
POST https://seu-host/api/canvas-flow/webhook/whatsapp-main/<AGENT_ID>Defina o provider
Salve credenciais em Provedores. O Canvas Flow usa essas credenciais para validar o callback e enviar respostas.
Publique um flow WhatsApp
Use mensagens ricas, botões, listas, anexos e WhatsApp Flow quando o canal exigir interação estruturada.
Teste uma conversa real
O `conversationId` vem do contato/canal. Reutilize o mesmo ID para manter memória e estado do fluxo.
Web Widget
O Web Widget é o canal para incorporar o agente em sites e produtos. Ele usa a API do Canvas Flow por trás, mas entrega uma interface pronta de chat com tema, posição, textos e abertura configuráveis.
Configure cor primária, cor de destaque, nome do assistente, subtítulo, avatar e textos de boas-vindas.
Escolha esquerda ou direita e defina se o chat abre automaticamente quando o usuário entra na página.
Use um `conversationId` estável por visitante/sessão para preservar contexto entre mensagens.
Embed em site
Copie o snippet gerado pelo painel do Web Widget. O modelo recomendado é deixar o browser falar com um backend/proxy seu; esse proxy injeta a API key no servidor e chama o Canvas Flow.
<script>
const canvasFlowWidget = {
flowId: "<FLOW_ID>",
agentId: "default-agent",
channel: "webWidget",
theme: {
assistantName: "Assistente IA",
position: "right",
openByDefault: false
}
};
async function enviarMensagemCanvasFlow(texto) {
const conversationId =
localStorage.getItem("canvasFlowConversationId") ||
crypto.randomUUID();
localStorage.setItem("canvasFlowConversationId", conversationId);
return fetch("/seu-backend/canvas-flow-proxy", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
flowId: canvasFlowWidget.flowId,
agentId: canvasFlowWidget.agentId,
channel: canvasFlowWidget.channel,
conversationId,
text: texto,
slots: { webWidget: canvasFlowWidget.theme }
})
}).then((response) => response.json());
}
</script>Evite colocar API key direto no HTML público. Gere uma key com escopo mínimo e mantenha-a no backend/proxy que conversa com `POST /api/canvas-flow/test`.