Css

Apply custom CSS styles to CueCatch surveys.

While themes provide a simple way to modify your survey's appearance, you might require more granular customizations.

CueCatch allows you to refine your survey's look using CSS. This enables you to adjust the size, position, and style of survey elements to align with your brand's aesthetic. With CSS, you can make more precise changes to the survey's appearance, such as tweaking the font, color, and layout.

CSS Rules in the Survey JSON

To apply CSS to your survey, you can utilize the css key in the survey's JSON model. The css attribute accepts a string containing CSS rules that will be applied to the survey. Here's an example of how you can use the css attribute to alter the background color for checkbox inputs:

json

{
  /* ... */
   "css": ".sc-survey { background-image: url('https://cuecatch.github.io/examples/images/background.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%;}",
}

view source

CSS Rules from the Hosting Page

While embedding CSS rules directly into the survey JSON data is possible, it is not a good approach for complex or lengthy CSS rules. To address this, CueCatch allows you to reference a CSS style tag from the hosting page. This way, you can keep your CSS rules separate from the survey data, making them easier to manage and maintain.

To reference a CSS style tag, add a <style> tag to the hosting page's HTML with an id value of cuecatch. It's recommended to place this <style> tag in the <head> section of the HTML document. Here's an example of how you can reference a CSS style tag from the hosting page:

html

<html>
  <head>
    <script type="module" src="https://cdn.jsdelivr.net/npm/cuecatch@latest/v1.main.js"></script>
    <style id="cuecatch" media="not all">
      .sc-checkbox,
      .sc-checkbox-text {
        background-color: white;
      }
    </style>
  </head>
  <body>
    <cue-catch src="[Survey ID or URL]"></cue-catch>
  </body>
</html>

In this example, the CSS rules for changing the background color of checkbox inputs are placed inside the <style> tag with an `id` value of `cuecatch`. CueCatch will automatically apply these CSS rules to the survey when it is rendered.

Tip

Adding media="not all" to the style tag ensures that the CSS rules are not applied to the hosting page. This way, the CSS rules are only applied to the survey and do not interfere with the rest of the webpage.

Note

CSS rules specified in the survey JSON css key have higher priority than the CSS rules defined in the