Chatbot Skinning

A chatbot can have a custom look (colors, fonts, layout details) without any change to the PeakIDX code. You enter CSS in the Custom Skin section of Add / Edit Chatbot. Saving publishes the CSS to upload/site/{siteId}/ai-bot-{botId}-skin.css and the chatbot uses it right away, with no deployment.

A chatbot with an empty Custom Skin: CSS field keeps the standard look. Other chatbots are never affected.

Rules

Style only the supported idx-ai-* class names and --idx-ai-* variables listed below. Internal aifc* class names can change when the chat is redesigned, and idx-ai-* names will not.
Prefix your rules with .idx-ai-root so they reliably override the built-in base styles.
A skinned chatbot ignores the ?theme=dark|light parameter.
@import, expression(, javascript:, behavior:, -moz-binding and </ are not allowed. The CSS must be smaller than 200 KB. Put fonts in the Google Fonts URL field instead of @import.
The skin styles what is inside the chat only. The box the chat is displayed in on your website (the embed frame, its backdrop and shadow) belongs to your web page, see Chatbot Embed.

Supported class names

Class	Element
`idx-ai-root`	Outermost container. Carries `data-idx-ai-state="empty"` before the first prompt and `"active"` afterwards. Also gets `idx-ai-has-close` when the embedding page supports the close button, and `idx-ai-embed` when the chat is embedded (the header then stays fixed at the top while scrolling).
`idx-ai-card`	Wraps the header, the conversation and the prompt box
`idx-ai-header`, `idx-ai-title`, `idx-ai-subtitle`	Header band, chatbot name, welcome message
`idx-ai-close`	Close button (shown only inside a supporting embed)
`idx-ai-thread`	The conversation area (hidden until the first prompt)
`idx-ai-question-row`, `idx-ai-question`	One user prompt
`idx-ai-answer`	One chatbot answer. Standard HTML elements inside (`h1`-`h6`, `p`, `ul`, `ol`, `li`, `a`, `table`, `code`) can be styled, for example `.idx-ai-root .idx-ai-answer h3`
`idx-ai-loading`	Loading dots
`idx-ai-composer`, `idx-ai-input`	Prompt form and the text box
`idx-ai-mic`, `idx-ai-send`, `idx-ai-send-label`, `idx-ai-send-icon`, `idx-ai-stop`	Voice, Send (with its text and arrow icon) and Stop buttons

Overview and search results classes

These exist only when Show Search Results is on for the chatbot (the root also gets idx-ai-has-results):

Class	Element
`idx-ai-overview`, `idx-ai-overview-label`, `idx-ai-overview-body`	The "AI Overview" block, its heading and the answer text
`idx-ai-overview-collapsed`	Added to the body while an answer of more than 20 lines is collapsed
`idx-ai-readmore`	The Read more / Show less button
`idx-ai-results`, `idx-ai-results-query`, `idx-ai-results-list`	The results panel below the chat, the "Results for" line and the list
`idx-ai-result`, `idx-ai-result-url`, `idx-ai-result-title`, `idx-ai-result-snippet`	One result: breadcrumb line, title link, snippet
`idx-ai-result-rule`	The horizontal rule between results
`idx-ai-pagination`, `idx-ai-page-link`, `idx-ai-page-current`	The page links and the current page
`idx-ai-results-message`	"Searching...", "No results found." and error text

When the chatbot is embedded, the root also gets the class idx-ai-embed-padding. Its padding comes from the Embed Padding (px) setting of the chatbot (default 20) through the variable --idx-ai-embed-padding. A skin that fills the whole frame can either set the padding to 0 in the admin, or override it with .idx-ai-root.idx-ai-embed-padding { padding: 0; }.

Supported variables

Set these on .idx-ai-root to re-color the whole chatbot with a few lines:

Variable	Used for
`--idx-ai-font`	Font family
`--idx-ai-color-primary`	Header background, questions
`--idx-ai-color-accent`	Send and close buttons, Read more button on hover
`--idx-ai-color-accent-text`	Text color on accent-colored buttons (default dark)
`--idx-ai-color-secondary`	Voice button
`--idx-ai-color-text`, `--idx-ai-color-muted`, `--idx-ai-color-line`, `--idx-ai-color-surface`	Text, placeholder, borders, background
`--idx-ai-radius-control`	Prompt box corner radius
`--idx-ai-font-size-body`	Answer text size

Minimal example

.idx-ai-root {
  --idx-ai-color-primary: #7b1fa2;
  --idx-ai-color-accent: #ffb300;
}
.idx-ai-root .idx-ai-answer h3 { color: #7b1fa2; }

Placeholder text

Custom Skin: Input Placeholder sets the text in the prompt box before the first reply. After the first reply the placeholder is cleared.

Worked example

Set Google Fonts URL to https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap, then paste this into Custom Skin: CSS:

.idx-ai-root {
  --idx-ai-font: "Montserrat", Arial, sans-serif;
  --idx-ai-color-primary: #01509c;
  --idx-ai-color-accent: #f9a61a;
  --idx-ai-color-secondary: #29b4ce;
  --idx-ai-color-text: #26323c;
  --idx-ai-color-muted: #7c858c;
  --idx-ai-color-line: #dfe5e8;
  --idx-ai-color-surface: #fff;
  --idx-ai-radius-control: 16px;
  --idx-ai-font-size-body: 15px;
}
.idx-ai-root .idx-ai-header { padding: 30px 78px 22px 42px; }
.idx-ai-root .idx-ai-title { font-size: 28px; font-weight: 700; }
.idx-ai-root.idx-ai-has-close .idx-ai-close { top: 18px; right: 18px; font-weight: 500; }
.idx-ai-root .idx-ai-thread { padding: 0 42px; }
.idx-ai-root .idx-ai-question-row { padding: 30px 0 2px; }
.idx-ai-root .idx-ai-answer { padding: 24px 0 36px; line-height: 1.63; }
.idx-ai-root .idx-ai-answer > :first-child { margin-top: 0; }
.idx-ai-root .idx-ai-answer > :last-child { margin-bottom: 0; }
.idx-ai-root .idx-ai-answer h3 { position: relative; margin: 28px 0 12px; padding-left: 18px; color: var(--idx-ai-color-primary); font-size: 22px; line-height: 1.25; }
.idx-ai-root .idx-ai-answer h3::before { content: ""; position: absolute; top: .18em; bottom: .12em; left: 0; width: 5px; background: var(--idx-ai-color-accent); border-radius: 99px; }
.idx-ai-root .idx-ai-answer li { margin-bottom: 9px; padding-bottom: 0; }
.idx-ai-root .idx-ai-answer li::marker { color: var(--idx-ai-color-secondary); }
.idx-ai-root .idx-ai-answer a { color: var(--idx-ai-color-primary); font-weight: 600; text-underline-offset: 3px; }
.idx-ai-root .idx-ai-composer { padding: 18px 34px 30px; }

Compatibility promise

Adding new class names or variables can happen at any time. Renaming or removing an existing idx-ai-* name or --idx-ai-* variable will only happen under a new prefix version (idx-ai2-), with the old names kept until skins are migrated.

Rules​

Supported class names​

Overview and search results classes​

Supported variables​

Minimal example​

Placeholder text​

Worked example​

Compatibility promise​