Add personalization to your Angular application

Add the RightMessage script to your src/index.html. For dynamic loading, create a service that loads the script and provides type declarations for TypeScript.

Subscribe to Router.events in your app.component.ts. Filter for NavigationEnd events and call RightMessage.reset() to re-apply personalizations after route changes.

RightMessage runs client-side only. With Angular Universal, server-rendered content loads first, then personalization applies after hydration in the browser.

Create a type declaration file (rightmessage.d.ts) that declares the RightMessage global. This gives you type safety when calling RightMessage.reset() and other methods.

Yes. RightMessage operates at the DOM level, independent of Angular's module system. Personalization works on any content rendered to the page.

Add a small JavaScript snippet to your Angular site, similar to adding Google Analytics. You can also install our npm package for tighter integration. Installation typically takes 5 minutes or less.

While Angular is a framework that requires code, RightMessage provides a simple JavaScript API and React/Vue components that make personalization straightforward.

No. The RightMessage script loads asynchronously and doesn't block page rendering. Personalizations are applied after the initial page load. The script is served from a global CDN and is highly optimized. Your Core Web Vitals and page speed scores remain unaffected.

You can personalize any text, images, or content sections on your Angular site. Common personalizations include headlines, CTAs, testimonials, case studies, pricing displays, and entire page sections. You can also show/hide elements and redirect visitors based on segments.

RightMessage provides its own widgets (popups, slide-ins, inline forms, sticky bars) that you can embed on your Angular site. You can also personalize Angular's native forms by showing/hiding them based on visitor segments or personalizing the surrounding content.