Mostrando e escondendo elementos na página

Opa! Mais um artigo técnico para vocês! Desta vez para páginas de vendas.

O recurso de mostrar/ocultar é muito importante para a galera de marketing digital na construção de landing pages, ou seja, construção das páginas de vendas de seus produtos.

Uma das estratégias de vendas muito utilizadas é a da landing page limpa com apenas uma chamada forte no topo e um vídeo de vendas logo abaixo.

Ao longo do vídeo, geralmente no momento em que o produtor acredita que o lead esteja preparado para comprar o produto, vários elementos surgem na página anteriormente “vazia”.

Temos muito produtores, assim como você, que usam a Panda hospedando vídeos para suas landing pages e por isso esse artigo tem o intuito de ajudar você, com um script que esconde elementos da sua página e mostra no momento mais coerente para sua estratégia de vendas 😉

Este artigo propõe a configuração do script no Elementor. De todo modo, facilmente você pode adaptar para páginas construídas através de outra programação.
Vamos ao passo a passo:

Você deve construir a sua página com todos os elementos que deseja, até aqueles que quer esconder.
Em seguida, todos os elementos que quer esconder e mostrar na mesma minutagem precisam ter a Classe CSS nomeadas com o nome panda. Observe a ilustração abaixo:

Nomeando as classes dos elementos
Abaixo de todos os elementos adicione um elemento elemento HTML ao final seção.
Copie o script abaixo, cole dentro de um elemento HTML e clique no botão verde Atualizar.

<style> 
    .panda {
        display: none
    }
</style>
<script>
    const SECONDS_TO_DISPLAY = 3;
    const CLASS_TO_DISPLAY = 'panda';
    const IFRAME_ID = 'INSERIR_ID'
    const API_ENDPOINT = 'https://player.pandavideo.com.br/api.v2.js'

    if(!document.querySelector(`script[src='${API_ENDPOINT}']`)) { 
        let s = document.createElement('script'); 
        s.src = API_ENDPOINT; 
        s.async = true; 
        document.head.appendChild(s);
    }

    window.pandascripttag = window.pandascripttag || [];
    window.pandascripttag.push(function () {
        const p = new PandaPlayer(IFRAME_ID , {
            onReady() {
                const el = document.querySelectorAll(`.${CLASS_TO_DISPLAY}`);
                p.onEvent(e => {
                const type = e.message
                if(type === 'panda_timeupdate'){
                    const { currentTime, isMutedIndicator } = e;
                    if (isMutedIndicator) return;
                    if (currentTime < SECONDS_TO_DISPLAY) {
                        el.forEach(e => {
                            e.style.display = 'none'
                        })
                    } else if (currentTime > SECONDS_TO_DISPLAY) {
                        el.forEach(e => {
                            e.style.display = 'block'
                        })
                    }
                }
                })
            }
        });
    })
</script>

A unidade do tempo do script está em segundo. Para escolher o tempo certo de acordo com a sua estratégia é só mudar o número 3 em const SECONDS_TO_DISPLAY = 3 que está no script para o tempo em segundo em que deseja que os elementos apareçam.

Para especificar em qual vídeo deseja que o script execute, basta alterar a const IFRAME_ID = 'INSERIR_ID' para o id do código iframe do vídeo. Ex: const IFRAME_ID = 'panda-3b101f05-84aa-4de0-9b64-71f1855388af'

A ilustração abaixo representa os passos acima, observe:

Colando o script em um elemento HTML do Elementor
Para conferir a configuração que fez é só visualizar a sua página em um aba anônima e verificar se os elementos estão aparecendo no tempo certo.

Elementos aparecendo após 3 segundos
Conclusão

Neste artigo vimos como esconder/mostrar elementos na sua página de vendas.

Se você tiver algum problema ou dúvidas sobre essa configuração, por favor, envie uma solicitação de suporte para que um membro da nossa equipe possa ajudá-lo ou nos chame no chat.
Este artigo foi útil?
Cancelar
Obrigado!