Skip to main content

CSS styling of survey

Customize the appearance of your survey with CSS variables.

Updated over 6 months ago

Our surveys are rendered as a separate custom element, which allows for extensive customization through CSS variables. This allows you to use your brand profile to customize the look of your surveys.

Using the following CSS variables, you can change colors, fonts and other styles:

<style>
skyra-survey {
--skyra-bg-color: #000;
--skyra-text-color: #000;
--skyra-z-index: <the desired z-index value for the widget>;
--skyra-interface-color: #000;
--skyra-action-color: #000;
--skyra-action-text-color: #000;
--skyra-secondary-color: #000;
--skyra-link-color: #000;
--skyra-error-color: #000;
--skyra-font-size: 16px;
--skyra-font-body: your font family
--skyra-font-heading: your font family for headings
}
</style>

What do the theming variables mean?

  • font-size Specifies the base text size for the widget. This is set to :host, and underlying elements are scaled with em.

  • font-heading Font family for headings.

  • font-body Font family for all other content.
    ​

  • z-index Determines which z-index the widget should use. Our default is maxint so that it never ends up behind anything, but if you, for example, have a chatbot you want to overlay on the mobile view, you can specify a value here that is higher than all content but at the same time lower than the chatbot.

  • bg-color Background color for the entire widget. Should have sufficient contrast with other colors and be matched to your website's background color. (Generally not used on the cards that are in a findability survey, but think of it as the background color of the entire widget.)

  • interface-color Used for frames and icons.

  • action-color Background color of the "next" button.

  • action-text-color Text color of the "next" button.

  • error-color Error message color. Not used in Findability schema for now but for future proofing it should be a red error color with enough contrast against bg-color

Advanced theming

💡 Note: Advanced customization may be affected by future updates to the widget's structure.

For mer spesifikke justeringer kan du bruke CSS ::part()-selektoren (hvis dere absolutt må skreddersy mer.) Dette lar deg overstyre individuelle deler av widgeten.

The following parts are available for customization:

  • heading: Headings.

  • button-primary: Primary buttons.

  • description: Text descriptions.

  • wrapper: The skyra-popup itself. Use it to adjust positioning.
    ​

    skyra-survey::part(wrapper) {
      bottom: 2rem;
      right: 2rem;
      top: auto; // Trengs kanskje basert på hvilken posisjon survey har i settings
      left: auto; // Trengs kanskje basert på hvilken posisjon survey har i 
    }

Example of use:

skyra-survey::part(button-primary) {
border: 2px dashed pink;
}

Use parts for detailed customization, but be aware that it may require updating styling in future versions.

Did this answer your question?