title: How to open a third-party widget by clicking a button in Gatsby.js?
body: <p>I'm creating website in Gatsby.js, and I want to open widget from Booksy, by onClick method. They gave me a script:</p>
  
  <pre><code>&lt;script src="https://booksy.net/widget/code.js?id=9178&amp;amp;country=pl&amp;amp;lang=pl"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>How can I do that? Function document.write() doesn't work, its blocked by browser. I also tried conditional rendered iframe it works, but badly.</p>
  
  <pre><code>const StyledIframe = styled.iframe`
      width: 100vw;
      height: 100vh;
      position: absolute;
      z-index: 99999;
  `;
  
  const BooksyWidget = ({ isOpen }) =&gt; {
      const src = "https://booksy.com/widget/index.html?id=9178&amp;lang=pl&amp;country=pl&amp;mode=dialog&amp;theme=default"
      const Content = () =&gt; {
          return isOpen ? &lt;StyledIframe src={ src }/&gt; : null 
      }
      return (
          &lt;&gt;
              {Content()}
          &lt;/&gt;      
      )
  };
  </code></pre>
  
  <p>I want to get result when clicking 'Make an Appointment' button like on this website:
  <a href="http://gentlemanbarber.pl/" rel="nofollow noreferrer">http://gentlemanbarber.pl/</a>
  I guess my Iframe method can't provide this. So how can i do it?</p>