Exemplo de Site com Widget BR DID

Este é um exemplo de como o widget funciona em qualquer site HTML. O widget está ativo no canto inferior direito desta página.

Como funciona:

Código de Incorporação

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:0;right:0;width:450px;height:650px;border:none;z-index:999999;background:transparent;pointer-events:none;visibility:hidden;opacity:0;transition:opacity 0.5s ease;';
    iframe.setAttribute('allowtransparency', 'true');
    
    var widgetReady = false;
    var iframeLoaded = false;
    
    // Listener para mensagem de ready do widget
    window.addEventListener('message', function(event) {
        if (event.data && event.data.type === 'widget-ready') {
            widgetReady = true;
            showIframeIfReady();
        }
    });
    
    // Listener para load do iframe
    iframe.onload = function() {
        iframeLoaded = true;
        showIframeIfReady();
    };
    
    // Função para mostrar o iframe apenas quando tudo estiver pronto
    function showIframeIfReady() {
        if (widgetReady && iframeLoaded) {
            setTimeout(function() {
                iframe.style.visibility = 'visible';
                iframe.style.opacity = '1';
            }, 100);
        }
    }

    // Timeout de segurança: mostra o iframe após 3 segundos mesmo sem ready
    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>

Teste de Interatividade

Importante: Teste se os elementos do site continuam clicáveis mesmo com o widget ativo. Clique nos botões abaixo:

Cliques nos botões: 0
✅ Teste bem-sucedido se:

Conteúdo de Exemplo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.