Tours are a lot more effective when they are personalized to each user. One simple way to do this, is to include content that is relevant for the end user, such as their name, or other data. 

You can personalize tours with merge tags / user variables. Each variable displays information specific to a user who sees it, just 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. customer.yourdomain.com or yourdomain.com/user_id/menu
  • Add user specific content within the body text of a step
  • Auto-fill search boxes or form fields (using our custom JS integration)

Doing this requires two steps:

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 installed using Segment.com then all user properties sent to Segment will automatically be available within Chameleon. 

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

2. Apply the user variable

The syntax for including any variable is a double mustache around the variable name. For 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 {{company.name}}.

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. 

Fallbacks

You can also specify a fallback when the user variable 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 there name is not present then I could use {{first_name fallback=email}}

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.

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 chmln.data.profile.attributes. This will return a list that you'll need to open or select to view the variable names and values.

Matching

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 mustaches 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 used 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>

Custom helpers

Chameleon also supports using custom data for other purposes including, adapting tours 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 'brand.colors.red' fallback='7f0'}} !important;}

Alternatively you could send this data as part of a user's profile:

chmln.data.profile.set('brand_primary', 'ff1ff1');

Then use the following within the custom CSS input: 

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

Did this answer your question?