Showing and Hiding Elements on the Page

In this article, we will explain how our script works to display content at a specific moment in the video.

The show/hide feature is highly valuable for digital marketing professionals in creating landing pages, specifically for building sales pages for their products.

One widely used sales strategy is to have a clean landing page with a strong call-to-action at the top and a sales video just below it.

Throughout the video, usually when the producer believes the lead is ready to buy the product, several elements appear on the previously "empty" page.

We have many producers, just like you, who use Panda to host videos for their landing pages. That's why this article aims to help you with a script that hides elements on your page and shows them at the most appropriate moment for your sales strategy.

This article proposes setting up the script for pages. Read the article on how to set up with Elementor

Let's go through the step-by-step process:

You must construct your page with all the elements you desire, including those you want to hide.
Then, all the elements you want to hide and show at the same time should be given the CSS Class named panda. Refer to the illustration below:



Below all the elements, add an HTML element at the end of the section.
Copy the script below, paste it inside an HTML element, and click the green Update button.

html
<style> 
    .panda {
        display: none;
    }
</style>

<script>
    const SECONDS_TO_DISPLAY = 3;
    const CLASS_TO_DISPLAY = 'panda';
    const IFRAME_ID = 'INSERT_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>

The time unit in the script is in seconds. To choose the right time according to your strategy, simply change the number 3 in const SECONDS_TO_DISPLAY = 3 to the desired time in seconds when you want the elements to appear.

To specify which video you want the script to execute on, simply change const IFRAME_ID = 'INSERT_ID' to the iframe code ID of the video. For example: const IFRAME_ID = 'panda-3b101f05-84aa-4de0-9b64-71f1855388af'

How to keep the elements visible after the first presentation?

With this other code, we provide the ability to save when the user has watched until the sales pitch, so that when they reopen the page, the hidden content will automatically appear. Just to clarify, the only difference between this code and the previous one is the addition of the ALREADY_WATCHED condition, which saves this event in the user's browser localStorage. Therefore, when they access the page again, this event will be triggered, confirming that they have already watched until the pitch:

html
<style> 
    .panda {
        display: none;
    }
</style>

<script>
    const SECONDS_TO_DISPLAY = 3;
    const CLASS_TO_DISPLAY = 'panda';
    const IFRAME_ID = 'INSERT_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}`);
                el.forEach(e => {
                    e.style.display = 'block';
                });
                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>

Do you have any questions? Contact our support!

If you have any doubts or even if you are not very confident about the configuration, feel free to contact our support team via chat, and we will help you with the steps you find difficult.

Updated on: 10/03/2023