Skip to main content
Chameleon is designed to mirror this in its design of User Profiles, Companies, Segments, searchable HelpBar content, etc.
First, generate JavaScript Code on the installation page and adapt based on this guide.

​
The entrypoint JavaScript

The sets up the Chameleon object called chmln on the page and adds relevant hooks for loading the rest of Chameleon. Add this script first and then follow it up with the call to chmln.identify. 
!function(d,w){var t="...

​
Identifying users

On each page load (and full-page refresh) you need to identify the current User + Account to Chameleon. 
chmln.identify(user.id, { company: { uid: account.id } });
We highly recommend using Identity verification where Chameleon will only accept verified requests. On your server, you generate a SHA256 of the User ID and the current timestamp connected with a dash inside and outside the hash (the chameleon_uid_hash key shown below is just an example key name).
The full list of Examples in Node.js, Python, Ruby, etc. 
const crypto = require('crypto');

const secret = process.env.CHAMELEON_VERIFICATION_SECRET;
const now = Math.floor(Date.now() / 1000);

const uid_hash = [crypto.createHmac('sha256', secret).update(`${uid}-${now}`).digest('hex'), now].join('-');
Then pass uid_hash in the options to chmln.identify 
chmln.identify(user.id, { uid_hash: user.chameleon_uid_hash, company: { uid: account.id } });
Imagine that you want to send your Users to the billing page. With this script you can setup a Navigate type of HelpBar SearchItem for the Billing page and link to /settings/billing. When this item is clicked you will receive a callback to app:navigate with opts set to { to: "/settings/billing" }

​
React

chmln.on('app:navigate', (opts) => {
  /* opts.to is the URL to navigate to. This value is set by previous calls to add SearchItems */

  window.history.pushState(null, null, opts.to);
});

​
React

import { useMemo } from 'react';
import { useHistory } from 'react-router-dom';

const ChmlnHooks = () => {
  let history = useHistory();

  useMemo(() => {
    chmln.on('app:navigate', (opts) => { return history.push(opts.to); });
  }, [history]);
}

  // then in index.js
  <ChmlnHooks />