# Botão flutuante WhatsApp + Parcerias — Wix
Widget autocontido (HTML + CSS + JS, sem dependências) para colar no **Código
personalizado** do Wix. Cria um botão verde flutuante no canto inferior direito,
presente em todas as páginas. Ao clicar, abre um painel com 2 opções:
1. **Converse com o advogado** → abre direto o WhatsApp `554130575050` (41 3057-5050).
2. **Parcerias** → abre o app de e-mail do visitante com o assunto "Parcerias".
---
## ⚠️ Valores já preenchidos (só troque se mudar)
1. **E-mail de parcerias:** `contato@rangeldemiranda.com.br`.
2. **WhatsApp:** `554130575050` (41 3057-5050).
Formato do `wa.me`: código do país (55) + DDD + número, só dígitos.
---
## Código completo
```html
```
---
## Abrir o painel pelos botões do site
Qualquer botão ou link do site pode abrir o **mesmo painel** do botão flutuante.
Não se cola código no botão — configura-se o **link** dele com um marcador que o
script intercepta. No Editor Wix, para cada botão:
1. Selecione o botão → ícone de **Link** → **Endereço da web** (*Web Address*).
2. Cole: `https://www.rangeldemiranda.com.br/#abrir-contato`
(troque pelo domínio real do site, mantendo o `#abrir-contato` no final).
3. Em "Como abre?", escolha **Na mesma janela** (*Current window*) — **não** use
"Nova aba", senão a interceptação não funciona.
Como funciona: o script escuta cliques em qualquer link cujo endereço contenha
`#abrir-contato`, cancela a navegação e abre o painel. Se por algum motivo o
script não tiver carregado, o clique navega para a página com `#abrir-contato`
na URL — e o painel abre sozinho ao carregar (fallback).
---
## Pré-requisito que trava tudo (confira antes)
O menu **Código personalizado** do Wix **só aparece** se o site atender **as duas
condições**:
1. Site já **publicado** ao menos uma vez.
2. Ter um **domínio conectado** (normalmente vem com um **plano pago/Premium**).
Se o site for gratuito (endereço tipo `usuario.wixsite.com/...`) ou nunca
publicado, o item de menu **não existe**. Esse é o motivo nº 1 de não achar a opção.
---
## Passo a passo — instalação no Wix
O Custom Code fica no **painel do site** (*Dashboard*), **não** dentro do Editor.
1. Entre no site em **wix.com** e abra o **painel do site** (*Dashboard*).
2. No menu lateral, vá em **Configurações** (*Settings*).
3. Na seção **Desenvolvimento e integrações** (*Development & integrations*),
clique em **Código personalizado** (*Custom Code*).
4. No canto superior direito, clique em **+ Adicionar código personalizado**
(*+ Add Custom Code*).
5. **Cole** o código inteiro na caixa de texto.
6. No campo **Nome** (*Name*), escreva `Botão WhatsApp flutuante`.
7. Em **Adicionar código às páginas** (*Add Code to Pages*), selecione
**Todas as páginas** (*All pages*).
- Se aparecer a sub-opção, escolha **carregar em cada página**
(*Load code on each new page*).
8. Em **Local do código** (*Place Code in*), selecione **Corpo – fim** (*Body – end*).
9. Clique em **Aplicar** (*Apply*).
10. **Publique** o site (*Publish*).
---
## Teste depois de publicar
- Abra o **site publicado** (não a prévia do editor — às vezes o Custom Code não
roda na prévia).
- O botão verde deve aparecer no **canto inferior direito**, em **todas** as páginas.
- Clique nele → surgem as 2 opções.
- **Converse com o advogado** → abre o WhatsApp `554130575050` (41 3057-5050).
- **Parcerias** → abre o app de e-mail com destinatário `contato@rangeldemiranda.com.br`
e assunto "Parcerias - Contato pelo site".
---
## Notas técnicas
- **`target="_blank"` no WhatsApp:** abre em nova aba. No celular cai direto no
app do WhatsApp; no desktop abre o WhatsApp Web.
- **`mailto:` das parcerias:** abre o app de e-mail *do visitante*. Se numa máquina
o e-mail não estiver configurado, pode não abrir — limitação de qualquer solução
sem servidor. Para algo mais robusto (formulário que envia sozinho), seria preciso
um backend/serviço de formulário.
- Código isolado com prefixo `cz-` e `z-index: 999999` — não conflita com o template
do Wix.
---
## Fontes
- [Wix Editor: Embedding Custom Code on Your Site — Wix Help Center](https://support.wix.com/en/article/wix-editor-embedding-custom-code-on-your-site)
- [About Custom Code — Wix SDK Docs](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/custom-code/about-custom-code)
