🎨 Cambiando el Fondo del Chat a WhatsApp

---

🎯 ¿Qué hace este script?

Este script aplica el fondo clásico de WhatsApp (con el patrón de doodles) en el área de conversaciones de GoHighLevel, dejando la interfaz más familiar y visualmente parecida a WhatsApp.

---

📍 Ubicación de Implementación

Accede a tu Go High Level → Settings → Company → Custom JavaScript y pega el código a continuación:

---

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

---

📝 Paso a Paso

1. ✅ Copia el código JavaScript de arriba
2. ✅ Inicia sesión en tu cuenta Whitelabel de GoHighLevel
3. ✅ Ve a Settings → Company → Custom JavaScript
4. ✅ Pega el código en la caja disponible
5. ✅ Haz clic en Save para aplicar los cambios
6. ✅ Actualiza la página y verifica si funcionó

---

🖼️ Personalizando el Fondo

¿Quieres usar una imagen diferente? Solo cambia la URL en la variable BG_URL:

const BG_URL = 'TU_URL_AQUÍ';

💡 Consejo

¡Puedes usar cualquier imagen de fondo! Usa una URL de imagen hospedada (Google Drive, Imgur, etc.) para personalizar con los colores de tu marca.

---

🎨 Resultado

Antes	Después
Fondo gris predeterminado del GHL	Fondo con patrón clásico de WhatsApp

---

⚠️ Importante

Si ya tienes otros scripts en Custom JavaScript, agrega este código abajo de los existentes, ¡no los reemplaces!