NooviChatDocs

Widget Publico de Agendamento

Permita que seus pacientes e clientes agendem atendimentos diretamente pelo seu site, sem precisar de login no NooviChat. O widget e incorporado com uma unica linha de codigo e autenticado via Cloudflare Turnstile.

Feature Flag

Requer appointments_public_widget habilitado na conta. Entre em contato com o suporte para ativar.

Visao Geral

O widget publico funciona de forma autonoma: o visitante escolhe o servico, o profissional e o horario disponivel, preenche seus dados e confirma o agendamento — tudo sem autenticacao no NooviChat.

Internamente, o widget usa o inbox.identifier da sua inbox WhatsApp ou canal publico como identidade de acesso, combinado com um token Cloudflare Turnstile para prevencao de bot.

[Placeholder — screenshot do widget de agendamento]

Pre-requisitos

  • Feature flag appointments_public_widget ativa
  • Ao menos um profissional ativo com horarios configurados
  • Ao menos um servico ativo
  • Identificador da inbox (inbox.identifier) — encontrado em Configuracoes → Inboxes → Detalhes
  • Conta Cloudflare com site key Turnstile (gratuito) — opcional em ambiente de dev

Embed Basico

Adicione o script e o elemento container onde desejar exibir o widget.

html
<!-- 1. Adicione o container onde o widget sera exibido -->
<div id="noovichat-booking-widget"></div>

<!-- 2. Adicione o script antes do </body> -->
<script>
  window.NooviChatBooking = {
    inboxIdentifier: "SEU_INBOX_IDENTIFIER",
    baseUrl: "https://chat.seudominio.com",
    containerId: "noovichat-booking-widget",
    turnstileSiteKey: "SEU_TURNSTILE_SITE_KEY",
    locale: "pt-BR",
  };
</script>
<script
  src="https://chat.seudominio.com/packs/booking-widget.js"
  async
></script>

Ambiente de desenvolvimento

Em desenvolvimento local, defina turnstileSiteKey: "1x00000000000000000000AA" para usar a site key de teste do Cloudflare (sempre passa a validacao).

Configuracoes Avancadas

OpcaoTipoPadraoDescricao
inboxIdentifierstring—Obrigatorio. Identificador da inbox
baseUrlstring—Obrigatorio. URL base do NooviChat
containerIdstring—Obrigatorio. ID do elemento container
turnstileSiteKeystring—Obrigatorio em producao. Site key Turnstile
localestring"pt-BR"Idioma do widget (pt-BR, en)
serviceIdintegernullPre-selecionar servico especifico
professionalIdintegernullPre-selecionar profissional
primaryColorstring"#0ea5e9"Cor primaria (hex)
showPoweredBybooleantrueMostrar "Powered by NooviChat"
onSuccessfunctionnullCallback apos agendamento concluido

Autenticacao Turnstile

O widget usa Cloudflare Turnstile (gratuito) para bloquear bots sem fricao para o usuario. Ao criar um agendamento, o widget gera um token Turnstile automaticamente e o envia junto com o request de criacao.

Rate limits do widget publico:

  • 10 requests por minuto por IP
  • 60 agendamentos por hora por inbox

Criar site key Turnstile

Acesse dash.cloudflare.com→ Turnstile → Adicionar site. Use o tipo "Managed" para menor fricao. Configure o domain permitido para o dominio do seu site.

Eventos JavaScript

O widget emite eventos customizados no windowque voce pode escutar para integrar com seu CRM ou analytics.

javascript
// Agendamento criado com sucesso
window.addEventListener('noovichat:booking:created', (e) => {
  console.log('Agendado:', e.detail);
  // e.detail = { appointment_id, public_id, scheduled_at, service, professional }

  // Exemplo: enviar para Google Analytics
  gtag('event', 'appointment_booked', {
    service: e.detail.service.name,
    professional: e.detail.professional.name,
  });
});

// Etapa alterada (para funil de analytics)
window.addEventListener('noovichat:booking:step', (e) => {
  console.log('Etapa:', e.detail.step);
  // e.detail.step = 'service_select' | 'professional_select' | 'datetime_select' | 'contact_form' | 'confirmation'
});

// Erro de agendamento
window.addEventListener('noovichat:booking:error', (e) => {
  console.error('Erro:', e.detail.error, e.detail.code);
  // e.detail.code = 'scheduling_conflict' | 'rate_limit' | 'invalid_turnstile'
});

Alternativamente, use o callback onSuccess nas opcoes do widget para capturar somente o evento de sucesso.

Personalizar Aparencia

Alem da opcao primaryColor, voce pode sobrescrever os estilos via CSS customizado usando as variaveis CSS do widget.

css
/* Override das variaveis do widget */
#noovichat-booking-widget {
  --ncb-primary: #7c3aed;        /* cor primaria */
  --ncb-primary-hover: #6d28d9;  /* hover da cor primaria */
  --ncb-radius: 0.5rem;          /* border-radius dos elementos */
  --ncb-font: 'Inter', sans-serif;
}

/* Esconder o "Powered by" via CSS (alternativa a showPoweredBy: false) */
#noovichat-booking-widget .ncb-powered-by {
  display: none;
}

Personalizacao suportada

Apenas variaveis CSS prefixadas com --ncb- sao suportadas oficialmente. Seletores internos podem mudar entre versoes do widget.