How to show element after 3 seconds in AMP page?

Question

I try to show the WhatsApp Baloon Button after 3 seconds in AMP Page, but it's still failed. I try to debug within inspect element in Chrome but nothing errors found.

Here're the code:

CSS:

<style amp-custom>
 .hide {
    display: none;
  }
</style>

HTML:

...

<script id="script1" type="text/plain" target="amp-script">
  setTimeout(function(){
      document.getElementById('wabox').classList.remove('hide');
  }, 3000);
</script>


<a id="wabox" rel="nofollow" 
href="https://api.whatsapp.com/send?phone=XXXXXX&text=Hi%2C%20I%20am%20Interested..." 
class="wafloat hide" target="_blank">
  <i class="fa fa-whatsapp my-float gacontact wafloatx">      
      <amp-img alt="Contact us" 
                    width="64"
                    height="64"                    
                    src="img/wa-min.webp">
      </amp-img>  
  </i>
</a>

...

any idea?

Thank You in advance...

Answer 1

You should remove the type="text/plain" from your script declaration as it just says to the brother that it is made of text and not executed !

This is woking :

<script id="script1" type="text/javascript" target="amp-script">
   setTimeout(function(){
      document.getElementById('wabox').classList.remove('hide');
  }, 3000);
</script>

However, Javascript is often the cause of slow websites and so AMP pages do not allow them. You have a pretty good answers here about this issue:

Best way to include custom JavaScript in AMP

As seen here, you could use <amp-script> tag in order to have your custom script working !