로그인
무료 · 오픈 · 9 KB

어떤 웹사이트에도 리뷰를 임베드하세요

단 한 줄의 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'. 자동 모드는 페이지 배경의 밝기로 결정합니다.

8개 언어

data-lang='ru' (또는 en, es, de, ko, zh, ja, ar). 'auto'는 html lang 속성을 사용합니다.

지연 로드

기본적으로 위젯이 화면에 들어올 때만 데이터를 가져옵니다. data-lazy='false'는 즉시 로드합니다.

브랜드 색상 덮어쓰기

data-accent='#FF4500' (또는 hex 값)으로 자동 감지된 강조색을 덮어씁니다.

Origin 제한 (선택)

대시보드에서 위젯을 로드할 수 있는 도메인을 제한할 수 있습니다. 기본은 모든 origin 허용입니다(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