Custom CSS allows you to fine-tune the design of your Chameleon Experiences to match your product's brand.

To add your custom CSS code, you need to access the Styling section from within the Chameleon Builder. This is also the place where you can change the default styling for Surveys and any other Chameleon Experiences.

👉 Explore how you can use custom CSS with Chameleon

The classes and options available are:

  • .chmln-survey -- target all Surveys
  • .chmln-campaign-{survey ID} -- target a specific Survey, using the Survey ID
  • .chmln-survey-{type} -- target a specific Survey type (replacing type with, for example, nps, will target all NPS Surveys.)
  • .chmln-close -- target the close button
  • .chmln-edit-modal -- target the whole Survey modal component
  • .chmln-step-media -- target the media container (image or video)
  • .chmln-body-content -- target the body content
  • .chmln-body-content {header element} -- target a specific header in the body content (replacing header element with the desired header element: h1, h2, h3, h4, etc.)
  • .chmln-footer -- target the footer
  • .chmln-lightbox-opening -- target the lightbox opening
  • .chmln-input_text-container -- target the input field
  • .chmln-survey-buttons -- target the survey buttons area
  • button.chmln-action -- target all buttons

Finding the ID of a Survey

To find the ID of a Survey, use the Browser Console. Right-click the relevant Survey in question in the Sidebar and then click 'Inspect element'. 

Hover over the <li id="chmln-campaign-XXXXXXXX"  element, which corresponds to the Survey above; and then use the XXXXXXXXX  as the ID.

Example custom CSS

Here is an example of a custom stylesheet crafted for all the Surveys on an account:

#chmln .chmln-survey .chmln-close svg path {
  fill: black !important;
#chmln .chmln-survey .chmln-step-media {
  padding: 10px !important;
#chmln .chmln-survey .chmln-body-content {
  color: pink !important;
#chmln .chmln-survey .chmln-body-content h4 {
  font-family: sans-serif !important;
#chmln .chmln-survey .chmln-footer {
  margin-top: 10px !important;
#chmln .chmln-survey button.chmln-action {
  background-color: white !important;
#chmln .chmln-survey .chmln-lightbox-highlight .chmln-lightbox-opening {
  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*/

Example styling

Below are some examples of how you can add Custom CSS to customize your Surveys.

We will use the Input Survey below as a canvas for the different changes to be implemented.

Styling the Survey's modal component

To style the whole modal component of this Survey, we are going to inspect the page and identify the elements that we need to target.

In this case, we have two options:

  • Apply styles to all the Surveys, using generic classes such as .chmln-survey, .chmln-inner, etc.
  • Apply Styles to this Survey in specific, by using the classes that contain the ID that correspond to this Survey, such as .chmln-campaign-{survey-id}, .chmln-step-{step-id}, etc.

For this example, we're going to style all the Surveys with a border, box-shadow, and an extra padding, to contrast with the background and bring attention to the component. We can use the following CSS rule:

#chmln .chmln-survey .chmln-inner {
border: 5px solid #216A54 !important;
box-shadow: 5px 5px 10px rgba(0,0,0,0.3) !important;
padding: 7px;

Styling the text

To style the Survey's text, we can follow the same logic as before: styling all the Surveys using common classes or styling only this Survey by using specific classes.

In this case, we are going to alter the font-weight, letter-spacing, and color for the text of this Survey in specific.

#chmln .chmln-campaign-5fabf3f6bc63ce000726272f .chmln-body-container .chmln-body-content h3 {
color: #262626;
font-weight: bold;
font-size: 1.7em;
letter-spacing: 0.2px;

#chmln .chmln-campaign-5fabf3f6bc63ce000726272f .chmln-body-container .chmln-body-content {
color: #4e4e4e;
font-size: 1.7em;

Know more

Did this answer your question?