Chameleon supports Single Page Applications (SPAs) and all common front-end frameworks (i.e. React, Angular, Ember, Vue, etc.). And you can easily implement Chameleon Experiences to guide your users to moments of value.
Quick access
Chameleon works well with SPAs as it easily identifies your page content and elements when assessing how to deliver your Experiences.
Implementation for SPAs is as simple as with any other application and you can benefit from all the Chameleon functionality with no restrictions, including our URL and element matching conditions.
The implementation methods are also the same between Static Apps and Single-page Applications. There are several methods you can choose from, including NPM, using a CDP like Segment or Freshpaint, or simply installing directly using vanilla JavaScript.
There is no separate implementation work required for single-page applications. Chameleon requires an initial page load to identify users; and then polls regularly to check whether an Experience should be displayed based on any changing criteria (such as page URL, user activity, etc.).
When installing Chameleon, you need to make sure that you're identifying the user that's currently on the page by running the chmln.identify method. The goal is to always allow Chameleon to know what user is logged in, this way determining which Experiences should be displayed.
Normally, you'll do this on every page load. On SPAs, however, you'll likely only really need to run it on two scenarios:
when the user logs in
when the user refreshes the page
When the content of your SPA changes but no page refresh or log-in / log-out happens, then chmln.identify does not need to be called again.
There might be some cases when you might want to clear the Chameleon installation but there's no page refresh taking place. A common case, for example, is when there's no hard refresh when users log out of your SPA.
In such cases, you can run our chmln.clear() API method to clear Chameleon's installation. This will help you make sure that users are no longer identified and Chameleon Experiences will not be displayed.
You can find Chameleon's chmln namespace within the window scope, which can be accessed at window.chmln in scoped frameworks.
When using Angular or TypeScript, you can access window.chmln by declaring it first, as described in the example below.
declare var window: any;
...
const chmln = window['chmln'];