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 e também pinta as bolhas de mensagem no estilo WhatsApp — verde claro nas enviadas e branco nas recebidas — 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>
(function () {
  var BG_URL = 'https://s0.smartresize.com/wallpaper/744/548/HD-wallpaper-whatsapp-ma-doodle-pattern.jpg';
  var COR_ENVIADA  = '#DCF8C6'; // verde claro (enviadas)
  var COR_RECEBIDA = '#FFFFFF'; // branco (recebidas)

  function pintarBolhas(panel) {
    var out = panel.querySelectorAll('.chat-bubble-outbound');
    for (var o = 0; o < out.length; o++) {
      out[o].style.setProperty('background-color', COR_ENVIADA, 'important');
    }
    var inb = panel.querySelectorAll('.chat-bubble-inbound');
    for (var n = 0; n < inb.length; n++) {
      inb[n].style.setProperty('background-color', COR_RECEBIDA, 'important');
    }
  }

  function transparentizarWrappers(panel) {
    var todos = panel.querySelectorAll('*');
    for (var i = 0; i < todos.length; i++) {
      var el = todos[i];
      var cs = getComputedStyle(el);
      var bg = cs.backgroundColor;
      var hasBg = bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent';
      // não tocar nas bolhas nem no conteúdo do chat
      if (hasBg && el.clientWidth > 200 && el.clientHeight > 100 &&
          !el.closest('[class*="chat-bubble"]') &&
          (el.className || '').toString().indexOf('chat-') === -1) {
        el.style.setProperty('background-color', 'transparent', 'important');
      }
    }
  }

  function aplicarFundo(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');
    var parent = panel.parentElement;
    if (parent) parent.style.setProperty('background-color', 'transparent', 'important');
  }

  function run() {
    var panel = document.querySelector('.conversation-panel') || document.querySelector('#conversation-panel');
    if (!panel) return;
    aplicarFundo(panel);            // garante o fundo
    transparentizarWrappers(panel); // <-- SEMPRE limpa o quadrado branco/cinza
    pintarBolhas(panel);            // pinta bolhas
  }

  // Observer: reaplica TUDO em qualquer mudança de DOM (troca de conversa incluída)
  var observer = new MutationObserver(function () {
    run();
  });
  observer.observe(document.body, { childList: true, subtree: true });

  // Roda algumas vezes no início pra pegar mensagens que carregam depois
  var tentativas = 0;
  var timer = setInterval(function () {
    run();
    tentativas++;
    if (tentativas >= 10) clearInterval(timer);
  }, 500);
})();
</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:

var BG_URL = 'SUA_URL_AQUI';

Também dá para mudar as cores das bolhas de mensagem nas variáveis do topo do script:

var COR_ENVIADA  = '#DCF8C6'; // verde claro (enviadas)
var COR_RECEBIDA = '#FFFFFF'; // branco (recebidas)

💡 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
Bolhas de mensagem padrão do GHL	Enviadas em verde claro e recebidas em branco, como no WhatsApp

---

⚠️ Importante

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