Mostrando e escondendo elementos na página

Nesse artigo vamos te explicar como funciona o nosso script de mostrar conteúdo em um momento específico do vídeo.

O recurso de mostrar/ocultar é muito importante o pessoal do 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 para páginas. Leia o artigo sobre como configurar no Elementor

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.
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'

Como manter os elementos visíveis após a primeira apresentação?

Com esse outro código já entregamos a possibilidade de salvar quando o usuário já assistiu até o pitch de venda para que quando ele abrir a página novamente o conteúdo oculto já apareça automaticamente. Apenas avisando que a diferença desse código para o de cima é apenas a adição de uma condição ALREADY_WATCHED, que salva esse evento no localStorage do navegador do usuário, assim, quando ele acessar a página novamente esse evento vai ser ativado confirmando que ele já assistiu até o pitch:

<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';
    let watched = localStorage.getItem(`pandavideo_script_delay_watched_${IFRAME_ID}_${CLASS_TO_DISPLAY}`) || false;

    if (!document.querySelector(`script[src='${API_ENDPOINT}']`)) { 
        let s = document.createElement('script'); 
        s.src = API_ENDPOINT; 
        s.async = true; 
        document.head.appendChild(s);
    }
    
    if (watched) {
        const el = document.querySelectorAll(`.${CLASS_TO_DISPLAY}`);
        el.forEach(e => {
            e.style.display = 'block';
        });
    } else {
        const el = document.querySelectorAll(`.${CLASS_TO_DISPLAY}`);
        el.forEach(e => {
            e.style.display = 'none';
        });
    }
    
    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 || watched) 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';
                            });
                            watched = true;
                            localStorage.setItem(`pandavideo_script_delay_watched_${IFRAME_ID}_${CLASS_TO_DISPLAY}`, watched);
                        }
                    }
                });
            }
        });
    });
</script>

Ficou com alguma dúvida? Entre em contato com o nosso suporte

Caso esteja com alguma dúvida ou até mesmo não muito confiante sobre a configuração, chame o nosso suporte no chat e iremos te ajudar nos passos que sentir dificuldade.

Atualizado em: 10/10/2023