Widget Flutuante de WhatsApp

Ícone flutuante com horário de atendimento inteligente

Widget Hospedado

Acesse a página do widget que será incorporada nos sites

Ver Widget →

Exemplo de Incorporação

Veja como o widget funciona em um site HTML comum

Ver Exemplo →
Configuração de Teste
Manipule o dia e horário para testar as diferentes variações do widget
Logs de Debug
Acompanhe em tempo real o que está acontecendo no widget

Aguardando logs... Interaja com o widget para ver os logs aqui.

Como incorporar no seu site
Cole este código antes do fechamento da tag </body> no seu site
<!-- Widget WhatsApp BR DID -->
<script>
(function() {
    var iframe = document.createElement('iframe');
    iframe.id = 'brdid-whatsapp-widget';
    iframe.src = 'https://SEU-DOMINIO.vercel.app/widget';
    iframe.style.cssText = 'position:fixed;bottom:20px;right:20px;width:90px;height:90px;border:none;z-index:999999;background:transparent;visibility:hidden;opacity:0;transition:all 0.3s ease;pointer-events:auto;';
    iframe.setAttribute('allowtransparency', 'true');

    var widgetReady = false;
    var iframeLoaded = false;

    window.addEventListener('message', function(event) {
        if (event.data && event.data.type === 'widget-ready') {
            widgetReady = true;
            showIframeIfReady();
        }

        if (event.data && event.data.type === 'widget-opened') {
            iframe.style.width = '420px';
            iframe.style.height = '680px';
        }

        if (event.data && event.data.type === 'widget-closed') {
            iframe.style.width = '90px';
            iframe.style.height = '90px';
        }
    });

    iframe.onload = function() {
        iframeLoaded = true;
        showIframeIfReady();
    };

    function showIframeIfReady() {
        if (widgetReady && iframeLoaded) {
            setTimeout(function() {
                iframe.style.visibility = 'visible';
                iframe.style.opacity = '1';
            }, 100);
        }
    }

    setTimeout(function() {
        if (!widgetReady || !iframeLoaded) {
            iframe.style.visibility = 'visible';
            iframe.style.opacity = '1';
        }
    }, 3000);

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            document.body.appendChild(iframe);
        });
    } else {
        document.body.appendChild(iframe);
    }
})();
</script>

Como funciona:

  • O widget é hospedado na rota /widget do seu projeto Next.js
  • O iframe começa pequeno (90x90px) mostrando apenas o ícone
  • Quando o modal abre, o iframe expande para 420x680px automaticamente
  • pointer-events:auto garante que não bloqueia cliques do site
  • O iframe tem fundo transparente sem bloco branco visível
  • Todas as atualizações são feitas aqui, sem precisar atualizar sites externos
  • Não há conflitos de CSS/JS com o site do cliente

Importante:

Substitua SEU-DOMINIO.vercel.app pela URL real do seu deploy no Vercel.

Exemplo: Se seu projeto está em meusite.vercel.app, use https://meusite.vercel.app/widget

Demonstração
Clique no ícone flutuante no canto inferior direito para testar

O widget está ativo nesta página. Experimente clicar no ícone verde do WhatsApp no canto inferior direito!