HubSpot Meeting Widget Not Displaying
I’m working on integrating HubSpot’s meeting scheduling widget into our Angular 14 application, but the iframe isn’t rendering properly. The page loads without any console errors, yet the meeting booking interface remains invisible.
Current Implementation:
Added the script reference in index.html:
<!-- HubSpot Meeting Widget Script -->
<script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>
<!-- End Widget Script -->
Component template includes:
<!-- Meeting Scheduler Container -->
<div class="booking-iframe-wrapper" data-src="https://meetings.hubspot.com/john-smith?embed=true">
</div>
<!-- End Container -->
The container div appears in the DOM but stays empty. Has anyone successfully implemented HubSpot meeting embeds in Angular 14? What could be preventing the iframe from loading?
Had the same issue last year with HubSpot widgets in Angular. The HubSpot script isn’t initializing after Angular renders the component. You’ll need to trigger widget initialization manually in your ngAfterViewInit hook. Add declare var hbspt: any; at the top of your component, then call hbspt.meetings.create({ portalId: 'YOUR_PORTAL_ID', formId: 'YOUR_FORM_ID', target: '.booking-iframe-wrapper' }); in ngAfterViewInit. Put the script in your angular.json scripts array instead of index.html so it loads before the component initializes. This fixed it for us across all environments.
Had this exact issue migrating our booking system to Angular 14. The problem is Angular’s change detection doesn’t catch HubSpot’s DOM changes. Skip the data-src attribute - create the iframe programmatically instead. Use this.renderer.createElement('iframe') to build it with the proper src URL and attributes, then append with this.renderer.appendChild(). Set width to 100% and height to at least 600px so it displays right. Also test your HubSpot meeting link solo first - URL parameters sometimes break during integration.