While Chameleon offers many point-and-click styling options, you can also leverage Custom CSS to more finely-tune the styling of your Chameleon Experiences, including Tours, Launchers, Microsurveys, etc.

You can adjust custom CSS for your Chameleon account on the Styling page.

List of Microsurvey selectors

  • .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 your Browser Console. Right-click the relevant Microsurvey in question and then click 'Inspect element'. 

Hover over the <div 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;
}


👉 Explore some examples for styling Experiences using Custom CSS


Know more


Did this answer your question?