CSS e Javascript
Adicione scripts, estilos, ferramentas de análise e widgets à área do aluno com o Código personalizado.
Nesta página
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.
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
- Acesse Configurações › Código personalizado (
/dashboard/settings/custom-code). - Clique em Novo bloco.
- 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.
- Clique em Salvar.
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 |
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 |
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.
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:
<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} | |
{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.
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.