Question

Delay Button

  • 29 June 2022
  • 5 replies
  • 77 views
T
Badge

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!

5 replies

phildilello
Rank
Userlevel 2
Badge

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.

F

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.

phildilello
Rank
Userlevel 2
Badge

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

Md_Mahinur_Khan
Userlevel 4
Badge +1

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.

Mahin K. 🚀 boost conversions by 👉 https://www.grooic.com
F

thank you!!!

 

Reply


Terms & ConditionsCookie settings