Delay to display certain sections on Landing page

[RChae]

I have 'countdown clock' set to 6 min on my landing page.
When the clock hits 'zero', I want to remove the clock from the landing page and display 3 sections below the clock after the delay.
I have JS code which is already working well on my VS code however I don't know how to use it on HubSpot.
I guess I don't know how to name the section with 'id' so that it can be selected and used in my custom code.

Code example:

<script>
        (function() {
            var divElem = document.getElementById('show1');
            divElem.style.display = 'none';
            setTimeout(function() {
                divElem.style.display = 'block';
            }, 360000);
        })();
    </script>
    <script>
        (function() {
            var divElem = document.getElementById('show2');
            divElem.style.display = 'none';
            setTimeout(function() {
                divElem.style.display = 'block';
            }, 360000);
        })();
    </script>
    <script>
        (function() {
            var divElem = document.getElementById('clockdiv');
            divElem.style.display = 'block';
            setTimeout(function() {
                divElem.style.display = 'none';
            }, 360000);
        })();
    </script>

[MBERARD]

Hi RChae,

the quickest way to add your javascript on your landing page is to go to the settings tab and then in advanced options and then paste it in the footer textarea. After that, you can navigate thrue the DOM of the page via the browser inspector to select the div you want to show/hide.

If you can provide a preview page I can help you to retriver the correct ID for each section 🙂

Matthieu

matthieu.berard@markentive.com

[RChae]

Hi Matthieu,
I already added the JS code in the footer textarea but not sure what's next things to do.

Here is my preview link - https://app.hubspot.com/pages/22491794/editor/88934772493/preview

Also can I ask few more questions?
1. Need 'button' to go to certain section on the same page as my page will be very long. Is it doable?
2. Need to remove 'clock' once it hits zero

Thank you so much!

[MBERARD]

Unfortunately I can't access to your page because I'm not a user of your instance 🙂
Can you share the preview link in new window. Like so I'ill be able to navigate thrue the page with the browser inspector to identify the sections for the JS to interract with.

1. Yes you can. You need to combine an anchor and a link. In a Rich Text select the place where you want to add an anchor and then go to insert and select anchor in the Rich text tabs. Type the ID of the anchor (🚨 important, the id of the anchor must be unique and without spaces 🚨). For the link, type the text where you want to add the link and then select it. Click on the add link icon and select anchor on this page in the link to dorpdown. Then select the anchor you want to link and insert it. 

2. With the preview of the page I'll be able to do so 😊

Matthieu

matthieu.berard@markentive.com

[RChae]

Hi,
http://lionsds-22491794.hs-sites.com/fba-video?hs_preview=ZuEGAbwS-88934772493
Hope this works!

Soved #1 question after following your instruction. Will wait for your solutions for other issues - delaying to show certain sections, removing the clock once it hits zero. Thank you so much!!

[MBERARD]

Hi,

Sadly I'm still unable to reach the page 😭 Can you publish the page? 

Perfect the first question! 

Matthieu

matthieu.berard@markentive.com

[RChae]

Oh no.

Here it is - 

http://lionsds-22491794.hs-sites.com/fba-video

Thanks a lot!

[MBERARD]

Perfect, I now have access to the page so let's dive in to it!

Unfortunatly you won't be able to select the section you want to reveal with an ID because they doesn't have one... So let's go with their class attribute (🚨 this is not the safest way to select the sections because their classnames are generated by hubspot regarding their position in the page editor. If you move or add any section in the page every classname of sections might change and the script will return an error) 

Can you try this code and tell me if it's doing what you want? Also, if it's the right sections 😅

<script>
    const timingOut = 360000;
    function revealOnTime(el) {
        setTimeout(() => {
            el.style.display = "block";
        }, timingOut)
    }

    document.addEventListener('DOMContentLoaded', () => {
        const firstElem = document.querySelector('.row-fluid-wrapper.row-depth-1.row-number-10 dnd-section'),
            secondElem = document.querySelector('.row-fluid-wrapper.row-depth-1.row-number-13.dnd-section'),
            thirdElem = document.querySelector('.row-fluid-wrapper.row-depth-1.row-number-15.dnd-section');

        if (firstElem) {
            revealOnTime(firstElem)
        }
        if (secondElem) {
            revealOnTime(secondElem)
        }
        if (thirdElem) {
            revealOnTime(thirdElem)
        }
    }
</script>

 Also, you can hide the section with a CSS approch instead of the JS.  Add the code below in the Head section

{% if !is_in_editor %}
<style>
    .row-fluid-wrapper.row-depth-1.row-number-10 dnd-section,
    .row-fluid-wrapper.row-depth-1.row-number-13.dnd-section,
    .row-fluid-wrapper.row-depth-1.row-number-15.dnd-section {
        display: none;
    }
    
</style>
{% endif %}

Matthieu

matthieu.berard@markentive.com