Showing and hiding elements on the page

In this article, we will demonstrate how to display content after a specific time interval during a video using Elementor. The show/hide feature is an essential tool for digital marketers when creating landing pages, particularly sales pages for their products.



One of the most effective sales strategies is a minimalist landing page with a powerful headline at the top and a sales video directly below it. During the video, the producer will often introduce additional elements to the previously "empty" page at the point when they believe the lead is ready to purchase the product.

Many producers, like yourself, use Panda to host videos for their landing pages. This article aims to assist you by providing a script that will hide elements of your page and display them at the most appropriate moment for your sales marketing strategy.

This article proposes configuring script in Elementor. Anyway, you can easily adapt to pages built through other programming.

Let's go step by step:

You must build your page with all the elements you want, even the ones you want to hide.
Next, all elements that you want to hide and show in the same timeframe need to have the CSS Class named panda. See the illustration below:


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

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

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

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

The illustration below represents the steps above, please note:


To check the configuration you made, just view your page in an incognito tab and check if the elements are appearing at the right time.

Conclusion

In this article we saw how to hide/show elements on your sales page.

Got any questions or want to know more?

Just call us in our support chat and our team will do their best to solve your doubts or difficulties? Already use Panda Video? If not, know that both our player and our prices are unbeatable, if you are interested, take a look at our plans, in this way, it may be that some of them make sense with your product and as a gift you will still become another little panda. 🐼

Updated on: 04/11/2023