Nicchon.
Todos os projetos
Estudo técnicoEm produção· 2026

Creatyze Floating WhatsApp

Plugin WordPress com botão flutuante de WhatsApp — sincroniza com JetEngine, mensagem pré-preenchida, workarounds pra bugs reais do WA Web.

Sobre

Plugin WordPress que construí inicialmente pro site da Caroline Quixabeira, e amadureci em 9 versões (1.0.0 → 1.9.3). Lê o número do WhatsApp direto da Options Page do JetEngine — quando ela atualiza no painel, o botão pega sozinho. O que diferencia dos plugins prontos é o conjunto de workarounds pra bugs reais do WhatsApp Web (line endings, %0A engolido, palavras coladas) e a robustez na detecção do JetEngine (5 prefixos de option key + fallback varrendo wp_options).

Stack

  • PHP
  • WordPress
  • JetEngine

Decisões

  • Sincronização com JetEngine como modo default — quando o cliente atualiza o número numa Options Page, o botão atualiza sozinho. Cliente não precisa mexer no plugin.
  • Settings page com identidade visual própria (Creatyze) — color picker, dropdown listando campos do JetEngine com prévia, painel de diagnóstico colapsável.
  • Normalizador automático de número — aceita qualquer formato (com parênteses, espaços, traços, URL wa.me, sem código de país) e converte pra link wa.me válido.
  • Hooks `creatyze_fwa_link` e `creatyze_fwa_should_render` — extensibilidade pra outros devs estenderem sem fork.
  • Respeita `prefers-reduced-motion` — animação de pulse desligada automaticamente pra quem configurou redução de movimento no SO.

Desafios técnicos

  • WhatsApp Web ignora `\r\n` em mensagens pré-preenchidas e cola palavras sem espaço — solução: normaliza line endings pra `\n` antes do encode e insere espaço antes da quebra.
  • Detectar onde o JetEngine guardou o campo varia entre versões — solução: tenta 5 prefixos de option key conhecidos, depois API pública, e por último varre `wp_options` atrás do slug.
  • Encoder PHP `rawurlencode` produz output ligeiramente diferente do `encodeURIComponent` JS — solução: implementa manualmente pra mimicar o JS (não encoda `! * ' ( ) ~`), aumentando compatibilidade com o parser do WhatsApp.