I’m working on an Angular application with TypeScript and need to control the HubSpot chat widget visibility across different pages. I found some basic JavaScript methods for the widget:
const chatWidget = (window as any).HubSpotConversations;
chatWidget.widget.initialize();
chatWidget.widget.reload();
chatWidget.widget.show();
chatWidget.widget.hide();
My goal is to dynamically show or hide the chat bubble based on which page the user is currently viewing. I’m wondering what’s the best approach to integrate this into my Angular component lifecycle and how to properly type the window object to avoid TypeScript errors. Has anyone successfully implemented conditional chat widget display in an Angular app? Any guidance would be appreciated.
You’ve got to handle the timing right since HubSpot’s widget loads async. I kept getting errors when trying to show/hide the widget before it fully loaded. Here’s a helper function I use to check if it’s ready: private isWidgetReady(): boolean { return !!(window as any).HubSpotConversations?.widget; } Just wrap your visibility calls with this check. For route-based stuff, I subscribe to router events in the app component and toggle the widget there instead of doing it in individual components. Stops that annoying flicker when navigating. Heads up - the widget remembers its state, so if someone closes it on one page, it’ll stay closed everywhere unless you call show(). You might want to use localStorage to track what users prefer across sessions.
Had this exact problem at my company with conditional chat widgets in our Angular app. Skip the TypeScript definitions and component lifecycle mess - I automated it instead.
The real headache isn’t just typing or visibility. You’ll hit race conditions when the widget loads, page navigation timing problems, and constant maintenance when HubSpot updates their SDK.
We set up automation that watches page routes and user behavior, then triggers widget actions through API calls. No more managing widget state in Angular components.
It handles everything - detects when users hit specific pages, checks if they’re existing customers or new visitors, analyzes page time before showing chat. Way cleaner than scattered show/hide calls everywhere.
Bonus: you get logging and analytics on chat performance across pages without any tracking code in your Angular app.
You can build this automation at https://latenode.com
i made a service too for the hubspot chat. just extend the window interface in one types file and inject that service wherever you need the chat control. super easy for handling visibility based on routes - just call the hide/show in your route guards or component constructors.