Embed

Mostre telas do VD CRM dentro do seu sistema por iframe, com login único (SSO), sua marca e acesso restrito aos números que você escolher. Módulos: Inbox, Campanhas, Modelos, Leads/Listas, Fluxos, Métricas, Conectar WhatsApp — ou full para todos os liberados.

1. Cadastre seus domínios

Em Configurações → Marca e embed, informe os domínios que vão exibir o embed (ex.: https://app.suaempresa.com.br). O VD CRM responde com Content-Security-Policy: frame-ancestors apenas para eles; qualquer outro site é bloqueado pelo navegador.

2. Crie a sessão no seu servidor (SSO)

Use uma chave com o escopo embed:create. O usuário é criado ou atualizado automaticamente na operação. O token é de uso único (5 min); a sessão dura 30 min, renova sozinha e termina em até 12 h. Não há cookies de terceiros nem tokens da Meta no navegador.

// server.js (Express) — nunca exponha a chave no navegador
app.post("/vdcrm-session", async (req, res) => {
  const r = await fetch("https://crm.vdgestaobranding.com/api/v1/embed/sessions", {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.VDCRM_API_KEY}`, "Content-Type": "application/json" },
    body: JSON.stringify({
      "user": { "external_id": "u-123", "name": "Ana", "email": "ana@cliente.com" },
      "phone_number_refs": ["<id do número>"],
      "modules": ["inbox", "metrics"],
      "permissions": ["inbox:read", "inbox:reply", "metrics:read"]
    }),
  });
  const { token } = await r.json();
  res.json({ token }); // uso único, válido por 5 minutos
});

Permissões: inbox:readinbox:replycampaigns:readtemplates:readlists:readflows:readmetrics:readconnect:create. Um módulo só abre com a permissão correspondente; números de fora da operação são recusados (403 phone_out_of_scope).

3. Monte no navegador (SDK)

<div id="vdcrm" style="height:640px"></div>
<script src="https://crm.vdgestaobranding.com/embed.js"></script>
<script>
  const { token } = await (await fetch("/vdcrm-session", { method: "POST" })).json();
  const app = VDCRM.mount({ token, module: "inbox", container: "#vdcrm", theme: "dark" });
  app.on("ready", (e) => console.log("pronto", e.modules));
  app.on("message.received", (e) => console.log("nova mensagem", e.conversation_id));
  app.on("session.expired", async () => { app.destroy(); /* gere nova sessão e monte de novo */ });
</script>

Eventos via postMessage, enviados somente para a origem da sua página quando ela está cadastrada: readymessage.receivedconversation.openedcampaign.createdsession.expired.

4. Personalização e domínio próprio

Logo, favicon, nome do produto, cores, fonte, cantos, tema, densidade, idioma, nomes dos itens do menu (ex.: “Campanhas” → “Disparos”), módulos visíveis e ações escondidas são aplicados em todas as sessões. Nos planos Agência e Enterprise é possível remover “feito com VD CRM” e cadastrar um domínio próprio: crie o CNAME para crm.vdgestaobranding.com e o TXT _vdcrm.seu-dominio exibido na tela, clique em “Verificar DNS” e a VD ativa o certificado.