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 Microsurveys and any other Chameleon Experiences.

👉 Explore how you can use custom CSS with Chameleon

The classes and options available are:

  • .chmln-survey -- target all Microsurveys

  • .chmln-campaign-{survey ID} -- target a specific Microsurvey, using the Microsurvey ID

  • .chmln-survey-{type} -- target a specific Microsurvey type (replacing type with, for example, nps, will target all NPS Microsurveys.)

  • .chmln-close -- target the close button

  • .chmln-edit-modal -- target the whole Microsurvey 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 Microsurvey buttons area

  • button.chmln-action -- target all buttons

Finding the ID of a Microsurvey

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

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

Example custom CSS

Here is an example of a custom stylesheet crafted for all the Microsurveys 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?