🔌 Widget de Chat

Adicione um assistente de IA ao seu site com uma linha de código.

Instalação Rápida

Cole este código antes do </body> do seu site:

<script
  src="https://app.api.upbeez.com/widget.js"
  data-tenant-id="SEU_TENANT_ID"
  async
></script>

Para obter seu Tenant ID, vá em Widget no dashboard do UpBeez.

Opções de Customização

Atributo	Descrição	Padrão
data-tenant-id	Seu ID de tenant (obrigatório)	—
data-position	Posição do botão: `left` ou `right`	right
data-color	Cor primária (hex)	#3b82f6
data-title	Título no header do chat	Assistente Virtual
data-subtitle	Subtítulo no header	Online agora
data-placeholder	Placeholder do campo de texto	Digite sua mensagem...
data-auto-open	Abrir automaticamente após N segundos	— (desativado)
data-font-family	Google Font (ex: "Inter", "Poppins")	Sistema
data-font-size	Tamanho da fonte em px	14
data-letter-spacing	Espaçamento entre letras (px)	0
data-line-height	Altura da linha	1.5

Exemplo Completo

<script
  src="https://app.api.upbeez.com/widget.js"
  data-tenant-id="SEU_TENANT_ID"
  data-position="right"
  data-color="#10b981"
  data-title="Atendimento"
  data-subtitle="Resposta em segundos ⚡"
  data-placeholder="Como posso ajudar?"
  data-font-family="Inter"
  data-auto-open="5"
  async
></script>

🎨 Temas

O widget suporta 6 temas pré-definidos, configuráveis no dashboard:

Dark

Light

Minimal

Ocean

Sunset

Configure em Widget → Tema no dashboard.

📄 Regras de Visibilidade por Página

Controle em quais páginas do seu site o widget aparece:

Mostrar apenas em páginas específicas

<script src="..."
  data-tenant-id="xxx"
  data-show-on="/,/contato,/produtos/*"
></script>

Esconder em páginas específicas

<script src="..."
  data-tenant-id="xxx"
  data-hide-on="/admin/*,/checkout/*"
></script>

data-show-on tem prioridade se ambos forem usados
Use /* para wildcard (ex: /admin/* inclui /admin/users)

💬 Histórico de Conversa

O widget salva o histórico da conversa no localStorage do navegador. Ao reabrir o widget, o usuário vê as mensagens anteriores. O histórico é vinculado ao conversation_id gerado automaticamente.

← Messenger API Reference →