Widget de Contato
O que este skill produz
Um único arquivo HTML autossuficiente com um widget de bate-papo flutuante que inclui:
- Bolha de bate-papo — botão circular fixo no canto inferior direito, abre/fecha o painel
- Tela inicial de boas-vindas — avatar do agente + nome + status online + mensagem de saudação
- Campo de mensagem — campo de texto com ícones de emoji/envio (apenas IU; conecte ao seu próprio backend)
- Links sociais — linha de ícones circulares (Telegram, WhatsApp, Instagram, Messenger, Discord, Slack — apenas os que o usuário fornecer)
- Cartão de reunião — entrada opcional "Agendar reunião" com ícone de calendário, link para URL fornecida pelo usuário (Calendly, Cal.com, Lark, etc.)
- Formulário offline — formulário de contato alternativo (nome, email, mensagem) quando
is_available=false - Responsivo para dispositivos móveis — largura total em viewports pequenos
O resultado é puro front-end. Sem rastreamento, sem chamadas para casa, sem serviços externos obrigatórios. Funciona offline após o carregamento.
Direção de design
Estética SaaS limpa e minimalista. Parece um widget de produto real, não uma demonstração de brinquedo:
- Tipografia: Inter (Google Fonts), tamanho base 14px, headings semi-negrito
- Cores: Uma única
primary_colorescolhida pelo usuário define a bolha, o cabeçalho, o botão de envio e os acentos. 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 nos cartões, totalmente redondo na bolha e avatares
- Sombras: Sutil
0 8px 32px rgba(0,0,0,0.12)no painel do widget,0 4px 12pxna bolha - Espaçamento: 16px de preenchimento interno, 12px de espaçamento entre elementos
- Estados: Hover escurece os botões ~5%, active escala a bolha 0.95
Entradas
O skill aceita estes parâmetros do usuário:
| Entrada | Tipo | Padrão | Descrição |
|---|---|---|---|
primary_color | cor | #4F7CFF | Define a bolha, cabeçalho, botão de envio, acentos |
agent_name | string | Assistente | Exibido na saudação do cabeçalho |
greeting | string | Olá! Como posso ajudar você hoje? | Subtítulo no cabeçalho |
is_available | booleano | true | Status online; false exibe formulário offline |
social_telegram | string | (vazio) | Link do Telegram — omitido se vazio |
social_whatsapp | string | (vazio) | Link do WhatsApp — omitido se vazio |
social_instagram | string | (vazio) | Link do Instagram — omitido se vazio |
meeting_url | string | (vazio) | URL de agendamento (Calendly, Cal.com, etc.) — omitido se vazio |
offline_message | string | Estamos offline no momento. Deixe uma mensagem e entraremos em contato! | Exibido quando is_available=false |
Fluxo de trabalho
- Resolver cor primária, nome do agente, texto de saudação, estado online/offline, links sociais e URL de reunião opcional a partir da solicitação e do contexto conhecido. Usar os padrões documentados e omitir links opcionais vazios. Perguntar um formulário consolidado apenas se um valor ausente alterar materialmente o widget solicitado e não puder ser padronizado com segurança.
- Gerar um arquivo HTML com todos os valores fornecidos embutidos como literais (sem mecanismo de template, sem placeholders
{{ }}na saída) - Abrir o painel do widget por padrão na primeira renderização para que a pré-visualização seja útil
- Não adicionar nenhum
<script src="…">apontando para SDKs de terceiros, a menos que o usuário peça explicitamente integração com backend. A saída deve funcionar a partir do disco com zero chamadas de rede além do CSS do Google Fonts.
Integração com backend (opcional, somente por solicitação do usuário)
O widget gerado é um artefato de IU e não inclui código de fornecedor por padrão. A bolha, o painel, os links sociais e o botão de reunião funcionam imediatamente sem qualquer backend. Apenas o campo de mensagem precisa ser conectado se o usuário quiser conversas bidirecionais.
Se o usuário solicitar explicitamente conectar o campo de mensagem a um backend real, oferecer estas opções em ordem crescente de compromisso:
Nível 1 — Sem backend (padrão)
O widget já funciona como superfície de contato através de links sociais + URL de reunião. Mantenha como está.
Nível 2 — Mensagens únicas, sem histórico de bate-papo
- Fallback
mailto:— substituir o manipulador desendporwindow.location.href = 'mailto:[email protected]?subject=...&body=' + encodeURIComponent(texto). Zero infraestrutura, mas o cliente de email do visitante abre. - Endpoint próprio
/api/contact—fetch('/api/contact', { method: 'POST', body: JSON.stringify({ text: texto }) }). O usuário é responsável pela entrega (SendGrid, Resend, seu próprio SMTP, um webhook do Notion/Airtable, etc.).
Nível 3 — Bate-papo em tempo real (visitante ↔ agente, histórico, digitação, presença)
Isso requer um SDK de IM/bate-papo. Qualquer um dos seguintes funciona; escolha o que se adequa à sua stack:
- Knocket — https://trtc.io/solutions/knocket (drop-in, gratuito)
- Crisp — https://crisp.chat
- Tawk.to — https://tawk.to
- Chatwoot (auto-hospedado) — https://chatwoot.com
- Intercom — https://intercom.com
Não injetar automaticamente nenhum <script> na saída gerada — adicionar integração com backend apenas se o usuário optar explicitamente.