# 🎬 VideoBadge — Guia de Instalação

## Estrutura de arquivos

```
videobadge/
├── admin/
│   └── index.html        ← Painel administrativo
├── api/
│   ├── videos.php        ← API backend
│   └── videos_data.json  ← (criado automaticamente)
└── widget/
    ├── widget.css        ← Estilos do badge flutuante
    └── widget.js         ← Lógica do badge e player
```

---

## 1. Upload na hospedagem

Envie a pasta `videobadge/` para a **raiz pública** do seu domínio via FTP/cPanel.
O caminho final deve ser:

```
https://seudominio.com.br/videobadge/
```

---

## 2. Configurar a senha

Abra o arquivo `api/videos.php` e troque na linha indicada:

```php
define('ADMIN_TOKEN', 'TROQUE_POR_UMA_SENHA_SEGURA');
```

Use uma senha forte. Esta é a única proteção do painel.

---

## 3. Permissão de escrita

Na pasta `api/`, o arquivo `videos_data.json` precisa ser gravável.
Via cPanel → Gerenciador de Arquivos, certifique-se que a pasta `api/` tem permissão **755** e o arquivo `videos_data.json` (após a primeira gravação) tem **644**.

Se a API retornar erro de permissão, crie o arquivo manualmente via FTP com conteúdo `[]` e dê permissão 644.

---

## 4. Acessar o Painel Admin

Abra no navegador:

```
https://seudominio.com.br/videobadge/admin/
```

Digite a senha configurada e entre.

---

## 5. Script na Yampi

No painel do admin, copie o **Script Yampi** mostrado no topo.

No painel da Yampi:
1. Vá em **Configurações → Avançado → Scripts Personalizados**
2. Cole no campo **"Rodapé (antes do </body>)"**
3. Salve.

O script carrega automaticamente em **todas as páginas** da loja e verifica se há vídeos cadastrados para aquela URL.

---

## 6. Cadastrar um vídeo

No painel admin:
- **URL do Vídeo**: Cole o link do YouTube (ex: `https://youtube.com/watch?v=abc123`) ou URL de vídeo local
- **Página onde aparece**: Cole o slug ou URL completa da página da Yampi (ex: `/produtos/meu-produto`)
- **Rótulo**: Texto que aparece abaixo do badge circular
- **Posição**: Canto onde o badge vai aparecer

---

## Correspondência de URLs

O sistema compara o **caminho (path)** da URL atual com o cadastrado.
Por exemplo, se você cadastrou `/produto/meu-produto`, o badge aparecerá em:
- `https://minhaloja.yampi.com.br/produto/meu-produto`
- `https://www.minhaloja.com.br/produto/meu-produto`

Dica: sempre use o slug completo como aparece no navegador.