Pular para o conteúdo
Português - Brasil
Abertura de Tickets
Acesse nosso site
  • Não há sugestões porque o campo de pesquisa está em branco.

Scripts de página mais usados!

Conheça os scripts mais usados 

 Scripts de Página: Personalizações da Plataforma
Índice
# Script O que faz Precisa de jQuery
1 Renomear itens do menu Troca o nome de um item do menu (ex.: "Cursos" por outro nome) Não
2 Ocultar itens do menu Esconde um ou mais itens do menu superior e do menu lateral Sim
3 Redirecionar clique de item do menu Faz um item do menu levar para um link definido Sim
4 Botão flutuante de WhatsApp Adiciona um botão fixo que abre conversa no WhatsApp Não
5 Carrossel de imagens com links Cria um carrossel de imagens clicáveis abaixo do banner da home Não
6 Tela de login personalizada Divide a tela de login em imagem + formulário e troca textos e logo Sim
7 Ano automático no rodapé Preenche o ano atual no rodapé Não
Antes de usar
  • Teste sempre em uma plataforma de homologação ou em horário de pouco acesso antes de aplicar em produção.
  • Vários scripts juntos: podem ser colados no mesmo campo, um abaixo do outro. Os códigos deste documento já estão isolados entre si e não entram em conflito.
  • Comparação exata: os scripts que procuram textos do menu só agem quando o texto é exatamente igual ao configurado, respeitando maiúsculas, minúsculas e acentos.
  • Scripts que dependem de outros: se um item foi renomeado (Script 1), os scripts 2 e 3 precisam usar o nome novo do item.
  • Esconder não é bloquear: itens ocultos ou com clique alterado continuam acessíveis pelo link direto da página.
  • Mudanças na plataforma: os scripts dependem da estrutura atual das páginas. Se a plataforma for atualizada, vale testar novamente.
1. Renomear itens do menu

O que faz: troca o nome de itens do menu superior e do menu lateral. Exemplo: "Cursos" passa a aparecer como "Trilhas". Continua funcionando quando o menu lateral é aberto ou quando a página muda sem recarregar.

Quando usar: quando o cliente quer usar outro nome para uma área da plataforma (Cursos, Curso, Assuntos, Categorias etc.).

Onde alterar:

O que alterar Onde fica no código Exemplo
Texto atual Lado esquerdo de cada linha em TEXTOS_PARA_RENOMEAR "Cursos"
Texto novo Lado direito de cada linha em TEXTOS_PARA_RENOMEAR "Trilhas"
Mais itens Adicionar novas linhas no mesmo formato, separadas por vírgula "Assuntos": "Temas"

Código:

html

<script>(function () {// ===== CONFIGURAÇÃO =====// Formato: "Texto atual": "Texto novo"  var TEXTOS_PARA_RENOMEAR = {    "Cursos": "NOVO_NOME_PLURAL",    "Curso": "NOVO_NOME_SINGULAR"  };// ========================  function renomearTextos() {    document.querySelectorAll("span.MuiTypography-root, p").forEach(function (el) {      var texto = el.textContent.trim();      if (TEXTOS_PARA_RENOMEAR.hasOwnProperty(texto)) {        el.textContent = TEXTOS_PARA_RENOMEAR[texto];      }    });  }  renomearTextos();  var observer = new MutationObserver(renomearTextos);  observer.observe(document.body, { childList: true, subtree: true });})();</script>

Observações:

  • Plural e singular são itens diferentes. Se a plataforma mostra os dois ("Cursos" e "Curso"), configure as duas linhas.
  • O texto novo não pode ser igual a um texto atual da lista. Exemplo: não configurar "Cursos": "Curso" junto com "Curso": "Cursos".
  • Só troca textos exatamente iguais. "Meus Cursos" não é alterado se a lista tiver apenas "Cursos".
2. Ocultar itens do menu

O que faz: esconde um ou mais itens do menu superior e do menu lateral. Continua funcionando quando o menu é carregado depois ou quando o menu lateral é aberto.

Quando usar: quando o cliente não usa uma área da plataforma (ex.: Cursos, Categorias, Eventos) e quer tirar o item da navegação.

Onde alterar:

O que alterar Onde fica no código Exemplo
Item a ocultar Texto entre aspas em ITENS_PARA_OCULTAR "Categorias"
Mais de um item Adicionar itens separados por vírgula ["Cursos", "Categorias"]

Código:

html

<script>(function () {// ===== CONFIGURAÇÃO =====  var ITENS_PARA_OCULTAR = ["NOME_DO_ITEM"];// ========================  function ocultarItens() {// Menu superior    $("button").each(function (idx, el) {      var texto = $(el).find("p").text().trim();      if (ITENS_PARA_OCULTAR.indexOf(texto) !== -1) {        $(el).hide();      }    });// Menu lateral    $("[role='button']").each(function (idx, el) {      var texto = $(el).find("span").text().trim();      if (ITENS_PARA_OCULTAR.indexOf(texto) !== -1) {        $(el).hide();      }    });  }  ocultarItens();  var observer = new MutationObserver(ocultarItens);  observer.observe(document.body, { childList: true, subtree: true });})();</script>

Observações:

  • Se o item foi renomeado pelo Script 1, use o nome novo.
  • O item só some da tela. A página continua acessível pelo link direto.
  • Precisa do jQuery carregado na página.
3. Redirecionar clique de item do menu

O que faz: muda o que acontece ao clicar em um item do menu superior. Em vez do comportamento padrão (abrir o submenu ou a página da plataforma), o usuário é levado para um link definido.

Quando usar: quando o cliente quer que um item do menu leve para uma página específica, como uma vitrine, uma landing page, uma página externa ou uma URL interna com filtro.

Onde alterar:

O que alterar Onde fica no código Exemplo
Item do menu NOME_DO_ITEM "Cursos"
Link de destino URL_DESTINO "<https://seudominio.com.br/pagina>"
Abrir em nova aba ABRIR_EM_NOVA_ABA (true ou false) false

Código:

html

<script>(function () {// ===== CONFIGURAÇÃO =====  var NOME_DO_ITEM = "NOME_DO_ITEM";  var URL_DESTINO = "URL_DESTINO";  var ABRIR_EM_NOVA_ABA = false;// ========================  function aplicarRedirecionamento() {    var tentativas = 0;    var maxTentativas = 10;    var intervalo = setInterval(function () {      var botao = $("header button p.MuiTypography-root").filter(function () {        return $(this).text().trim() === NOME_DO_ITEM;      }).closest("button");      if (botao.length === 0) {        tentativas++;        if (tentativas >= maxTentativas) {          clearInterval(intervalo);        }        return;      }      clearInterval(intervalo);      botao.off("click");      botao.on("click", function (e) {        e.preventDefault();        e.stopPropagation();        if (ABRIR_EM_NOVA_ABA) {          window.open(URL_DESTINO, "_blank");        } else {          window.location.href = URL_DESTINO;        }      });    }, 200);  }// Executa ao carregar  aplicarRedirecionamento();// Reaplica ao navegar pela plataforma sem recarregar a página  var pushStateOriginal = history.pushState;  history.pushState = function () {    pushStateOriginal.apply(history, arguments);    setTimeout(aplicarRedirecionamento, 500);  };// Reaplica ao usar voltar/avançar do navegador  window.addEventListener("popstate", function () {    setTimeout(aplicarRedirecionamento, 500);  });})();</script>

Observações:

  • Atua só no menu superior. O mesmo item no menu lateral mantém o comportamento padrão.
  • Se o item foi renomeado pelo Script 1, use o nome novo.
  • Procura o item por até 2 segundos após carregar cada página.
  • Precisa do jQuery carregado na página.
4. Botão flutuante de WhatsApp

O que faz: adiciona um botão redondo verde fixo no canto inferior direito da tela. Ao clicar, abre o WhatsApp em uma nova aba, já na conversa com o número configurado e com uma mensagem pronta.

Quando usar: quando o cliente quer oferecer um canal rápido de suporte ou contato pelo WhatsApp.

Onde alterar:

O que alterar Onde fica no código Exemplo
Número NUMERO_WHATSAPP no link 5561999998888 (país + DDD + número, só dígitos)
Mensagem pronta MENSAGEM no link, com espaços escritos como %20 Olá!%20Preciso%20de%20ajuda.
Sem mensagem pronta Apagar o trecho ?text=MENSAGEM  
Posição bottom e right Trocar right por left para o canto esquerdo
Tamanho e cor width, height, background-color #25d366 (verde WhatsApp)

Código:

html

<!-- Botão Flutuante WhatsApp --><a href="<https://wa.me/NUMERO_WHATSAPP?text=MENSAGEM>"   target="_blank"   style="      position: fixed;      width: 60px;      height: 60px;      bottom: 20px;      right: 20px;      background-color: #25d366;      color: #FFF;      border-radius: 50%;      box-shadow: 0px 4px 10px rgba(0,0,0,0.3);      z-index: 9999;      display: flex;      align-items: center;      justify-content: center;      text-decoration: none;   ">  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">    <path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1v3.5a1 1 0 01-1 1C10.88 21 3 13.12 3 3.5a1 1 0 011-1H7.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.2 2.2z"></path>  </svg></a>

Observações:

  • O ícone é de telefone. Para usar o logo do WhatsApp ou outra imagem, troque o <svg>...</svg> por <img src="URL_DO_ICONE" width="32" height="32">.
  • Para aumentar o ícone, altere width e height do <svg>.
  • Se a plataforma já tiver um chat de suporte no mesmo canto, ajuste bottom ou right para os botões não ficarem sobrepostos.
5. Carrossel de imagens com links

O que faz: cria um carrossel horizontal de imagens clicáveis logo abaixo do banner principal da home. Cada imagem leva para um link. O usuário pode arrastar o carrossel para os lados.

Quando usar: para destacar categorias, trilhas, eventos ou páginas específicas logo na entrada da plataforma.

Onde alterar:

O que alterar Onde fica no código Exemplo
Imagens e links Lista ITENS_CARROSSEL. Cada item tem imagem e link Ver formato abaixo
Mais ou menos itens Adicionar ou remover blocos { imagem: ..., link: ... }  
Abrir em nova aba ABRIR_EM_NOVA_ABA (true ou false) false
Posição MARGEM_SUPERIOR (valor negativo sobe o carrossel por cima do banner) "-100px" ou "0"
Altura ALTURA e a altura da imagem no <style> "167px"

Formato de cada item:

{   imagem: 'URL_DA_IMAGEM',   link: 'URL_DE_DESTINO' },

Código:

html

<link rel="stylesheet" href="<https://unpkg.com/flickity@2/dist/flickity.min.css>"><script src="<https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js>"></script><style>  .carousel-cell { margin-right: 16px; }  .carousel-cell img { height: 167px; display: block; border-radius: 8px; }</style><script>(function () {// ===== CONFIGURAÇÃO =====  var ITENS_CARROSSEL = [    { imagem: 'URL_DA_IMAGEM_1', link: 'URL_DE_DESTINO_1' },    { imagem: 'URL_DA_IMAGEM_2', link: 'URL_DE_DESTINO_2' },    { imagem: 'URL_DA_IMAGEM_3', link: 'URL_DE_DESTINO_3' }  ];  var ABRIR_EM_NOVA_ABA = false;  var MARGEM_SUPERIOR = "-100px";  var MARGEM_INFERIOR = "30px";  var ALTURA = "167px";// ========================  function criarCarrossel() {    var banner = document.querySelector('.slick-slider');    var jaExiste = document.querySelector('.carousel');    if (!banner || jaExiste) {      return;    }    var carousel = document.createElement('div');    carousel.classList.add('carousel');    carousel.style.marginTop = MARGEM_SUPERIOR;    carousel.style.marginBottom = MARGEM_INFERIOR;    carousel.style.height = ALTURA;    ITENS_CARROSSEL.forEach(function (item) {      var a = document.createElement('a');      var cell = document.createElement('div');      var img = document.createElement('img');      cell.classList.add('carousel-cell');      img.src = item.imagem;      cell.appendChild(img);      a.href = item.link;      if (ABRIR_EM_NOVA_ABA) {        a.target = '_blank';      }      a.appendChild(cell);      carousel.appendChild(a);    });    banner.insertAdjacentElement('afterend', carousel);    new Flickity(carousel, {      imagesLoaded: true,      percentPosition: false,      fullscreen: false,      adaptiveHeight: false,      cellAlign: 'left',      freeScroll: true,      contain: true,      pageDots: false    });    if (carousel.nextElementSibling) {      carousel.nextElementSibling.style.marginTop = '0';    }  }  function iniciar() {    if (document.querySelector('.slick-slider')) {      criarCarrossel();      return;    }    var observer = new MutationObserver(function (mutations, obs) {      if (document.querySelector('.slick-slider')) {        obs.disconnect();        criarCarrossel();      }    });    observer.observe(document.body, { childList: true, subtree: true });  }  iniciar();  window.addEventListener('popstate', iniciar);})();</script>

Observações:

  • As imagens podem ser enviadas na própria plataforma. Use a URL gerada após o upload.
  • O carrossel só aparece se a home tiver banner principal.
  • Opções extras do carrossel (dentro de new Flickity): pageDots: true mostra as bolinhas de paginação, wrapAround: true faz girar em loop, autoPlay: 3000 passa sozinho a cada 3 segundos.
  • Com MARGEM_SUPERIOR negativa, o carrossel fica por cima da parte de baixo do banner. Teste no celular para garantir que não cobre botões do banner.
  • Usa a biblioteca Flickity, carregada de um CDN externo (unpkg).
6. Tela de login personalizada (tela dividida)

O que faz: redesenha a tela de login externo. No computador, a tela fica dividida ao meio: imagem à esquerda e formulário em fundo escuro à direita. No celular, a imagem vira o fundo da tela inteira e o formulário fica por cima, levemente transparente. Também esconde o cabeçalho, troca os textos do formulário, adiciona a logo e complementa o texto do link da política.

Quando usar: quando o cliente quer uma tela de login com a identidade visual dele.

Onde alterar:

O que alterar Onde fica no código Exemplo
Imagem de fundo URL_IMAGEM_FUNDO no <style> (aparece 2 vezes: computador e celular) URL da imagem enviada na plataforma
Logo URL_LOGO URL da logo enviada na plataforma
Título do formulário TITULO_FORMULARIO "Preencha com seu CPF para entrar"
Rótulo do campo ROTULO_CAMPO "Digite aqui seu CPF"
Complemento do link da política COMPLEMENTO_POLITICA (deixe "" para não alterar) " (ler)"
Frases sobre a imagem FRASE_LINHA_1 e FRASE_LINHA_2 (deixe "" para não exibir) "Bem-vindo"
Cor do fundo do formulário black e rgb(0, 0, 0, 0.85) no <style> Cor do cliente
Cor dos textos e bordas white no <style> Cor do cliente

Código:

html

<style>#external-auth-page header {  display: none;}#external-auth-page .auth-layout-container {  max-width: unset;  flex-direction: row;  padding: 0;  margin: 0;}#external-auth-page .auth-layout-container .login-left-container {  width: 50%;  height: 100%;  background-image: url(URL_IMAGEM_FUNDO);  background-size: cover;  display: flex;  justify-content: center;  align-items: center;}#external-auth-page .auth-layout-container .login-left-container #left-subcontainer p {  color: white;  text-transform: uppercase;}#external-auth-page .auth-layout-container .login-left-container #left-subcontainer .first-line p {  font-size: 96px;}#external-auth-page .auth-layout-container .login-left-container #left-subcontainer .second-line {  display: flex;  justify-content: flex-end;}#external-auth-page .auth-layout-container .login-left-container #left-subcontainer .second-line p {  font-size: 56px;  width: 58%;}#external-auth-page .auth-layout-container .login-center-container {  width: 50%;  justify-content: center;  background-color: black;}#external-auth-page .auth-layout-container .login-center-container > div {  max-width: 500px;}#external-auth-page .auth-layout-container .login-center-container > p {  margin-top: 32px;  color: white;}#external-auth-page .auth-layout-container .login-center-container #document-label {  color: white;}#external-auth-page .auth-layout-container .login-center-container form .MuiOutlinedInput-root {  color: white;}#external-auth-page .auth-layout-container .login-center-container form fieldset {  border-color: white;}#external-auth-page .auth-layout-container .login-center-container form > p {  color: white;}#external-auth-page .auth-layout-container .login-center-container form > p > a {  text-decoration: underline;  color: white;}#external-auth-page .auth-layout-container .login-center-container form > button {  height: 48px;  border-radius: 8px;}#external-auth-page .footer-theme {  position: absolute;  right: 0;  width: 50%;  background-color: black;}#external-auth-page .footer-theme * {  color: white;}@media screen and (max-width: 1024px) {  #external-auth-page .auth-layout-container .login-left-container #left-subcontainer .second-line p {    width: 75%;  }}@media screen and (max-width: 768px) {  #external-auth-page .auth-layout-container .login-left-container {    display: none;  }  #external-auth-page .auth-layout-container .login-center-container {    width: 100%;    padding: 0 30px;  }  #external-auth-page .footer-theme {    position: relative;    width: 100%;    border-top: 0;    padding-left: 30px;    padding-bottom: 30px;  }  #external-auth-page .auth-layout-container .login-center-container,  #external-auth-page .footer-theme {    background-color: rgb(0, 0, 0, 0.85);  }  #external-auth-page > div:first-child {    background-image: url(URL_IMAGEM_FUNDO);    background-size: cover;    background-position: center;  }}</style><script>$(document).ready(function () {// ===== CONFIGURAÇÃO =====  var URL_LOGO = "URL_LOGO";  var TITULO_FORMULARIO = "TITULO_FORMULARIO";  var ROTULO_CAMPO = "ROTULO_CAMPO";  var COMPLEMENTO_POLITICA = " (ler)";  var FRASE_LINHA_1 = "";  var FRASE_LINHA_2 = "";// ========================// Frases sobre a imagem (opcional)  if (!$('#left-subcontainer').length) {    var html = '<div id="left-subcontainer">';    if (FRASE_LINHA_1) {      html += '<div class="first-line"><p>' + FRASE_LINHA_1 + '</p></div>';    }    if (FRASE_LINHA_2) {      html += '<div class="second-line"><p>' + FRASE_LINHA_2 + '</p></div>';    }    html += '</div>';    $('#external-auth-page .login-left-container').append(html);  }// Textos do formulário  $('#external-auth-page .login-center-container > p:first-child').text(TITULO_FORMULARIO);  $('#external-auth-page .login-center-container #document-label').text(ROTULO_CAMPO);  $('#external-auth-page .login-center-container fieldset > legend > span').text(ROTULO_CAMPO);// Logo  if (!$('#login-logo').length) {    $('#external-auth-page .login-center-container').prepend('<img id="login-logo" src="' + URL_LOGO + '" />');  }// Complemento do link da política  var linkPolitica = $('#external-auth-page .auth-layout-container .login-center-container form > p > a');  if (COMPLEMENTO_POLITICA && !linkPolitica.hasClass('text-changed')) {    linkPolitica.text(linkPolitica.text() + COMPLEMENTO_POLITICA);    linkPolitica.addClass('text-changed');  }});</script>

Observações:

  • Atua apenas na página de login externo. As demais páginas não são alteradas.
  • O exemplo de textos usa CPF, mas serve para qualquer tipo de login (e-mail, matrícula etc.). Basta ajustar TITULO_FORMULARIO e ROTULO_CAMPO.
  • Os textos e a logo são aplicados quando a página carrega. Se o usuário chegar ao login navegando dentro da plataforma, sem recarregar, eles podem não aparecer. O visual (CSS) continua valendo.
  • Precisa do jQuery carregado na página.
7. Ano automático no rodapé

O que faz: preenche automaticamente o ano atual no rodapé, para o texto de direitos autorais (ex.: "© 2026 Nome da Empresa") nunca ficar desatualizado.

Quando usar: quando o rodapé da plataforma tem um texto com o ano.

Onde alterar:

O que alterar Onde fica Exemplo
Local do ano No HTML do rodapé, colocar o elemento com id="current-year" onde o ano deve aparecer © <span id="current-year"></span> Nome da Empresa

Código:

html

<script>(function () {  var ano = document.getElementById("current-year");  if (ano) {    ano.innerHTML = new Date().getFullYear();  }})();</script>

Observações:

  • Se não existir nenhum elemento com id="current-year" na página, o script não faz nada.
  • Pode ser colado junto com qualquer outro script deste documento.