# CSS e Javascript

> Adicione scripts, estilos, ferramentas de análise e widgets à área do aluno com o Código personalizado.

Com o **Código personalizado** você insere na área do aluno qualquer código `<script>` ou `<style>`: ferramentas de análise, pixels de anúncios, chats de atendimento (Tawk.to, Zendesk, Octadesk, Jivochat e outros), mapas de calor como o Hotjar ou ajustes visuais próprios.

:::aviso
Customizações avançadas pedem alguém da sua equipe que conheça HTML, CSS e Javascript. Um código com erro pode quebrar partes da área do aluno: teste antes de publicar.
:::

## Criar um bloco de código

1. Acesse **Configurações › Código personalizado** (`/dashboard/settings/custom-code`).
2. Clique em **Novo bloco**.
3. Preencha os campos:
   - **Nome**: para você identificar o bloco na lista.
   - **Tipo**: um modelo pronto ou **Custom** (veja abaixo).
   - **Exibição**: em quais páginas o código entra.
   - **Status**: **Publicado** ou **Rascunho**.
4. Clique em **Salvar**.

:::perigo Publique o bloco
Só blocos com status **Publicado** entram na plataforma. Um bloco em **Rascunho** fica guardado, mas não é carregado. Na lista, clique no status para alternar entre os dois.
:::

### Exibição

| Opção | Onde o código entra |
|---|---|
| **Sempre** | Em todas as páginas da área do aluno, inclusive nas telas de login e cadastro |
| **Antes do login** | Só para quem ainda não entrou (telas de login, cadastro e recuperação de senha) |
| **Após o login** | Só para alunos que já entraram |
| **Somente administradores** | Só quando um administrador navega pela área do aluno, útil para testar um código antes de liberar para todos |

O código personalizado vale para a área do aluno. Ele não é carregado no painel administrativo.

## Modelos prontos

Escolha o tipo e preencha só o identificador; a plataforma monta o código.

| Tipo | O que informar |
|---|---|
| **Google Analytics** | O ID da propriedade, como `G-XXXXXXX` |
| **Tag Manager** | O ID do contêiner, como `GTM-XXXXXX` |
| **Facebook Pixel** | O ID do pixel, só números |
| **WhatsApp** | O **Número do WhatsApp** com DDI e DDD (ex.: `5521999999999`) e, se quiser, uma **Mensagem inicial**. Aparece um botão flutuante de WhatsApp na área do aluno |

:::embreve Active Campaign
O modelo **Active Campaign** ainda não gera o código. Enquanto isso, instale o rastreamento colando o código manualmente num bloco **Custom**, como explicado em [Pixel do Active Campaign](/configuracoes/pixel-do-active-campaign).
:::

## Bloco Custom

No tipo **Custom** aparecem dois campos:

- **Header**: entra dentro do `<head>` da página. É o lugar de `<style>` e da maioria dos scripts de rastreamento.
- **Body**: entra no fim do `<body>`. Use para widgets e scripts que precisam da página já carregada.

Exemplo de ajuste visual no **Header**:

```html
<style>
  body.area a:hover { text-decoration: underline; }
</style>
```

### Variáveis do aluno

Nos campos **Header** e **Body** você pode usar variáveis que são trocadas pelos dados do aluno que está navegando:

| Variável | O que vira |
|---|---|
| `{uid}` | Código (ID) do aluno |
| `{is_gratis}` | `1` se o aluno entrou só por cadastro gratuito, `0` se não |
| `{nome}` | Primeiro nome |
| `{nome_completo}` | Nome completo |
| `{email}` | E-mail |
| `{celular}` | Celular |
| `{avatar}` | Endereço da foto do perfil |

As variáveis só são preenchidas para quem já entrou na plataforma. Por isso, use-as em blocos com **Exibição** igual a **Após o login**. Veja exemplos em [Customizações avançadas em Javascript](/configuracoes/customizacoes-avancadas-em-javascript).

## CSS só da área do aluno

Para ajustes simples de estilo, você também pode usar o campo **CSS personalizado** em **Configurações › Área do aluno**. Ele recebe apenas CSS, sem a tag `<style>`.

## Editar, excluir e restaurar

- Clique no lápis para editar um bloco.
- A lixeira move o bloco para a **Lixeira**, e ele deixa de ser carregado na hora.
- Para recuperar um bloco, clique em **Lixeira** no topo da tela e depois em **Restaurar**.
