Anmelden
Kostenlos · Offen · 9 KB

Bewertungen auf jeder Website einbetten

Ein script-Tag — funktioniert auf WordPress, Shopify, Webflow, React, Vue, reinem HTML. Das Widget erkennt automatisch Schriftart, Farben und Dark Mode deiner Seite. Jede Einstellung lässt sich mit data-Attributen überschreiben.

Anpassen

Wähle, wie es auf deiner Seite aussehen soll

Hex-Farbe — überschreibt den automatisch erkannten Akzent

Einbettungs-Code

<div data-compasly-widget="YOUR_WIDGET_ID"></div>
<script async src="https://compasly.com/widget.js"></script>

Ersetze YOUR_WIDGET_ID durch die Widget-ID aus deinem Dashboard, nachdem du das Unternehmen beansprucht hast.

Live-Vorschau

Vorschau von diabloshop-ru. Auto-Adapt liest Schrift + Farben dieser Seite.

Noch kein Test-Widget. Führe aus, um eines zu erzeugen, und kehre zurück. npm run seed:widget

Anpassung

Passt sich an deinen Stil an

Standardmäßig liest das Widget die font-family der Seite, die Textfarbe und gängige CSS-Variablen (--brand, --primary, --accent). Deaktivieren mit data-adapt='false'.

Hell oder dunkel

data-theme='light' oder 'dark'. Der Auto-Modus richtet sich nach der Helligkeit des Seitenhintergrunds.

8 Sprachen

data-lang='ru' (oder en, es, de, ko, zh, ja, ar). 'auto' nutzt das html lang-Attribut.

Lazy-loading

Standardmäßig wird erst geladen, wenn das Widget im Sichtbereich ist. data-lazy='false' lädt sofort.

Markenfarbe überschreiben

data-accent='#FF4500' (oder beliebiger Hex-Wert) überschreibt den automatisch erkannten Akzent.

Origin-Sperre (optional)

Im Dashboard kannst du Domains einschränken, von denen das Widget geladen werden darf. Standard: alle Origins erlaubt (kein CORS-Preflight).

Eigene Styles (fortgeschritten)

Das Widget rendert in einem Shadow DOM für Stil-Isolation. Farben kannst du dennoch via CSS-Variablen auf dem Host-Element überschreiben:

<div data-compasly-widget="wgt_..."
     style="--cp-accent: #FF4500;
            --cp-font: 'Inter', sans-serif;
            --cp-radius: 8px;">
</div>

Verfügbare CSS-Variablen: --cp-accent, --cp-font, --cp-radius, --cp-fg, --cp-bg.

Anleitungen pro Plattform

WordPress

  1. Custom HTML block in your editor
  2. Or paste into footer.php before </body>

Shopify

  1. Online Store → Themes → Edit code → theme.liquid
  2. Paste snippet before </body>

Webflow

  1. Page settings → Custom code → Footer
  2. Paste snippet

React / Next.js

  1. <Script src="/widget.js" async/>
  2. Render <div data-compasly-widget="..."/> anywhere

Vue / Nuxt

  1. nuxt.config head script
  2. <div data-compasly-widget="..."/> in templates

Plain HTML

  1. Paste snippet inside <body>
  2. One script tag per page