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 that you can use to make their journey in your product unique.


Quick access


How to personalize Experiences?

You can deliver personalized Experiences by leveraging merge tags (user variables) while configuring your Experiences. This option allows you to replace the content in your Experiences with dynamic user data based on the specific user that interacts with your guidance (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. customer.yourdomain.com or yourdomain.com/user_id/menu), including from button Actions URLs.

  • Add user-specific content within the body or title of a Step

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

To achieve this, you'll need to go through two simple steps: sending the user data to Chameleon 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 Twilio Segment then all user properties sent to Twilio Segment will automatically be available within Chameleon. 

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


2. Apply the user variable

When leveraging user variables in your title or body content, access the "Personalization" option directly from the Builder. You'll get a list of user properties that you can select from and Chameleon will add the syntax for you. All you have to do is update the adjust the fallback to ensure it displays correctly to all users.

When you deselect the field you will see a preview of the actual user data (for your account) inserted in here, so you can test whether this is working.

You can leverage user variables to match specific users to specific URLs in your product. Simply replace the dynamic part of the URL with the specific syntax, which is double curly brackets around the variable name. For example, to apply the user property of a firstname with a URL button action, you would use {{firstname}}.

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

With the 'Open URL' option, type in the page you want to redirect your user with the specific property - e.g. www.yourdomain.com/settings/{{first_name}}/admin

💡 The same syntax rules apply when leveraging user variables with URL rules.

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}}.


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


Fallbacks

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 the fallback "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 there.

Chameleon formats this for you whenever you're using the Personalization option and you just have to edit the fallback to match your context. 😉


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.


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 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.

time_local

{{time_local created_at}}
  • Displays timestamps in local and timezone-specific strings.

  • If this value is not present use fallback instead

{{time_local missing_val fallback="soon"}}

Examples where created_at is 2029-06-01 00:00:00 UTC

located in the PT

{{time_local created_at}} => 5/31/2029, 5:00:00 PM {{time_local created_at year="numeric" weekday="long" month="short" day="numeric" timeZoneName='short'}} => Thursday, May 31, 2029, PDT 

located in London

{{time_local created_at}} => 6/1/2029, 12:00:00 AM {{time_local created_at year="numeric" weekday="long" month="short" day="numeric"}} => Friday, Jun 1, 2029

💡 You can see more examples in your Developer Hub.

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 chmln.data.profile.attributes. 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]}‍} 

👉 You can learn more about mustache helpers and how you can use them, here.

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;}


Know more

Did this answer your question?