Custom CSS

The Custom CSS field is appended after Minaya's own styles, so your rules win without needing !important. The widget renders in a shadow root, so nothing here leaks into your page — and your page's CSS cannot accidentally restyle the widget.

Renamed prefix. Class names and custom properties used to start with aicb; they now start with maicb (Minaya AI chatbot). CSS you saved against the old prefix keeps working — the widget rewrites.aicb-… and --aicb-… to the new names when it loads — but new rules should use maicb.

Spacing from the edge

Position is driven by two custom properties. Set them on .maicb-root and both the launcher and the panel follow:

.maicb-root {
  --maicb-offset-side: 40px;
  --maicb-offset-bottom: 32px;
}

Defaults are 20px each. These apply to desktop only — the mobile breakpoints set their own tighter values, so a large desktop offset cannot push the widget off a phone screen.

Colour variables

Every colour the widget paints is a CSS custom property, so you can override one without restating the rule it belongs to. These are the same variables the dashboard colour pickers write.

/* Override just the two you care about. */
.maicb-root {
  --maicb-bot-bubble: #EEF2FF;
  --maicb-bot-text: #1E1B4B;
}

A colour set here overrides the dashboard value for whichever palette is showing. In most cases you should not need to — set the colours in Widget appearance and Minaya picks the right palette for you. Reach for CSS when you want something the pickers do not cover, such as a gradient:

.maicb-header {
  background: linear-gradient(135deg, #075CE5, #0344B5);
}

Minaya resolves light or dark in JavaScript rather than leaving it to a media query, so it can follow your site’s own theme toggle and not just the operating system. That means a @media (prefers-color-scheme: dark) block in your custom CSS will not track your site’s toggle — scope dark overrides to your own selector instead, or set the colours per palette in the dashboard. See Matching the page’s theme.

Class reference

Examples

Square, flat panel

.maicb-panel {
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid #d4d4d8;
}

Larger panel on desktop

@media (min-width: 900px) {
  .maicb-panel { width: 400px; height: 560px; }
}

Square launcher

.maicb-launcher {
  border-radius: 12px;
  width: 52px;
  height: 52px;
}

Restyle links in replies

.maicb-link {
  color: #7c3aed;
  text-decoration-thickness: 2px;
}

Hide the feedback buttons

.maicb-feedback { display: none; }

Preview accuracy

The dashboard preview mirrors the main elements — panel, header, messages, bubbles, footer, input, send, plus the launcher and greeting bubble and the pre-chat form — using the same class names, so most rules show up there.

It is an approximation rather than the real widget: it is plain DOM, not a shadow root, and omits the typing indicator and feedback buttons. Positioning offsets will not visibly move it either, since the preview sits inside a fixed box rather than a viewport — and for the same reason the launcher is drawn opposite the panel rather than beneath it.

Test placement changes on a real page. See Install the widget.

A caution

Custom CSS is applied verbatim and is not validated. A malformed rule can break the widget's layout for every visitor, so make one change at a time and check the result on a real page.