Pular para conteúdo

Códigos Personalizados (Snippets)

A extensão Snippets permite injetar trechos de código (HTML, CSS ou JavaScript) no cabeçalho ou rodapé do site de forma gerenciada e segura.

No Moodle padrão, para instalar um Pixel do Facebook ou um Chat de Suporte, você precisaria editar os arquivos do tema (o que é arriscado e se perde na atualização) ou usar a configuração global de "HTML Adicional" (que carrega em todas as páginas, sem controle). O Snippets oferece controle granular sobre onde e quando esses códigos aparecem.

Para que serve?

  1. Marketing Digital: Instalar Pixels de rastreamento (Meta Ads, Google Ads, LinkedIn Insight Tag) para medir conversões de campanhas.
  2. Atendimento: Adicionar widgets de chat flutuante (JivoChat, Tawk.to, WhatsApp Button).
  3. Analytics: Configurar Google Analytics 4 (GA4) ou Hotjar.
  4. Ajustes Visuais: Inserir pequenos blocos de CSS para corrigir cores ou esconder elementos específicos sem criar um tema filho.

Funcionalidades Principais

1. Locais de Injeção

Escolha onde o código deve ser inserido no HTML: * Head (<head>): Para CSS e metadados críticos. * Body Start: Logo após a abertura do <body> (usado por alguns Tag Managers). * Footer: Antes de fechar o </body>. Ideal para JavaScript pesado (como chats) para não travar o carregamento da página.

2. Regras de Exibição (Condicionais)

Não carregue scripts desnecessários. Configure regras: * Apenas Visitantes: Mostrar o pixel de "Lead" apenas para quem não está logado. * Apenas Alunos: Mostrar o Chat de Suporte apenas para quem já comprou. * Páginas Específicas: Carregar o script de conversão apenas na página de "Obrigado pela Compra".

3. Editor de Código

A interface possui um editor com realce de sintaxe (Syntax Highlighting) para facilitar a leitura e evitar erros básicos de digitação.

4. Toggle Rápido

Precisa desligar o chat no fim de semana? Basta clicar no botão "Desativar" na lista de snippets, sem precisar apagar o código.

Casos de Uso

Google Tag Manager (GTM)

Em vez de colar o código gigante do GTM no tema, crie um Snippet chamado "GTM Base". Se houver algum problema de performance, você pode desativá-lo com um clique para testar.

Aviso de Férias

Crie um Snippet HTML com uma barra fixa no topo: "Estaremos em recesso de 20/12 a 05/01". Configure para aparecer em todas as páginas. Quando o recesso acabar, apenas desative o snippet.

Widget de Libras

Instale ferramentas de acessibilidade (como Hand Talk ou VLibras) injetando o script via Snippets.

Como Configurar

  1. Acesse Administração do Site > Extensões > Integrações > Snippets.
  2. Clique em Novo Snippet.
  3. Nome: Identificação interna (ex: "Pixel Facebook").
  4. Código: Cole o script fornecido pela ferramenta externa.
  5. Local: Escolha Head ou Footer.
  6. Filtros: (Opcional) Restrinja a exibição por Papel (Role) ou status de login.

Perguntas Frequentes

Isso é seguro? O uso desta ferramenta requer permissão administrativa de alto nível (admin), pois permite inserir JavaScript arbitrário. Nunca dê permissão de gerenciar snippets para usuários em quem você não confia plenamente.

Afeta a velocidade do site? Scripts externos (como chats e mapas de calor) pesam no navegador do usuário. A vantagem do Snippets é poder colocar esses scripts no Rodapé (Footer), garantindo que o conteúdo do curso carregue primeiro.

Posso usar PHP no snippet? Não. Por segurança, apenas HTML, CSS (<style>) e JS (<script>) são permitidos. Para lógica complexa de backend, é necessário desenvolver uma extensão ou usar Hooks.