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*/


👉 Explore some examples for styling Experiences using Custom CSS


Know more


Did this answer your question?