Widget

CSS and styling.

The widget is intentionally styled from Minyut settings instead of your site stylesheet. This keeps installation predictable across themes, builders, and ecommerce templates.

Dashboard styling

Use the Appearance tab in chatbot settings for styling that should apply everywhere the widget is installed.

Primary color: launcher, send button, and visitor message bubbles.
Position: bottom-right or bottom-left.
Bot name: widget header and launcher label.
Welcome message: first bot message in a new conversation.
Placeholder: input hint shown before the visitor types.

Page-level overrides

Use script attributes when one page needs a different widget color, greeting, or position.

html

<script
  src="https://minyut.com/widget.js"
  data-token="YOUR_EMBED_TOKEN"
  data-color="#0f766e"
  data-position="bottom-left"
  data-greeting="Ask me about sizing, shipping, or returns."
  async
></script>

CSS isolation

The widget uses Shadow DOM, so your site CSS usually cannot target internal widget elements. That is deliberate: global selectors, resets, and builder styles should not distort the chat panel.

Layering

The launcher and panel use a high fixed z-index so they stay above common page content. If another app also uses a very high overlay, move Minyut to the opposite corner with data-position or dashboard settings.

Mobile behavior

On narrow screens, the panel expands to the viewport so visitors have enough room to read and type. Test pages with sticky cookie banners or mobile support buttons to make sure the launcher is not hidden.