Customizing your tours

Quickstart guide on how to build a tour and explanation of styling and formatting options.

Dress up a Tour with Styling

Adding custom styling to your tour can increase readability, enhance the message you're communicating, and create a overall better user experience. Chameleon offers the ability to add markdown to your tour steps' body text. You can also add custom colors and font stacks for further tailoring to match your brand - or just to make your tours look pretty!

Colors

In the Tour appearance section in the Home View of the Editor, you can select the accent, body text and title text colors, and the fonts to use.

The colors you choose here will be represented in your steps as follows

Markdown

Markdown formatting is enabled for any body text in your tours. You can use this to change copy styling, including adding bold, italics, bulleted lists, headers, code etc. See our cheatsheet below and the full version at Github

# The largest heading
## The second largest heading
...
###### The smallest heading

**Bold text**
*Italicized text*
~~Strikethrough text~~

> Indented quote
=| Center align
=> Right align

`code snippet`
use ``` above and below lines for a code block

[Link name](link_target) e.g. [Google](https://www.google.com)

Emojis

You can add emojis in any body field. See the cheat sheet for codes to use, and the image below for reference.

Fonts

In the Font section you may add a single font or a font stack. A font stack is a list of preferred fonts, in order (first available in browser is used). To add this, simply list your fonts, separated by commas.

You can find a list of common CSS font stacks here.

A best practice is to include 4 to 6 fonts in a font stack, often ordered in this way:

1) Preferred font - the font you consider most ideal for the content you’re designing. if the browser can access this font, it will appear exactly as you planned.

2) OS alternative - it may be the case that your first-choice font isn’t available on Windows or Macintosh. Use the second font stack to pick something that is available on the other OS. You will usually look for one that looks similar to your preferred font.

3) Secondary alternative - A font that is similar to your preferred font, but perhaps more common.

4) Common - For this font choice, refer to common Windows or common Mac fonts. Try to pick a common font that’s the same style as your preferred font (e.g. serif, sans-serif).

5) Generic font name - generic CSS font names include: cursive, fantasy, monospace, sans-serif, serif

Custom CSS

If you would like more customization than is available through the Editor, enable custom CSS styling by contacting support@trychameleon.com. This is available for customers on the Advanced plan

Custom CSS works by targeting specific elements of Chameleon to change styling. You can add your own CSS in the Tour Styling section.

  1. Identify Chameleon Elements: We recommending using the Elements panel in Chrome's Developer tool to inspect elements, and identify the css style properties you should use.

  1. Edit CSS in your preferred editor to add style information You may need to specify element styles with an !important tag

  2. Paste into custom CSS box

Previewing

Note: The Modal on the left of the Sidebar previews your current style, and should update automatically. If you're expected changes do not appear, review your CSS to ensure it's targeting the correct element

Below are example selectors for Chameleon steps and their parts. You'll need to add your own style settings and test them with the Chameleon Sidebar.

/* Modal step styles*/
#chmln .chmln-modal .chmln-inner .chmln-header { /* the heading of the Modal */ }
#chmln .chmln-modal .chmln-inner .chmln-media-body .chmln-body { /* the style of the body content of the modal */ }
#chmln .chmln-modal .chmln-inner .chmln-cta { /* the style of the call-to-action area at the bottom of the step */ }
#chmln .chmln-modal .chmln-inner .chmln-cta .chmln-action{ /* the style of the call-to-action or 'next' button */ }

/* Infotip step styles*/
#chmln .chmln-infotip .chmln-inner .chmln-header { /* the heading of the Modal */ }
#chmln .chmln-infotip .chmln-inner .chmln-body { /* the style of the body content of the infotip */ }
#chmln .chmln-infotip .chmln-inner .chmln-cta { /* the style of the call-to-action area at the bottom of the step */ }
#chmln .chmln-infotip .chmln-inner .chmln-cta .chmln-action{ /* the style of the call-to-action or 'next' button */ }

/* Lightbox step styles*/
#chmln .chmln-lightbox .chmln-inner .chmln-header { /* the heading of the Modal */ }
#chmln .chmln-lightbox .chmln-inner .chmln-body { /* the style of the body content of the lightbox */ }
#chmln .chmln-lightbox .chmln-inner .chmln-cta { /* the style of the call-to-action area at the bottom of the step */ }
#chmln .chmln-lightbox .chmln-inner .chmln-cta .chmln-action{ /* the style of the call-to-action or 'next' button */ }
#chmln .chmln-lightbox .chmln-lightbox-highlight .chmln-lightbox-opening-row .chmln-lightbox-opening{ /* the style of the shroud highlight (a CSS shadow) */
box-shadow: 0 0 100px 2000px rgba(0,0,0,0.4) !important; }

/*NOTE: box-shadow sizes over 2000px can be unpredictable on Safari and Firefox*/

/* New step editor styles*/
#chmln .chmln-edit-modal .chmln-inner .chmln-header .chmln-close{ /* the close button */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-media-body .chmln-step-media { /* the style of the image or video */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-media-body .chmln-body .chmln-body-content { /* the style of the body content */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer { /* the style of the footer area at the bottom of the step */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-progress{ /* the style of the progress bar */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-progress .chmln-progress-dot{ /* the style of the progress bar dot*/ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-progress .chmln-progress-text{ /* the style of the progress bar text*/ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-cta .chmln-action.chmln-action-previous{ /* the style of the call-to-action or 'previous' button */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-cta .chmln-action.chmln-action-next{ /* the style of the call-to-action or 'next' button */ }
#chmln .chmln-edit-modal .chmln-lightbox-highlight .chmln-lightbox-opening-row .chmln-lightbox-opening{ /* the style of the shroud highlight (a CSS shadow) */
box-shadow: 0 0 100px 2000px rgba(0,0,0,0.4) !important; }

Uploading media

Image

Add an image (.jpeg, .png, or .gif) to a Modal by clicking the Browse button. The image will display in the Modal based on the original file's dimensions. See Resizing an image.

GIF's

GIF's are image files that support animation. If you'd like to create a GIF, we recommend using GifGrabber (free)

Video

To add a video to a Modal, enter the URL from the site where your video is hosted into the Embed Video section of the editor.

Example:

https://www.youtube.com/watch?v=378lih7AU2g https://vimeo.com/ondemand/25096/97663163

Resizing an image

The ideal image dimensions for modals are 296px high by 710px wide. To crop your image to this proportion, you can resize as follows:

Mac: using Preview

  1. Choose Tools > Adjust Size
  2. Select Pixels from the unit dropdown menu.
  3. Enter new values for height (296px) and width (710px). Note: see below on how to maintain proportions.
  4. Click Ok to save.

Tips:

To ensure that the image keeps its original proportions, make sure “Scale proportionally” is checked. If you change either the width or height, the other value changes to maintain the proportions.

To make the image’s dimensions smaller without losing any detail, deselect “Resample image” before changing the width or height.

To resize multiple images at the same time, display the images in the same window, select them in that window’s sidebar, and then choose Tools > Adjust Size.

Windows 10: using Photo Gallery

  1. Open Photo Gallery.
  2. Select the photos you want to resize, and then on the Edit tab, in the Properties group, click Resize.
  3. Click the Select a size list, and then select a size for your photos. For a custom size, in the Maximum dimensions box, enter the maximum width you want your photos to be.
  4. Click Resize and save.

Windows 10: using Paint

  1. Start Paint and Open the image you want to resize.
  2. On the Home tab, in the Image group, click Resize.
  3. To resize the picture so it's a specific size, click Pixels, and then enter a new width in the Horizontal box or new height in the Vertical box.
  4. Click the Paint button, then Save.

Custom Hotspots

The Hotspot step allows for you to upload your own images for use as a custom spot.

​Custom spots can technically be almost any size png, jpeg, or gif you'd like to use. However design-wise, you probably want to stick to something that's around 45px by 45px.

User variables

You can personalize tours with user variables. Each variable pulls/displays information specific to a user who sees it. User variables can be used in a variety of input fields (such as the tip content, URL fields and Custom JS). For example,

  • Match URLs that vary by user, e.g. A custom subdomain customer.yourdomain.com or a specific ID in the path yourdomain.com/user_id/menu
  • Address users by name in the body text of a tip
  • Auto-fill search boxes or form fields

To do this, simply send us the user variable as a property and then insert it within a double mustache: {{ }}

We modify the variable name

We lowercase all words and replace spaces with underscores, so if you were sending us \"First name\", you would have to call \"first_name\" when inserting this variable.

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

Missing values / 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.

Custom helper API

To add custom mustache helpers contact help@trychameleon.com first. One 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]}‍}.

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

  • Pulls the first name from the user profile
  • If the name is not present used friend instead

pluralize

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

Formal Syntax

Below are all the helper options. Please ping us (use the green bubble in the bottom right) if you are trying to use this and have further questions.

{‍{ helper_name[ args ...][ options ...] }‍}

rule op values
helper_name := helper function name
identifier
helper function name := the name of a supported helper
args := string[ args]
identifier[ args]
options := key=identifier[ options]
identifier := property of the user profile
string := string literal