title: Calendly Widget not working in IE (Angular App)
body: <p>I am embedding a Calendly widget into a simple Angular application.  It works in Chrome, Firefox, and Edge, but just shows a blank white box in IE.</p>
  
  <p>The working url for the site is <a href="https://cei-demo.firebaseapp.com/schedule-an-appointment" rel="nofollow noreferrer">https://cei-demo.firebaseapp.com/schedule-an-appointment</a></p>
  
  <p>I have tried using innerHTML to render the HTML code from the component and not in the template.  I had the same problem.</p>
  
  <p>calendly.component.html</p>
  
  <pre><code>&lt;div class="my-5 p-3 container bg-white text-dark"&gt;
    &lt;div class="calendly-inline-widget" data-url="https://calendly.com/test-cei" style="min-width:320px;height:700px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>index.html (right above the body tag)</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I would like the widget to display in all browsers.</p>
  
  <p>Here is the code in response to Dmitry Pashkevich below:</p>
  
  <p>component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-calendly',
    templateUrl: './calendly.component.html',
    styleUrls: ['./calendly.component.css']
  })
  export class CalendlyComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p>component.html</p>
  
  <pre><code>&lt;div class="my-5 p-3 container bg-white text-dark"&gt;
    &lt;div class="calendly-inline-widget" style="min-width:320px;height:580px;" data-auto-load="false"&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Carbon Emery Insurance&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;!-- reCaptcha --&gt;
    &lt;script src="https://www.google.com/recaptcha/api.js" async defer&gt;&lt;/script&gt;
  
    &lt;!-- Custom Fonts --&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="./assets/favicon.ico"&gt;
  
    &lt;!-- Bootstrap core CSS --&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  
    &lt;!-- Font Awesome --&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  
    &lt;!-- Bootstrap js --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      Calendly.initInlineWidget({
      url: 'https://calendly.com/test-cei',
      parentElement: document.querySelector('.calendly-inline-widget'),
      });
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>