# Código personalizado

> Blocos de código na área do aluno e no login: Google Analytics, Tag Manager, Pixel, Active Campaign, WhatsApp, Push Alert e CSS ou JavaScript próprios.

O código personalizado coloca um código seu nas páginas da área do aluno e nas telas de acesso. Por exemplo: um pixel, um script de analytics, um botão de WhatsApp ou o seu próprio CSS e JavaScript. Você adiciona esses blocos em **Configurações > Código personalizado**.

## Como funciona

Cada bloco de código tem um tipo, um lugar onde entra e um status. A Cademí injeta o bloco nas páginas que você escolher.

**A regra mais importante:** o código roda para todos os alunos. Um erro no seu código pode quebrar a área do aluno inteira. Teste sempre em **Rascunho** antes de publicar.

A lista mostra **ID**, **Nome**, **Tipo**, **Exibição** e **Status**. O **Status** é **Publicado** ou **Rascunho**, e você troca na própria linha.

O botão **Novo bloco** abre o painel **Novo bloco de código**. Ele tem estes campos:

- **Nome**: identifica o bloco na lista. Os alunos não veem este nome.
- **Status**: em **Rascunho**, o código não é injetado para os alunos.
- **Exibição**: em quais páginas o código entra (veja a tabela abaixo).
- **Tipo**: uma integração pronta, que só pede o identificador, ou **Custom**, o código livre.
- As abas **Header** e **Body**: o código injetado no cabeçalho da página e o código injetado antes do fim dela. No tipo **Custom**, você escreve aqui. Nos outros tipos, o código vem pronto.

| Exibição | Onde o código entra |
|---|---|
| **Sempre** | Nas páginas da área do aluno e nas telas de acesso (login, cadastro, recuperação de senha) |
| **Após login** | Só nas páginas da área do aluno |
| **Apenas no login** | Só nas telas de acesso |
| **Apenas no administrador** | Reservado ao painel do administrador. O bloco não entra na área do aluno nem no login |

### Os tipos

| Tipo | O que pede | O que faz |
|---|---|---|
| **Google Analytics** | **ID do Google Analytics** (UA-123456789-1 ou G-XXXXXXXXXX) | Insere a tag do Analytics nas páginas |
| **Google Tag Manager** | **ID do Tag Manager** (GTM-A1BCDEF) | Insere o contêiner do Tag Manager |
| **Facebook** | **ID do Pixel** | Insere o pixel e registra a visualização de cada página |
| **Active Campaign** | **ID da conta (Active Campaign)** | Insere o rastreamento de site. Ele identifica o visitante pelo e-mail do aluno. Use com **Após login** |
| **Whatsapp** | **Número (com DDI/DDD)** e **Mensagem** | Mostra um botão fixo de WhatsApp no canto inferior direito das páginas. A **Mensagem** chega preenchida quando o aluno abre a conversa |
| **Push Alert** | **manifest.json** e **sw.js**, fornecidos pelo PushAlert | Instala as notificações do PushAlert |
| **Custom** | **Header** e **Body** | Injeta o que você escrever: `<script>`, `<style>`, HTML, widgets de chat e atendimento |

### Variáveis do aluno

Em qualquer bloco, a Cademí troca estas marcas pelos dados do aluno que está vendo a página:

| Marca | Vira |
|---|---|
| `{nome}` | O primeiro nome |
| `{nome_completo}` | O nome completo |
| `{email}` | O e-mail |
| `{celular}` | O celular |
| `{uid}` | O código do aluno na plataforma |
| `{is_gratis}` | 1 se o aluno tem a marca de cadastro gratuito; 0 nos demais. Uma compra depois não limpa a marca. Só um administrador a limpa, no perfil do aluno |
| `{avatar}` | O endereço da foto |

Nas telas de acesso não há aluno logado. Por isso, lá as marcas ficam vazias.

## Passo a passo

### Uma integração pronta

1. Abra **Configurações > Código personalizado**.
2. Clique em **Novo bloco**.
3. Preencha o **Nome**.
4. Escolha a **Exibição**.
5. Escolha o **Tipo**.
6. Preencha o identificador que o tipo pede. Por exemplo: o ID do Analytics, do Tag Manager ou do Pixel. No Active Campaign, o ID da conta. No WhatsApp, o número e a mensagem.
7. Deixe o **Status** em **Publicado**.
8. Clique em **Criar bloco**.

### Código próprio

1. Clique em **Novo bloco**.
2. Preencha o **Nome**.
3. Escolha o **Tipo** **Custom**.
4. Deixe o **Status** em **Rascunho** enquanto testa.
5. Cole o código na aba **Header** ou na aba **Body** (veja abaixo).
6. Clique em **Criar bloco**.
7. Abra a área como administrador e confira o efeito.
8. Quando estiver certo, troque o **Status** para **Publicado**, na linha ou no painel de edição.

Onde colar o código:

- **Header**: o que precisa carregar antes da página, como CSS e scripts de terceiros.
- **Body**: o que pode carregar no fim, como widgets de chat.

Um bloco em **Rascunho** não é injetado para os alunos, mas é injetado para você. Assim, você confere o efeito sem expor ninguém.

Para editar, clique na linha. Para excluir, use o ícone de lixeira e confirme em **Excluir bloco**. O bloco excluído vai para a **Lixeira**. De lá, você pode restaurar o bloco.

## Bom saber

- **O código roda para todos os alunos.** Um script com erro pode quebrar a área do aluno inteira: botões que não respondem, player que não abre. Teste em **Rascunho** antes de publicar. Se algo estranho aparece na área, o primeiro passo é voltar os blocos recentes para **Rascunho**.
- **Código de terceiros é responsabilidade de quem o insere.** A plataforma injeta o que você colar, sem conferir. Não cole código de origem desconhecida. Lembre: um script lê o que o aluno vê e digita.
- **CSS cirúrgico.** Para mudar o visual por CSS, mire em elementos específicos. Regras genéricas valem para toda a área e podem atrapalhar atualizações futuras da plataforma.
- **Páginas fora do alcance.** A verificação em duas etapas e a página de consentimento de aplicativos não recebem código personalizado.
- **Clone.** Os blocos da conta de origem chegam aos clones com o selo **Herdado**. Excluir um bloco herdado no clone remove o bloco só desse clone. A origem fica intacta.

## Perguntas frequentes

**Adicionei o código e nada mudou.** Confira estes pontos:

1. O **Status**: em **Rascunho**, só você vê o bloco.
2. A **Exibição**: um bloco **Apenas no login** não aparece dentro da área.
3. Recarregue a página sem cache.
4. Num script de terceiros, confira o identificador.

**Posso usar Hotjar, Zendesk, Tawk.to ou outro chat?** Pode. Crie um bloco **Custom** e cole o trecho que a ferramenta fornece, em geral na aba **Body**.

**O botão de WhatsApp pode saudar o aluno pelo nome?** Pode. Escreva a **Mensagem** com as variáveis. Por exemplo: "Olá, meu nome é {nome} e preciso de ajuda".

**Publiquei um código e a área do aluno parou de funcionar.** Volte o bloco para **Rascunho** na própria linha. Depois, corrija o código e teste de novo como administrador.