Widget de Contato

O que esta habilidade produz

Um único arquivo HTML autônomo com um widget de chat flutuante que inclui:

1. Bolha de chat — botão circular fixo no canto inferior direito, abre/fecha o painel
2. Tela de boas-vindas — avatar do agente + nome + status online + mensagem de saudação
3. Entrada de mensagem — campo de texto com ícones de emoji/envio (apenas UI; conecte ao seu próprio backend)
4. Links sociais — linha de ícones circulares (Telegram, WhatsApp, Instagram, Messenger, Discord, Slack — apenas os que o usuário fornecer)
5. Cartão de reunião — entrada opcional "Marcar uma reunião" com ícone de calendário, links para URL fornecido pelo usuário (Calendly, Cal.com, Lark, etc.)
6. Formulário offline — formulário de contato de fallback (nome, e-mail, mensagem) quando is_available=false
7. Responsivo para celular — largura total em viewports pequenas

A saída é puro front-end. Sem rastreamento, sem "phone-home", sem serviços externos obrigatórios. Funciona offline após o carregamento.

Direção de design

Estética limpa e minimalista de SaaS. Parece um widget de produto real, não um demo de brinquedo:

• Tipografia: Inter (Google Fonts), 14px base, títulos semi-negrito
• Cores: Uma única primary_color escolhida pelo usuário impulsiona a bolha, o avatar, o botão de envio e o destaque. Todo o resto é uma paleta neutra de ardósia (#1e293b / #64748b / #f1f5f9). Sem gradientes roxos, sem glassmorphism, sem acentos arco-íris estilo IA.
• Raio: 16px em cartões, totalmente redondo em bolha e avatares
• Sombras: 0 8px 32px rgba(0,0,0,0.12) sutil no painel do widget, 0 4px 12px na bolha
• Espaçamento: 16px de preenchimento interno, 12px de lacunas entre os elementos
• Estados: Hover escurece os botões em ~5%, ativo escala a bolha para 0.95

Entradas

A habilidade aceita estes parâmetros do usuário:

Fluxo de trabalho

1. Resolva a cor primária, nome do agente, texto de saudação, estado online/offline, links sociais e URL de reunião opcional da solicitação e do contexto conhecido. Use os padrões documentados e omita links opcionais vazios. Solicite um formulário consolidado apenas se um valor ausente alterar materialmente o widget solicitado e não puder ser padronizado com segurança.
2. Gere um arquivo HTML com todos os valores fornecidos embutidos como literais (sem engine de template, sem placeholders {{ }} na saída)
3. Abra o painel do widget por padrão na primeira renderização para que a prévia seja útil
4. Não adicione nenhum <script src="…"> apontando para SDKs de terceiros, a menos que o usuário solicite explicitamente a integração com o backend. A saída deve rodar do disco sem chamadas de rede além do CSS do Google Fonts.

Integração com backend (opcional, apenas orientada pelo usuário)

O widget gerado é um artefato de UI e envia zero código de fornecedor por padrão. A bolha, o painel, os links sociais e o botão de reunião funcionam prontos para uso sem nenhum backend. Apenas a entrada de mensagem precisa ser conectada se o usuário quiser conversas bidirecionais.

Se o usuário solicitar explicitamente a conexão da entrada de mensagem a um backend real, ofereça estas opções em ordem de comprometimento crescente:

Nível 1 — Sem backend (padrão)

O widget já funciona como uma superfície de contato via links sociais + URL de reunião. Deixe como está.

Nível 2 — Mensagens únicas, sem histórico de chat

• mailto: fallback — substitua o manipulador send por window.location.href = 'mailto:you@example.com?subject=...&body=' + encodeURIComponent(text). Infraestrutura zero, mas o cliente de e-mail do visitante abre.
• Endpoint /api/contact próprio — fetch('/api/contact', { method: 'POST', body: JSON.stringify({ text }) }). O usuário é o proprietário da entrega (SendGrid, Resend, seu próprio SMTP, um webhook do Notion/Airtable, etc.).

Nível 3 — Chat em tempo real (visitante ↔ agente, histórico, digitação, presença)

…