Qualtrics Intercept Integration with Angular

Hello, tdev34b! 

Angular setup where typing qsi or QSI into the console returns absolutely nothing can be incredibly frustrating, but it usually points to a few specific integration quirks common with Single Page Applications (SPAs).

While there isn't a single document explicitly covering this exact console behavior, the most likely culprit is either a strict Content Security Policy (CSP) blocking the script from executing or a timing issue with how Angular handles page rendering. First, open up your browser's DevTools and check the Network tab during a page reload. You'll want to filter for requests starting with ?Q_ZID or ?Q_SID. If you don't see those network requests firing at all, or if you spot CSP errors in the console, your site is likely blocking the Qualtrics scripts. To fix this, you'll need to update your CSP headers to allowlist *.qualtrics.com across your connect, frame, and script sources so the objects can actually initialize.

If the scripts are downloading but the global QSI object still isn't available when you test it, it's often a routing lifecycle issue. Because frameworks like Angular update views dynamically without a full page refresh, the intercept code might be firing before the DOM insertion point is ready. A solid workaround is switching the intercept's display event in your settings to "Display with custom JavaScript code (Manually)." This allows your engineering team to explicitly call the load and run functions right after Angular finishes its navigation cycle. If the code is running but just hiding, you can force the debug window open by executing QSI.API.unload(); QSI.isDebug = true; QSI.API.load(); QSI.API.run(); to see exactly which targeting logic might be failing.