Empezar gratis
Iterar
Empezar

Instalar el SDK

El widget vive en un solo archivo iterar.js (~15-20kb gzipped) sin dependencias externas. Servido desde Cloudflare con cache agresivo.

Opción A — Script tag (recomendado)

La forma más rápida: pegás un <script> antes de cerrar el </body>. Funciona en cualquier sitio (Webflow, Framer, Next.js, WordPress, Astro).

index.html
html
<script
  src="https://iterar.io/iterar.min.js"
  data-project-key="lpbk_pub_xxxxxxxx"
  data-mode="floating"
  data-position="bottom-right"
  data-language="auto"
  defer
></script>
Project key pública
La data-project-key empieza con lpbk_pub_ y es segura para publicar en el frontend. Validamos el dominio de origen contra la lista de allowed_origins de tu proyecto.

Opción B — npm + bundler

bash
bash
npm install @loopback/sdk
# o pnpm add @loopback/sdk
# o bun add @loopback/sdk
app.tsx
ts
import { Iterar } from "@loopback/sdk";

Iterar.init({
  projectKey: "lpbk_pub_xxxxxxxx",
  mode: "floating",          // 'floating' | 'card'
  position: "bottom-right",  // solo floating
  target: "#feedback",       // solo card
  language: "auto",          // 'auto' | 'es' | 'en' | 'pt'
  theme: { primaryColor: "#22d3ee", background: "#0a0a0a" },
  onOpen: () => console.log("widget abierto"),
  onSubmit: (fb) => console.log("enviado:", fb),
});

Asociar feedback a un usuario logueado

Si tu app tiene login, llamá Iterar.identify() después del login. El feedback va a aparecer en tu bandeja con el email y la metadata adjunta.

después del login
ts
Iterar.identify({
  email: "user@example.com",
  metadata: { plan: "pro", userId: "u_123" },
});

Flujo de captura del visitor (3 pasos)

Cuando un visitor anónimo manda feedback por primera vez en tu sitio, el widget hace tres preguntas en orden:

  • Paso 1 — Contenido. Textarea principal + chips de categoría (Idea / Bug / Mejora / Integración). Botón Continuar.
  • Paso 2 — Nombre. Para que el visitor aparezca como autor en el roadmap público (sidebar "Más útil"). Obligatorio. Botón Continuar.
  • Paso 3 — Email. Para avisarle cuando cambie el estado de su pedido (in_progress / completed) o cuando se publique un changelog vinculado. Obligatorio. Botón Enviar.

Al completar los 3 pasos guardamos { name, email } en localStorage del sitio del cliente bajo la key iterar_identity_v1 con TTL de 365 días. La próxima vez que el mismo visitor abra el widget en el mismo dominio, va directo al paso 1 + envía. Si limpia cookies/storage, vuelve a pedirle nombre + email.

Cross-site identity
El storage es per-domain — no funciona cross-site entre clientes distintos. Los navegadores modernos partitionan storage de terceros y no hay forma trivial de tener un identity broker compartido sin un iframe + Storage Access API (no incluido en v1).

API completa

  • Iterar.init(opts) — monta el widget. Si ya está montado, hace merge de opciones.
  • Iterar.open() — abre el widget de forma programática (útil para un botón en tu UI).
  • Iterar.close() — colapsa el widget.
  • Iterar.identify(payload) — asocia al usuario actual.
  • Iterar.reset() — limpia la identificación (útil en logout).
  • Iterar.destroy() — desmonta y libera memoria.
Local dev
En localhost el SDK no exige Cloudflare Turnstile para facilitar desarrollo. En producción es obligatorio.
Instalar el SDK · Iterar