Sign in
Free · Open · 9 KB

Embed your reviews on any website

One script tag — works on WordPress, Shopify, Webflow, React, Vue, plain HTML. The widget auto-detects your site's font, colors and dark mode and blends in naturally. Override any setting with data-attributes.

Customize

Pick how it should look on your page

Hex color — overrides auto-detected accent

Embed snippet

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

Replace YOUR_WIDGET_ID with the widget id from your dashboard after creating one for your claimed business.

Live preview

Previewing diabloshop-ru. Auto-adapt reads this page's font + colors.

No widget seeded yet. Run to create a demo, then come back. npm run seed:widget

Customization

Auto-adapt to your style

By default the widget reads your page font-family, body color, and a list of common CSS variables (--brand, --primary, --accent) to match your design. Disable with data-adapt='false'.

Light or dark

Set data-theme='light' or data-theme='dark'. Auto mode picks based on your page background luminance.

8 languages

Set data-lang='ru' (or en, es, de, ko, zh, ja, ar). Or 'auto' uses your html lang attribute.

Lazy-loaded

By default the widget only fetches when scrolled into view. Set data-lazy='false' to fetch immediately.

Brand color override

Set data-accent='#FF4500' (or any hex) to override the auto-detected accent.

Origin lock (optional)

In your dashboard, restrict which domains can load the widget. By default any origin works (no CORS preflight).

Style override (advanced)

The widget renders inside a Shadow DOM for style isolation. You can still override colors by setting CSS variables on the host element:

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

Available CSS variables: --cp-accent, --cp-font, --cp-radius, --cp-fg, --cp-bg.

Platform guides

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