How to delay loading of the feedback button?

  • Profile Image
    91devco
    Asked on April 17, 2019 at 04:53 PM

    is it possible for the page to load, and visitors to browse, and then the floater button popup after 15 seconds or so? 

  • Profile Image
    jonathan
    Answered on April 17, 2019 at 06:36 PM

    Please check our user guide: How to Auto-popup a Lightbox Form

    You can test the demo form here (5 secs delay)

    Perhaps something similar is what you were looking for.

    Let us know how we can be of further assistance.

  • Profile Image
    91devco
    Answered on April 17, 2019 at 07:00 PM

    thanks! yes, i've looked at that a number of times, but i wasn't sure what i needed to change to make it apply to the floater button, if it would even work at all...

    do i just copy the code as it is from that guide and embed it along with the button html? or do i need to make changes or do something else with it? thanks again!

  • Profile Image
    Jed_C
    Answered on April 17, 2019 at 10:24 PM

    Are you referring to the "Feedback" button that you can place on the left, bottom, right of the page? I'm testing it out and see if it can add some delay on page load. I'll let you know here once I found a solution.

  • Profile Image
    91devco
    Answered on April 18, 2019 at 12:10 PM

    yes, that's the button i was talking about...I look forward to hearing your solution! thanks!

  • Profile Image
    Jed_C
    Answered on April 18, 2019 at 06:26 PM

    Thanks for confirming.

    Here's what you need to do:

    1). Grab the "Feedback" embed code.

    1555625480feedback_button.png

    2). Embed the code on your site and press F12 button no your keyboard and go to "Elements" tab.

    1555625670elements_tab.png

    3). Press CTRL + SHIFT + C on Chrome and hover your mouse over to the feedback button and copy the "id".

    1555625857copy_id.gif

    4). Once you have the id, add the JQuery script below and replace the part in my screenshot with the id of your feedback button field.

    Add this code inside your "Head" tag:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script language="javascript">

    $(document).ready(function() {

           setTimeout(function() {

            $("#jotform-feedback-91068220228956").show();

           }, 5000);

    });

    </script>

    Replace the id like in my sample screenshot below:

    1555626119replace_id.png

    5). Last part is to change the "5000" value to "15000" so it will only appear after 15 seconds.

    You can test my sample form here http://shots.jotform.com/jed/Custom%20JS%20Script/floater_delay/floater_delay.html.

    I hope that helps. Let us know if you have any questions or if you need further assistance. 

  • Profile Image
    91devco
    Answered on April 20, 2019 at 12:17 PM

    Thanks so much...those are great instructions! unfortunately, it still didn't work...but i noticed something unusual...when i controlshiftc the button, this is what came up, and i copied this id...1555776778Screen Shot 2019-04-20 at 12.0

    then, i followed the rest of your instructions. i refreshed the screen, it didn't work, so i controlshiftc the button again, and the id changed! i'm so confused...

    for reference, i haven't put it on my main site, but have been testing this at testingfor91devco.weebly.com in case you wanted to troubleshoot...thanks!

  • Profile Image
    Richie_P
    Answered on April 20, 2019 at 02:22 PM

    Can you please try clearing your browser's cache and check your Feedback button ID again?

    The Feedback ID should be the same as your Form ID.

    Kindly check it out and let us know how it goes.

  • Profile Image
    91devco
    Answered on April 21, 2019 at 01:52 PM

    i cleared the cache and refreshed...the button popped up almost immediately...i commandshiftc, and the button id name changed again...i refreshed again, and it changed once again...

    during this time, I noticed the script source of the code that i embed is different than the "ajax" source i paste in the header... does that make a difference?

    also, my button looks different than the one in the test by jed_c ... maybe this is part of the problem as well? the code to embed is this...

      <script src="https://form.jotform.com/cardforms/feedbackEmbedButton.min.js"></script> <script> new JF_FeedbackEmbedButton({ buttonText: "Bring GroundSwell to you!", buttonFontColor: "#FFFFFF", buttonBackgroundColor: "#0071BC", buttonSide: "Bottom", buttonAlign: "Right", buttonIcon: "default", formId: 91006972046152 }); </script>

    could it be because of the script src or script? (new JF_FeedbackEmbed Button)

  • Profile Image
    Alan_D
    Answered on April 21, 2019 at 03:26 PM

    As you mentioned, the button's ID is changing every time. But the first part of ID is not changing.
    15558742582.png
    We can reach your button with this code.
    $("button[id*='JF_feedback_embed_91006972046152']").show()

    So, you must use this code at the beginning of the page.
    $(document).ready(function() {
    setTimeout(function() {
    $("button[id*='JF_feedback_embed_91006972046152']").show();
    }, 20000);
    });
    Form ID
    15558749133.png

  • Profile Image
    Alan_D
    Answered on April 21, 2019 at 04:11 PM

    A little addition. We must hide the button after the page loaded. Then we can show the button. Please try this code.

    $(document).ready(function() { $("button[id*='JF_feedback_embed_91006972046152']").hide();
    setTimeout(function() { $("button[id*='JF_feedback_embed_91006972046152']").show(); 
    }, 20000); 
    });15558773325.png

  • Profile Image
    91devco
    Answered on April 21, 2019 at 08:48 PM

    lol that's close! And I'm glad to see something taking effect! The button now pops up, disappears, and then comes back. Can it be hidden even from page load?

  • Profile Image
    Kiran
    Answered on April 22, 2019 at 12:57 AM

    It looks like that the other scripts/images on the web page are taking time to load which might be causing the button to hide on the page load. Could you try moving the provided script to the beginning of the <head> tag and see if that helps?

    Please get back to us if you need any further assistance. We will be happy to help.