Войти
Бесплатно · Открытый · 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>

Замените YOUR_WIDGET_ID на 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) — задаёт акцентный цвет вручную.

Origin lock (опционально)

В кабинете можно ограничить домены, с которых загружается виджет. По умолчанию любые (без 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