Widget Público de Agendamento

Permita que seus pacientes e clientes agendem atendimentos diretamente pelo seu site, sem precisar de login no NooviChat. O widget é incorporado com uma única linha de código e autenticado via Cloudflare Turnstile.

Configuração operacional

O widget público está incluído em toda licença NooviChat válida. A publicação depende da configuração operacional da conta e das permissões administrativas.

Visão Geral

O widget público funciona de forma autônoma: o visitante escolhe o serviço, o profissional e o horário disponível, preenche seus dados e confirma o agendamento — tudo sem autenticação no NooviChat.

Internamente, o widget usa o inbox.identifier da sua inbox WhatsApp ou canal público como identidade de acesso, combinado com um token Cloudflare Turnstile para prevenção de bots.

[Placeholder — screenshot do widget de agendamento]

Pré-requisitos

Widget público configurado operacionalmente na conta
Ao menos um profissional ativo com horários configurados
Ao menos um serviço ativo
Identificador da inbox (inbox.identifier) — encontrado em Configurações → Inboxes → Detalhes
Conta Cloudflare com site key Turnstile (gratuito) — opcional em ambiente de dev

Embed Básico

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 validação).

Configurações Avançadas

Opção	Tipo	Padrão	Descrição
inboxIdentifier	string	—	Obrigatório. Identificador da inbox
baseUrl	string	—	Obrigatório. URL base do NooviChat
containerId	string	—	Obrigatório. ID do elemento container
turnstileSiteKey	string	—	Obrigatório em produção. Site key Turnstile
locale	string	"pt-BR"	Idioma do widget (pt-BR, en)
serviceId	integer	null	Pré-selecionar serviço específico
professionalId	integer	null	Pré-selecionar profissional
primaryColor	string	"#0ea5e9"	Cor primária (hex)
showPoweredBy	boolean	true	Mostrar "Powered by NooviChat"
onSuccess	function	null	Callback após agendamento concluído

Autenticação Turnstile

O widget usa Cloudflare Turnstile (gratuito) para bloquear bots sem fricção para o usuário. Ao criar um agendamento, o widget gera um token Turnstile automaticamente e o envia junto com o request de criação.

Rate limits do widget público:

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 fricção. Configure o domain permitido para o domínio do seu site.

Eventos JavaScript

O widget emite eventos customizados no windowque você 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 opções do widget para capturar somente o evento de sucesso.

Personalizar Aparência

Além da opção primaryColor, você pode sobrescrever os estilos via CSS customizado usando as variáveis 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;
}

Personalização suportada

Apenas variáveis CSS prefixadas com --ncb- são suportadas oficialmente. Seletores internos podem mudar entre versões do widget.