The Experiences you create with Chameleon are a lot more effective when they are tailored to each user.
A simple way to do this is to include content that is recognizable by the end-users, such as their name or other relevant data that you can use to make their journey unique. Or dynamically personalize the content based on 'if' logic to ensure they'll always see relevant messages. 😉
Availability & Usage
🔐 Available for all plans
📍 Here for better Tours, Tooltips, Microsurveys, Launchers
⚙️ Use it in the Builder
You can deliver personalized Experiences by leveraging merge tags (user variables) or logic variables while adding content to your Experiences in the Builder. This way, you can deliver different messages based on the specific user that interacts with your Experience (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)
You can use logic variables in the:
title and body component in Tours, Tooltips, Microsurveys
for account-wide or Experience-level custom CSS
To achieve this, you'll need to go through two simple steps:
sending the user data to Chameleon and,
applying this data when you build an Experience.
Any user property that you send to Chameleon is available to use when personalizing your content. This also applies to company (group) properties that you send. If you have installed Chameleon using Twilio Segment, all user properties sent to Twilio Segment will automatically be available in Chameleon.
💡 You can also leverage Salesforce attributes in your merge tags, for example, "salesforce_contact.first_name"
It's easy for anyone to leverage your available user variables to personalize Chameleon Experiences.
All you have to do when configuring your Experience in the Builder is to access the "Personalization" option from the body/title/description component. 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 here, so you can test whether this is working.
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}}.
The User ID that you send to Chameleon is available via uid as {{uid}} .
Take it one step further and combine your available merge tags with advanced logic (if helper) to capture users' attention better. You can leverage 'if/else' conditions in various content fields and deliver a truly unique experience. 🤩
We currently support the following conditions:
{{if <CONDITION-1>}}{{/if}}{{if <CONDITION-1>}} {{/if}}{{if <CONDITION-1>}} {{else}} {{/if}}{{if <CONDITION-1>}} {{elseif <CONDITION-2>}} {{else}} {{/if}}{{if <CONDITION-1>}} {{elseif <CONDITION-2>}} {{elseif <CONDITION-3>}} {{else}} {{/if}}Where CONDITION-N can be any valid expressions '{{ }}', with a combination of:
Grouping:
()Inline helpers:
{}Infix operations:
==,===,!=,!==,>,<,>=,<=,||,&&Negation:
!
💡 You can't nest multiple 'if's, but you can use grouping ( ) for this. You can also combine logic personalization with any other custom helpers you use with Chameleon (e.g. show different styling).
A few ways to leverage logic personalization is to show different content based on your users' active plans, company size, roles, and so on; or based on previously accessed links (e.g. meetings, events) and ensure the content they see is relevant and meaningful to them.
Here is a basic example:
{{if company.plan == 'gold'}}
You're on the Gold plan 🥇.
{{elseif company.plan == 'silver' || company.plan == 'white-gold'}}
You're on the Silver colored plan 🥈
{{elseif company.plan}}
You're on the {{company.plan}} plan.
{{else}}
[Sign up today](/plans) to access the full platform.
{{/if}}
🧑💻 Check out the full reference guide and more examples of what you can do with content logic, in our Developer Hub.
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. 😉
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:
The value itself {{user_id}} acts like a wildcard * which counts for 0 or more characters
A regular expression {{user_id match='\d+'}} which counts for 1 or more characters
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_countis 1, it outputs 1 lead - Whenleads_countis 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_ago
{{time_ago created_at}}
{{time_ago created_at in='days'}}Generates a UTC timecode for offset.
Calculated the time that has elapsed since now, it returns an integer that can be used in Content logic to show content based on "time since now".
The optional
inargument controls the "unit" that is returned; the value forincan be one ofmilliseconds,seconds,minutes,hours,days,weeks,years.An example of this in Content logic is:
{{if {time_ago created_at in='days'} > 3}}Four or more days{{/if}}{{if {time_ago created_at in='years'} > 3}}Four years{{/if}}
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 :
for a user located in Portugal
{{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
for a user 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
{{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>
if - See the Developer hub for Content logic
{{if company.plan == 'gold'}}
You're on the Gold plan 🥇.
{{elseif company.plan == 'silver' || company.plan == 'white-gold'}}
You're on the Silver colored plan 🥈
{{elseif company.plan}}
You're on the {{company.plan}} plan.
{{else}}
[Sign up today](/plans) to access the full platform.
{{/if}}
global / window - See the Developer hub for Content logic
Your developers will typically need to expose some data / logic to your product first and then you use the global helper to access it. The example here is to use the global helper to set Custom CSS to a end-user specific color.
// Assuming that a variable window.chameleonTheme is added to your
// product and imagine the end-user set these as their preference
//
window.chameleonTheme = {
dark: { background: '18362E', text: '585858' },
light: () => { return { background: '585858', text: '18362E' } },
}
// Then, use it in Custom CSS
//
#chmln #chmln-example-button-id {
background-color: #{{global 'chameleonTheme.dark.background' fallback='111'}};
color: #{{global 'chameleonTheme.dark.text' fallback='fff'}};
border-radius: {{global 'chameleonTheme.dark.corner' fallback='5px'}};
}
// Which outputs this into the Custom CSS for that end-user
//
#chmln #chmln-example-button-id {
background-color: #18362E;
color: #585858;
border-radius: 5px; /* Note the fallback is used here */
}
This works the same when calling functions that are found in the 'path'
// .light is a function and the global helper will call it
//
#chmln #chmln-example-button-id {
background-color: #{{global 'chameleonTheme.light.background' fallback='111'}};
color: #{{global 'chameleonTheme.light.text' fallback='fff'}};
}
// Which outputs this into the Custom CSS for that end-user
//
#chmln #chmln-example-button-id {
background-color: #585858;
color: #18362E;
}
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.
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 but the full reference is in the Developer hub for Custom helpers.
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.
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;}