🎨 Changing the Chat Background to WhatsApp

---

🎯 What does this script do?

This script applies the classic WhatsApp background (with the doodle pattern) to the conversation area in GoHighLevel, making the interface more familiar and visually similar to WhatsApp.

---

📍 Implementation Location

Access your Go High Level → Settings → Company → Custom JavaScript and paste the code below:

---

💻 Code

<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>

---

📝 Step by Step

1. ✅ Copy the JavaScript code above
2. ✅ Log in to your GoHighLevel Whitelabel account
3. ✅ Go to Settings → Company → Custom JavaScript
4. ✅ Paste the code in the available box
5. ✅ Click Save to apply the changes
6. ✅ Refresh the page and verify it worked

---

🖼️ Customizing the Background

Want to use a different image? Just change the URL in the BG_URL variable:

const BG_URL = 'YOUR_URL_HERE';

💡 Tip

You can use any background image! Use a hosted image URL (Google Drive, Imgur, etc.) to customize with your brand colors.

---

🎨 Result

Before	After
Default gray GHL background	Background with classic WhatsApp pattern

---

⚠️ Important

If you already have other scripts in Custom JavaScript, add this code below the existing ones, don't replace them!