The in-product experiences you design with Chameleon are a lot more effective when they are personalized to each user. One simple way to do this is to include content that is recognizable by the end-users, such as their name or any other relevant data.

You can personalize Experiences using merge tags/user variables. Each variable displays information specific to the user who sees it (e.g as in an email campaign).

User variables can be used in a variety of input fields, for example:

  • Match URLs that vary by user (e.g. or

  • Add user-specific content within the body text of a step

  • Auto-fill search boxes or form fields (using our custom JS integration)

To achieve the above, you'll require two simple steps: sending the user data and applying this data to your Experiences.

1. Send the user variable data

To do this, simply send us the user variable as a property as part of the JS code snippet. If you have installed Chameleon using then all user properties sent to Segment will automatically be available within Chameleon. 

Note: This also applies to company or group properties that you send to Chameleon. 

2. Apply the user variable

The syntax for including any variable is double curly brackets around the variable name. For example, to apply the user property of firstname you would use {{firstname}}

We modify names to be lower case and replace spaces with underscores, so if the property you are sending is "First Name" then you would use: {{first_name}}

For company (or meta) properties, simply include "company." prior to the property name. For example, if you send "Name" as a company property, then you would use {{}}.

You also have the option of using the dropdown field when the step body content is selected to insert an available property. When you deselect the field you will see a preview of the actual user data (for your account) inserted in here, and so you can test whether this is working.

Note: The User ID that you send to Chameleon is available via uid as {{uid}} .


We encourage you to define a fallback for cases when the user property is missing for that user. The syntax for that is: {{variable fallback=alternative}} where alternative could be a string, "text", or another variable, variable2.

For example, if I am sending first_name as a property for some users but not others, and I want to use that in the content, I could use: {{first_name fallback="there"}}. This would show the first_name to users where it is present or "there" if it is not.

If I want to insert the user's email if their name is not present then I could use {{first_name fallback=email}}

In the example above, if the user doesn't contain the first_name property, the system automatically replaces this with human.

Note: The actual value of the variable for you is shown in the live preview. If a user variable doesn't match then nothing will show.


When the user variable is used for matching, such as for a dynamic URL like /users/43k2n/settings you can specify either:

  1. The value itself {{user_id}} acts like a wildcard * which counts for 0 or more characters

  2. A regular expression {{user_id match='\d+'}} which counts for 1 or more characters

Advanced use

You can also adapt the variables inside the curly brackets with some helpers. These take inputs and transform them into something personal for the user. For example:

property - {{property 'first_name'}}

  • Pulls any property from the user profile

  • If the name is not present use fallback instead

pluralize  - {{pluralize leads_count 'lead'}}

  • Number of things with the correct modifier - if leads_count is 1, it outputs 1 lead - When leads_count is any other value, it outputs x leads

time_difference_in_words - {{time_difference_in_words trial_end_at}} 

  • Calculates the difference in time from the given date until (or since) now and outputs things like 4 days ago, 2 months from now

  • Custom tensing allows you to pick the "follow-on phrase" (the default is ago / from now). {{time_difference_in_words example_time tense="in future times"}}  would output something like 2 days in future times.

html  - {{html 'Click here' style="text-decoration: underline; color: green"}}

  • Outputs a tag followed by any options passed as attributes of the resulting html tag

  • Example:

{{html 'Read' target='read-more-tab' href='/read-more' tagName='a' data-read-more='link' style='color: red'}}
// Outputs
<a href="/read-more" target="read-more-tab" data-read-more="link style="color: red">Read</a>

Troubleshooting user properties

To see the variable names that the current user of your app has, and their associated values, open the javascript developer console on your browser and enter This will return a list that you'll need to open or select to view the variable names and values.

Custom helpers

Chameleon also supports using custom data for other purposes including adapting experiences by user (or user group):

  • Changing styling (e.g. applying the correct brand colors for each of your customer accounts)

  • Adding custom text (e.g. step content translated into the relevant user language)

  • Syncing step content with an external Content Management System (e.g. using your existing content manager to manage Chameleon step content)

This is done by using custom "helpers" which translate the data between what you're sending and what is used by Chameleon. These are advanced uses and to enable this helpers functionality please first email us

Once you're approved, you can add helpers with 

chmln.lib.personalize.Mustache.addHelper(given_name, fn) 

The name given becomes available to use in mustaches such as:

{‍{given_name[ args][ options]}‍} 

Example - Custom CSS

To use this to adjust styling via Custom CSS, you could set a user variable brand  on the page:

window.brand = { colors: { red: 'ff0000' } };

Then use it within the Chameleon custom CSS input:

#chmln-step-sample .chmln-inner {background: #{{global '' fallback='7f0'}} !important;}

Alternatively, you could send this data as part of a user's profile:'brand_primary', 'ff1ff1');

Then use the following within the custom CSS input: 

#chmln-step-sample .chmln-inner {background: #{{brand_primary fallback='0f7'}} !important;}

Know more

Did this answer your question?