Estilizar o widget

Seletores

Use estas classes no seu CSS. O contrato é estável entre versões menores: adicionamos classes novas, mas nunca renomeamos nem removemos as existentes sem uma versão maior.

Os nomes curtos antigos (.trigger, .popover, …) ainda funcionam junto com as classes com prefixo por mais uma versão menor. Migre para o contrato .opini-* hoje: os apelidos saem na versão seguinte.

Onde colar

Abra Configurações → Widget do projeto, expanda CSS personalizado (avançado) e cole sua folha de estilos no campo. Salve, e o próximo carregamento da página no seu site já usa o CSS. Ele é injetado no shadow root do widget depois da folha de estilos padrão, então a ordem já basta para sobrescrever qualquer regra. Nada de guerra de !important.

O Shadow DOM limita o alcance: seu CSS afeta o widget e nada mais na página.

Exemplos

Três pontos de partida para copiar e colar. Cada um vai direto no campo CSS personalizado.

Modal centralizado

Fixe o popover no meio da tela em vez de ancorá-lo no canto do botão.

/* 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;
}

Editorial escuro

Título com serifa, borda fina, destaque cor de vinho. Combine com 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; }

Aviso compacto no canto

Reduza o botão a um círculo e o popover a um campo compacto, para sites onde o feedback é um comentário rápido.

/* 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;
}

Limites

• Até 32 KB de CSS por projeto.
• </style e <script são recusados (eles escapariam da tag <style> injetada).
• Bytes NUL são recusados.
• Fontes personalizadas: use @import com uma URL do Google Fonts no seu CSS; o widget as baixa no navegador do visitante. O Opini não hospeda arquivos de fonte.
• Não analisamos o CSS: CSS inválido simplesmente não aparece, como em qualquer lugar.