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.
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.
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'];