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 |
| 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 |
| 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
- Abra Configurações → Código personalizado.
- Clique em Novo bloco.
- Preencha o Nome.
- Escolha a Exibição.
- Escolha o Tipo.
- 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.
- Deixe o Status em Publicado.
- Clique em Criar bloco.
Código próprio
- Clique em Novo bloco.
- Preencha o Nome.
- Escolha o Tipo Custom.
- Deixe o Status em Rascunho enquanto testa.
- Cole o código na aba Header ou na aba Body (veja abaixo).
- Clique em Criar bloco.
- Abra a área como administrador e confira o efeito.
- 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:
- O Status: em Rascunho, só você vê o bloco.
- A Exibição: um bloco Apenas no login não aparece dentro da área.
- Recarregue a página sem cache.
- 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.
Webhooks
Avisos automáticos ao seu sistema quando algo acontece na plataforma: eventos, filtros, dados pessoais, histórico de entregas e falhas do destino.
Zoom
Reuniões do Zoom dentro da aula, sem o aluno sair da plataforma: o app na sua conta Zoom, o Client ID, o Client Secret e o que o Zoom recebe do aluno.