title: How to overlay an iframe and allow click through
body: <p>I want to be able to put a "Chat Now" button that pops up a chat window inside any webpage.</p>
  
  <p>I can add the "Chat Now" button using JavaScript, but that inherits css in the page and makes it look bad.  So I want to put it in its own page, and embed it in any webpage using an iframe.</p>
  
  <p>This is as close as I can get it.  It display the iframe on top of the page, but does not allow clicks to go through.  How can I make the button "Click Me" clickable?</p>
  
  <p>I see most live chat do this, so it must be possible.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;&lt;button&gt;Click Me&lt;/button&gt;&lt;/div&gt;
          &lt;iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://www.botlibre.com/script?file&amp;id=15069189" style="height:100%; background: none; border: 0px; bottom: 0px; float: none; left: 0px; margin: 0px; padding: 0px; position: absolute; right: 0px; width: 100%;"&gt;&lt;/iframe&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Hopefully it is possible  without having to size the iframe exactly, but maybe... it is not? It is odd that the iframe can show the webpage behind it, but cannot allow it to be clicked on.</p>