> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandavideo.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Como mostrar um conteúdo após determinado momento?

# 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**](https://help.pandavideo.com/pt-br/article/como-fazer-o-botao-com-delay-atraves-do-plugin-1n5ll4p/)

###### Vamos ao __passo a passo__:

1. Você deve construir a sua página com todos os elementos que deseja, até aqueles que quer esconder. 
2. Em seguida, todos os elementos que quer esconder e mostrar na mesma minutagem precisam ter a **Classe CSS** nomeadas com o nome **panda**.
3. Abaixo de todos os elementos adicione um elemento **elemento HTML** ao final seção.
4. 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.