Skip to main content

Hello there,

i want to add an delay for a button. For example: The button should be shown first in 3 minutes. I was also searching for some topics. But they are very old and the script is not working. I hope you can help me.

Thanks a lot!

Hello there @TeamAL, thanks for your question!

 

I’m happy to do some digging to find a previous script or see if we can manipulate it to achieve what you’re looking for. My question, however, is why do we want our CTA to disappear after a certain amount of time? Best practice on landing pages is to make our CTA button visible and accessible as much as possible and hiding this could be poor for the user experience.

Please let me know the use case and I’m happy to assist thereafter.

Hello @phildilello i want to know how to apply delay to an specific button, the things is i want to appear 5 minutes after the page loads.

Hi there @felipe! What type of content are you looking to load in particular?

An easy option would be our Popup and Sticky Bar feature, where you can target when the element fires based on time spent on the page. Would this work for your use case?


https://documentation.unbounce.com/hc/en-us/articles/115005919683-Targeting-Your-Popup-Sticky-Bar

Hi @felipe, 

I have a code snippet for you. Please modify this code in Unbounce HTML blocks, and it will work for you.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Button After 5 Minutes</title>
    <style>
        #delayedButton {
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <h1>Welcome to the Page</h1>
        <p>This is a section where the button will appear after 5 minutes.</p>
        <button id="delayedButton">Click Me</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            setTimeout(function() {
                $('#delayedButton').fadeIn();
            }, 300000); // 300000 milliseconds = 5 minutes
        });
    </script>
</body>
</html>


There is another way. You can put the CSS code in our Unbounce CSS and put the jQuery in the JS head area, then put another script in the body tag in JS. Now, just put the button code on the Unbounce page and add the ID in the Unbounce button. It should work perfectly! If you face any issues, comment here.

thank you!!!

 

Reply


Terms & ConditionsCookie settings