Das Widget gestalten

Selektoren

Sprich diese Klassen in deinem CSS an. Der Vertrag ist über Minor-Releases stabil: Wir fügen neue Klassen hinzu, benennen bestehende aber ohne Major-Release nie um und entfernen sie nicht.

Die alten Kurznamen (.trigger, .popover, …) laufen noch ein Minor-Release lang neben den Klassen mit Präfix mit. Steig jetzt auf .opini-* um: Die Aliase fallen im Release danach weg.

Wo du es einfügst

Öffne in deinem Projekt Einstellungen → Widget, klapp Eigenes CSS (erweitert) auf und füge dein Stylesheet in das Textfeld ein. Speichern, und beim nächsten Seitenaufruf auf deiner Website ist es aktiv. Das CSS wird nach dem eingebauten Stylesheet in den Shadow Root eingefügt, die Reihenfolge reicht also, um jede eingebaute Regel zu überschreiben. Kein Wettrüsten mit !important.

Shadow DOM begrenzt die Reichweite: Dein CSS trifft das Widget und sonst nichts auf der Seite.

Beispiele

Drei Ausgangspunkte zum Kopieren. Jeder passt so, wie er ist, ins Feld Eigenes CSS.

Zentrierter Dialog

Setz das Popover in die Bildschirmmitte, statt es an der Ecke des Buttons zu verankern.

/* Centered modal — drop the corner anchor and put the popover
   in the middle of the screen. */
.opini-popover {
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 24px));
  border-radius: 20px;
}
.opini-trigger {
  background: #111827;
  color: #f9fafb;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

Dunkel und edel

Serifen-Überschrift, feiner Rahmen, Akzent in Ochsenblut. Passt zu widget_theme = "dark".

/* Dark editorial — serif headline, hairline border, oxblood
   accent. Pair with widget_theme = "dark" in Settings. */
.opini-popover {
  background: #0b0b0d;
  border: 1px solid #1f1f24;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.opini-title {
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.opini-sub { color: #8b8b95; font-style: italic; }
.opini-submit {
  background-image: none !important;
  background: #7c1d2a;
  border-radius: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.opini-submit:hover { background: #92242f; }

Schlanker Hinweis in der Ecke

Mach den Button zu einem Kreis und das Popover zu einem kompakten Textfeld, für Seiten, auf denen Feedback eine schnelle Randnotiz ist.

/* Slim corner toast — hide the header, shrink the popover,
   and turn the launcher into a single ▸ character. */
.opini-popover {
  width: 320px;
  border-radius: 14px;
}
.opini-head { display: none; }
.opini-message { min-height: 64px; }
.opini-trigger {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  font-size: 0;
}
.opini-trigger::before {
  content: "▸";
  font-size: 18px;
  line-height: 1;
}

Grenzen

• Bis zu 32 KB CSS pro Projekt.
• </style und <script werden abgelehnt (sie würden aus dem eingefügten <style>-Tag ausbrechen).
• NUL-Bytes werden abgelehnt.
• Eigene Schriften: Binde per @import eine Google-Fonts-URL in deinem CSS ein; das Widget lädt sie im Browser des Besuchers. Opini hostet keine Schriftdateien.
• Wir parsen das CSS nicht: Ungültiges CSS wird einfach nicht angewendet, wie überall.