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

Cole o código abaixo no campo disponível.

***

## Código

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

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

***

## Personalizando o Fundo

Quer usar uma imagem diferente?

Basta alterar a variável:

```javascript
const BG_URL = 'SUA_URL_AQUI';
```

{% hint style="success" icon="lightbulb-on" %}

#### 💡 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.
{% endhint %}

***

## Resultado

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

***

{% hint style="warning" %}

#### Importante

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tutorial.stevo.chat/integracao-ghl/mudando-o-fundo-do-chat-para-whatsapp.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.