With Chameleon, you can style your Experiences to match your brand and styling needs perfectly. In Tours, Tooltips, and Microsurvey you have several options to customize your Experience background for a complete native blend.

See everything that you can do to ensure your Experiences look perfectly built-in, here.

🎯 You can always control your Experience’s styling and create your own templates from your Chameleon Dashboard.

Chameleon blends in seamlessly with your product to ensure visual cohesion and drive engagement. Aside from the global styling options that you have in your Dashboard, each Experience is customizable directly from the Builder.

Customize your background to the pixel

You can personalize your Experience background from the main panel. From the Chameleon Builder, while you’re creating your Experience, click “Canvas”.

Here you will find options relating to the size and background visual appearance. You can adjust the width and corners of your Tour, Tooltip, or Microsurvey to ensure a native blend.

💡 TIP: Make sure the Canvas width fits your text but does not cover other important elements on your page to obstruct your user’s experience.

For your Experience background, you have 3 different visual options that you can choose from: solid, gradient, or image/GIF.

Solid background

A solid background is a straightforward way to align your Experiences with your branding and goals. Chameleon automatically detects the color palette present on your page and suggests those colors for you to pick from. You can also add your brand’s palette and use these colors “by the code”. Get your hex guidelines for this, or pick a new one using a color picker.

Gradient background

With the gradient background, you can create an appealing, modern Experience. You can pick (or add your own) 2 colors to form a smooth gradient and adjust it with the opacity option. With a gradient background, is best to have similar hues or luminance as your underlying interface for a native blend.

💡 TIP: You can use an online tool to make sure you pick the right hues that will compliment your Experience.

Image/GIF background

Add a custom visual to your Experience by uploading images or GIFs as your Experience background. This can be a good way to draw attention to a user's action but should be in line with your branding and done with impeccable graphics.

🎯 A good rule of thumb is to create Experiences that stand out from your underlying interface, with different colors or hues. It’s hard for users to distinguish between the two if they are too similar.

Style all that you want with Custom CSS

If you want to achieve more nuanced styling you can use Custom CSS to customize your Experiences. Within each Experience, you can control attributes like fonts, colors, line spacing, positioning of certain elements, borders and shadows, or color gradients.

This works by adding specific styling options to different elements in your Chameleon Experiences, in the custom CSS field. Learn the steps to do this here.

Expanding insights

Did this answer your question?