Appearance options
Appearance options
These are the fields you can pass as appearance to init and update. They are the same
settings as on the survey's Appearance tab, described in Appearance and wording;
this page adds their names in code, their allowed values and what the tab does not show.
How options combine
Later wins: the survey's saved appearance, then appearance from init, then each update. Only
the fields you pass are replaced. A colour you set in your own CSS with a
--rq-* variable beats all of them.
Reference
| Field | Values | Default | Live with update |
|---|---|---|---|
accentColor, backgroundColor, textColor | #RRGGBB | #4F46E5, #FFFFFF, #111827 | yes |
borderRadius | whole number, 0 to 24 | 12 | yes |
colorScheme | light, dark, auto (case does not matter) | light | yes |
dark | { accentColor?, backgroundColor?, textColor? }, or null to remove | none | yes (merged) |
language | en, pl, de, fr, es, 'auto', or null (English) | null | yes |
fontFamily | sans, serif, mono, or null | null (the page's font) | yes |
choiceSize | compact, default, comfortable, large, xl | default | yes |
choicesAlign | center, stretch | center | yes |
icon | chat, bubble, heart, star, megaphone, question_mark, smiley, flag, clipboard, thumbs_up | clipboard | yes |
sectionTitle, ctaLabel, thankYouText | text, or null for the built-in text | null | yes |
placement.mode | floating, inline | floating | no, init only |
placement.corner | bottom_left, bottom_right; any other value is rejected with a console line | bottom_right | yes |
placement.offset.x, .y | number of pixels (the panel allows 0 to 64) | 20, 20 | yes |
fontFamily takes only the three presets. For any other font, set --rq-font-family in your CSS:
see Styling with CSS.Dark mode
colorScheme decides which look is used: light, dark, or auto, which follows the visitor's
device setting (prefers-color-scheme).
The dark object holds the colours to use instead of the built-in dark ones whenever the
effective scheme is dark. In dark mode a colour comes from, in order:
dark.backgroundColor/dark.textColor/dark.accentColor;- your own non-default
backgroundColor/textColor/accentColor; - the built-in dark defaults.
Borders, the error colour and the text colour on the accent are always calculated.
rawquotes('init', {
surveyId: 'YOUR-SURVEY-ID',
appearance: {
colorScheme: 'auto',
accentColor: '#4f46e5',
dark: { backgroundColor: '#0b1020', textColor: '#e5e7eb', accentColor: '#818cf8' }
}
})
The widget reads the visitor's device, not your site's theme switch. To follow the switch, call
update from it, or style html.dark [data-rawquotes] in CSS: see
Dark mode.
Language
language takes en, pl, de, fr or es. A region is ignored, so pl-PL and PL both mean pl.
An unsupported language falls back to English and writes a console warning.
'auto' reads <html lang> using the same rules, except that an unsupported or missing value falls back to English without a console warning, at init and at every update, and nowhere else.
The widget does not watch the attribute, so a site that changes language on the page has to say so:
// <html lang="de-AT">
rawquotes('init', { surveyId: 'YOUR-SURVEY-ID', appearance: { language: 'auto' } }) // German
// the site switches its language:
rawquotes('update', { appearance: { language: 'auto' } }) // reads <html lang> again
rawquotes('update', { appearance: { language: 'pl' } }) // or say it directly
Only the widget's own interface is translated: buttons and messages. The text of your questions,
sectionTitle, ctaLabel and thankYouText are shown exactly as you wrote them.