登录
免费 · 开源 · 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'。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