0

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...

questionasker
  • 2,536
  • 12
  • 55
  • 119

1 Answers1

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 !

ArnaudV
  • 342
  • 2
  • 9
  • Hi, thank you. at first, I doubt asking this question because i think AMP has a different javascript/coding style but i can't found it on Google.... – questionasker Sep 15 '20 at 07:33
  • However , now i see `The attribute 'type' in tag 'script' is set to the invalid value 'text/javascript'.` after validating AMP – questionasker Sep 15 '20 at 07:39
  • what happens if you delete the whole attribute? – ArnaudV Sep 15 '20 at 07:44
  • Looks like your problem is deeper than just the attribute that was preventing the js from executing, have a look here: https://stackoverflow.com/questions/36035733/best-way-to-include-custom-javascript-in-amp – ArnaudV Sep 15 '20 at 07:46
  • it's executed but error just only in AMP validator, just to comply to Google AMP... – questionasker Sep 15 '20 at 08:00