24 {{ upvoteCount | shortNum }}
24 {{ upvoteCount | shortNum }}

How to get a buy button to appear after a certain time?

by kevin Hislop
16 replies
Hey Warriors,

I am looking for hopefully a free (possibly Paid if price is right) plugin for wordpress... I have my sales video and i want to make the buy button (paypal) to "magically" appear after a specific amount of time...

Does anyone know of a free plugin to do this?

A similar plugin would be nice for a countdown timer too?


Thanks Warriors
#button #buy #buy button #time
  • Profile picture of the author Michael Mayo
    STEP ONE:

    Paste the following code just before the closing
    </head> tag in your web page.


    <!-- START PASTE HERE -->

    <script type="text/javascript">
    <!--

    ////////////////////////////////////////////
    // CHANGE THE SECONDS DELAY BELOW TO //
    // THE NUMBER OF SECONDS YOU WANT BEFORE //
    // THE LINKS APPEAR //
    ////////////////////////////////////////////


    $secondsdelay = 90;

    ////////////////////////////////////////////
    // DO NOT EDIT THIS SECTION //
    ////////////////////////////////////////////


    function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
    item.className=(item.className=='hidden')?'unhidde n':'hidden';
    }
    }


    $delay = $secondsdelay*1000;

    window.setTimeout("unhide('links')",$delay);

    //--></script>

    <STYLE TYPE="text/css">
    .hidden { visibility: hidden; }
    .unhidden { visibility: visible; }
    </STYLE>


    <!-- END PASTE HERE -->


    STEP TWO:

    Paste this just BEFORE the link or form you want to
    "magically" appear:


    <div id="links" class="hidden">



    STEP THREE:

    Paste this just AFTER the link or form you want to
    "magically" appear:

    </div>

    Hope that Helps,
    Have a Great Day!
    Michael
    {{ DiscussionBoard.errors[4180936].message }}
    • Profile picture of the author flashjoom
      It works ok,
      Thank you.
      Originally Posted by Michael Mayo View Post

      STEP ONE:

      Paste the following code just before the closing
      </head> tag in your web page.


      <!-- START PASTE HERE -->

      <script type="text/javascript">
      <!--

      ////////////////////////////////////////////
      // CHANGE THE SECONDS DELAY BELOW TO //
      // THE NUMBER OF SECONDS YOU WANT BEFORE //
      // THE LINKS APPEAR //
      ////////////////////////////////////////////


      = 90;

      ////////////////////////////////////////////
      // DO NOT EDIT THIS SECTION //
      ////////////////////////////////////////////


      function unhide(divID) {
      var item = document.getElementById(divID);
      if (item) {
      item.className=(item.className=='hidden')?'unhidde n':'hidden';
      }
      }


      = *1000;

      window.setTimeout("unhide('links')",);

      //--></script>

      <STYLE TYPE="text/css">
      .hidden { visibility: hidden; }
      .unhidden { visibility: visible; }
      </STYLE>


      <!-- END PASTE HERE -->


      STEP TWO:

      Paste this just BEFORE the link or form you want to
      "magically" appear:


      <div id="links" class="hidden">



      STEP THREE:

      Paste this just AFTER the link or form you want to
      "magically" appear:

      </div>

      Hope that Helps,
      Have a Great Day!
      Michael
      {{ DiscussionBoard.errors[6733938].message }}
    • Profile picture of the author Kegandrew
      Originally Posted by Michael Mayo View Post

      Michael
      Thank you so much for posting this. This is exactly what I was looking for.

      I know that I have a plugin or script that I purchased somewhere on my hard drive that will do the same thing, but this is much easier. I just needed a delayed buy button!

      Thank you.
      {{ DiscussionBoard.errors[7313074].message }}
    • Profile picture of the author ngolay
      Too Cool! I was creating a sales page from scratch and I really wanted to delay the appearance of some elements but I didn't know how to it.
      This worked!
      Many Thanks!
      Natalie
      {{ DiscussionBoard.errors[9569351].message }}
      • Profile picture of the author TJ Nelson
        This is the first thing I got to actually make something appear beneath the video after a certain period of time.

        Only problem is, the video takes a few seconds to load (using Amazon S3 it takes around 5 seconds, Youtube 2-3 seconds).

        If the buy button is set to appear at 5 seconds, but the video takes 5 seconds to load, that means the buy button appears when the video time is 0:00.

        I would have to time the appearance of the buy button perfectly, but depending on internet connection, the video will load at different speeds for everyone, making the buy button appear at varying times during the video (also making split testing hard to do, such as when to introduce the button).

        Any ideas?
        {{ DiscussionBoard.errors[9744243].message }}
        • Profile picture of the author wpentrepreneur
          Originally Posted by TJ Nelson View Post

          This is the first thing I got to actually make something appear beneath the video after a certain period of time.

          Only problem is, the video takes a few seconds to load (using Amazon S3 it takes around 5 seconds, Youtube 2-3 seconds).

          If the buy button is set to appear at 5 seconds, but the video takes 5 seconds to load, that means the buy button appears when the video time is 0:00.

          I would have to time the appearance of the buy button perfectly, but depending on internet connection, the video will load at different speeds for everyone, making the buy button appear at varying times during the video (also making split testing hard to do, such as when to introduce the button).

          Any ideas?
          I would recommend using Wistia.
          They give you a proper API for this meaning you can making something appear corresponding to a time in the actual video.

          Wistia also gives you complete control over appearance, branding and analytics so it is much better for marketers.

          You should check it out
          {{ DiscussionBoard.errors[9744824].message }}
  • Profile picture of the author kevin Hislop
    Hi Michael,

    Thanks for the reply... i will check this out and fingers crossed i can execute your step by step guide ... Legendary!

    Cheers
    Kev
    {{ DiscussionBoard.errors[4184759].message }}
  • Profile picture of the author Azlan
    hello michael,

    thanks for the info. it really helps

    i manage to get it working on my site.

    - Azlan
    Signature

    New WSO - Coming Soon...

    {{ DiscussionBoard.errors[6734034].message }}
  • Profile picture of the author mikeye
    Thanks Michael for the great tip!
    Signature
    Internet Marketing Blog - Learn Internet Marketing || Boost Business Sales - Get Millionaire Coaching
    Blog Cash Secrets - Build Blog & Make Profit (Coming Soon) || Facebook - Like Me On My Fan Page
    {{ DiscussionBoard.errors[7313103].message }}
  • Profile picture of the author preets
    Great info Michael . Thanks a lot .
    Signature
    BUY HIGH QUALITY BACKLINKS | Party Supplies Singapore | Affordable SEO Services
    Wordpress Developer | Sales Page Designing | Affiliate Site Development | HTML Website |
    {{ DiscussionBoard.errors[7313295].message }}
    • Profile picture of the author dsentenn
      This script works great! I have a follow up question to take this a little bit furhter. It might be easily answered with "hire a designer," but I thought I'd ask.

      I have a bit of content under my buy buttons so I have this large blanks space between where the buttons will eventually appear and the content underneath. Is there a simple way to have the content underneath be where the buttons are until the buttons appear? It's not important to have any jquery looking slide effect, having it jump down would be fine, too. I'm probably looking at a much more complicated javascript, aren't I?
      {{ DiscussionBoard.errors[7844038].message }}
      • Profile picture of the author meepmeep
        Originally Posted by dsentenn View Post

        This script works great! I have a follow up question to take this a little bit furhter. It might be easily answered with "hire a designer," but I thought I'd ask.

        I have a bit of content under my buy buttons so I have this large blanks space between where the buttons will eventually appear and the content underneath. Is there a simple way to have the content underneath be where the buttons are until the buttons appear? It's not important to have any jquery looking slide effect, having it jump down would be fine, too. I'm probably looking at a much more complicated javascript, aren't I?
        I think if you can accomplish this by wrapping another div around the entire thing. For example:

        Code:
        <div style="height: 100px;" > <!-- Customize the height. -->
<div id="links" class="hidden">
TEXT
</div>
</div>
        Or a more elegant way:

        Code:
        <style>
#spacer { height: 100px; } /* Or put this into a CSS file */
</style>

<div id="spacer">
<div id="links" class="hidden">
TEXT
</div>
</div>
        {{ DiscussionBoard.errors[7844866].message }}
  • Profile picture of the author seobro
    This is a great strategy to get orders, but do not make the delay too long or they will hit the back arrow. Also, put inside the video a call to action such as - CLICK now...
    Signature
    http://www.seobro.com
    {{ DiscussionBoard.errors[9371740].message }}

Trending Topics