ログイン
無料 · オープン · 9 KB

どんなサイトにもレビューを埋め込もう

1つの script タグで — WordPress、Shopify、Webflow、React、Vue、素の HTML に対応。ウィジェットは自動でサイトのフォント、色、ダークモードを検出し自然に馴染みます。任意の設定は data- 属性で上書きできます。

カスタマイズ

ページにどう表示するか選びます

Hex カラー — 自動検出のアクセントを上書きします

埋め込みコード

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

会社の認証後、ダッシュボードで作成したウィジェット ID で YOUR_WIDGET_ID を置き換えてください。

ライブプレビュー

diabloshop-ru をプレビュー中。自動適応はこのページのフォントと色を読み込みます。

デモウィジェットがまだありません。 を実行してから戻ってきてください。 npm run seed:widget

カスタマイズ

サイトのスタイルに自動適応

デフォルトでページの font-family、本文色、よく使われる CSS 変数(--brand、--primary、--accent)を読み取りデザインに合わせます。data-adapt='false' で無効化。

ライトまたはダーク

data-theme='light' か 'dark'。auto モードは背景の明るさで判定します。

8言語対応

data-lang='ru'(または en、es、de、ko、zh、ja、ar)。'auto' は html lang 属性を使用します。

遅延読み込み

デフォルトではウィジェットが画面内に入ったときだけ取得します。data-lazy='false' で即時取得。

ブランドカラー上書き

data-accent='#FF4500'(または任意の hex)で自動検出されたアクセント色を上書きします。

オリジン制限(任意)

ダッシュボードで、ウィジェットを読み込めるドメインを制限できます。デフォルトは任意のオリジン許可(CORS preflight なし)。

スタイルの上書き(上級)

ウィジェットはスタイル分離のため Shadow DOM 内でレンダリングされます。ホスト要素に CSS 変数を設定すれば色を上書きできます:

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

利用できる CSS 変数: --cp-accent, --cp-font, --cp-radius, --cp-fg, --cp-bg.

プラットフォーム別ガイド

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