Mudando o Fundo do Chat para WhatsApp

---

O que esse script faz?

Este script aplica o fundo clássico do WhatsApp (com o padrão de doodles) na área de conversas do GoHighLevel, deixando a interface mais familiar e visualmente parecida com o WhatsApp.

---

Local de Implementação

Acesse seu Go High Level → Settings → Company → Custom JavaScript e cole o código abaixo:

---

Código

<script>
(() => {
  const BG_URL = 'https://s0.smartresize.com/wallpaper/744/548/HD-wallpaper-whatsapp-ma-doodle-pattern.jpg';

  function applyWhatsAppBackground() {
    const panel = document.querySelector('#conversation-panel');
    if (!panel) return;

    // Aplicar wallpaper no panel
    panel.style.setProperty('background-image', `url("${BG_URL}")`, 'important');
    panel.style.setProperty('background-color', 'transparent', 'important');
    panel.style.setProperty('background-size', 'cover', 'important');
    panel.style.setProperty('background-position', 'center', 'important');
    panel.style.setProperty('background-repeat', 'no-repeat', 'important');

    // Remover fundo dos filhos (o div m-3 que fica por cima)
    panel.querySelectorAll('.m-3, [class*="bg-"]').forEach(el => {
      // Não remover fundo das bolhas de mensagem
      if (!el.closest('[class*="chat-"]') && !el.classList.contains('hr-tag')) {
        el.style.setProperty('background-color', 'transparent', 'important');
      }
    });

    // Header branco
    const container = panel.parentElement;
    if (container) {
      const header = container.querySelector('.border-b');
      if (header) header.style.setProperty('background-color', 'white', 'important');
      container.style.setProperty('background-color', 'white', 'important');
    }
  }

  // Aplicar após DOM carregar
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => setTimeout(applyWhatsAppBackground, 500));
  } else {
    setTimeout(applyWhatsAppBackground, 500);
  }

  // Reaplicar quando mudar de conversa
  const observer = new MutationObserver(() => {
    const panel = document.querySelector('#conversation-panel');
    if (panel && !panel.style.backgroundImage?.includes('whatsapp')) {
      applyWhatsAppBackground();
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
})();
</script>

---

Passo a Passo

1. Copie o código JavaScript acima
2. Faça login na sua conta Whitelabel do GoHighLevel
3. Vá até Settings → Company → Custom JavaScript
4. Cole o código na caixa disponível
5. Clique em Save para aplicar as alterações
6. Atualize a página e verifique se funcionou

---

Personalizando o Fundo

Quer usar uma imagem diferente? Basta trocar a URL na variável BG_URL:

const BG_URL = 'SUA_URL_AQUI';

💡 Dica

Você pode usar qualquer imagem de fundo! Use uma URL de imagem hospedada (Google Drive, Imgur, etc.) para personalizar com as cores da sua marca.

---

Resultado

Antes	Depois
Fundo padrão cinza do GHL	Fundo com padrão clássico do WhatsApp

---

⚠️ Importante

Se você já tem outros scripts no Custom JavaScript, adicione este código abaixo dos existentes, não substitua!