Iniciar sesión
Gratis · Abierto · 9 KB

Inserta tus reseñas en cualquier sitio

Una sola etiqueta script — funciona en WordPress, Shopify, Webflow, React, Vue y HTML plano. El widget detecta automáticamente la tipografía, los colores y el modo oscuro de tu sitio. Sobrescribe cualquier ajuste con atributos data-.

Personalización

Elige cómo debe verse en tu página

Color hex — sobrescribe el acento autodetectado

Fragmento para insertar

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

Reemplaza YOUR_WIDGET_ID con el ID del widget de tu panel, una vez que reclames la empresa.

Vista previa

Mostrando: diabloshop-ru. La auto-adaptación lee la tipografía y los colores de esta página.

No hay widget de prueba. Ejecuta para crear uno y vuelve. npm run seed:widget

Personalización

Se adapta a tu estilo

Por defecto el widget lee la font-family de la página, el color del cuerpo y variables CSS comunes (--brand, --primary, --accent) para encajar con tu diseño. Desactiva con data-adapt='false'.

Claro u oscuro

data-theme='light' o 'dark'. El modo automático elige según la luminancia del fondo.

8 idiomas

data-lang='ru' (o en, es, de, ko, zh, ja, ar). 'auto' usa el atributo html lang.

Carga diferida

Por defecto el widget solo se carga cuando entra en pantalla. data-lazy='false' lo carga al instante.

Color de marca

data-accent='#FF4500' (o cualquier hex) sobrescribe el acento autodetectado.

Bloqueo de origen (opcional)

En tu panel, restringe los dominios que pueden cargar el widget. Por defecto cualquier origen funciona (sin preflight CORS).

Estilos personalizados (avanzado)

El widget se renderiza dentro de un Shadow DOM para aislar estilos. Puedes sobrescribir colores con variables CSS en el elemento contenedor:

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

Variables CSS disponibles: --cp-accent, --cp-font, --cp-radius, --cp-fg, --cp-bg.

Guías por plataforma

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