@satify/widget-sdk

Satify Survey Widget

Put a survey on your website in 2 minutes.

modal · drawer · popover · embed — 0 dependencies · ~14 KB gzip · Shadow DOM isolated

English · Español ↓

What is this?

It shows Satify Survey surveys inside any website: as a centered window (modal), a sliding panel (drawer), a floating card (popover), or embedded in the page (embed).

You don't need to design or code anything: create the survey in the dashboard, paste a snippet into your site, and the widget handles the rest.

Full documentation — every option with its default value, events, HTML attributes, and a live demo: satify-survey.app/producto/widget-embebido

Get started in 2 minutes

Pick the path that fits you. All three show the same survey.

HTML only (no coding)

<div data-satify-modal="YOUR-SURVEY-ID"></div>
<script src="https://unpkg.com/@satify/widget-sdk@3/dist/cdn.global.js"></script>

A floating button appears; clicking it opens the survey. That's it.

With npm (React, Vue, any framework)

npm install @satify/widget-sdk

import { createModal } from "@satify/widget-sdk";

createModal("YOUR-SURVEY-ID");

From a CDN (with <script>)

<script src="https://unpkg.com/@satify/widget-sdk@3/dist/cdn.global.js"></script>
<script>
  Satify("modal", "YOUR-SURVEY-ID");
</script>

Where do I find my Survey ID? In satify-survey.app → Surveys → open your survey → Share tab → copy the ID.

Choose how it looks

The activator is what the user taps to open it — a floating button (default) or an edge tab (activator: "tab"). It combines with any format; embed is always visible and needs none.

createDrawer("abc123", {
  activator: "tab",
  tab: { side: "right", text: "Feedback" },
});

Choose when it appears

createModal("abc123", {
  trigger: { type: "auto", delay: 5000, frequency: "weekly" },
});

Triggers: manual (default) · auto · scroll · exit-intent · event · url-match Frequency: once · daily · weekly · always — stored in localStorage, no cookies.

Control it from code

const widget = createModal("abc123", {
  appearance: { primaryColor: "#7c3aed", theme: "dark" },
  locale: "en", // widget UI language: "es" | "en"
});

widget.open();                      // queued automatically if still loading
widget.identify({ id: "user-1" }); // link responses to a known user
widget.on("submit", (responses) => console.log(responses));
widget.destroy();                   // remove it (always call this in SPA cleanup)

Events: ready · beforeShow (return false to cancel) · show · close · started · questionChanged · submit · error. Full TypeScript types included — no @types/ package needed.

Good to know

• Dashboard + code: the widget merges the configuration saved in the Satify Survey dashboard with your code (defaults → dashboard → code). If both set the same thing, code wins.
• Fail-safe: if anything fails, every method becomes a no-op — the widget never breaks your app.
• Drafts: progress auto-saves to localStorage and expires after 1 hour.
• Test mode: testMode: true ignores frequency limits while you develop.
• Browsers: Chrome 66+ · Firefox 63+ · Safari 13.1+ · Edge 79+.

frame-src   https://satify-survey.app;
connect-src https://satify-survey.app;
style-src   'unsafe-inline';

Satify("modal", "abc123", { nonce: "YOUR_CSP_NONCE" });

Full documentation

The complete reference lives in the docs — in Spanish and English:

satify-survey.app/producto/widget-embebido

• Every configuration option with its type and real default value
• Instance methods, events and payloads
• HTML data-satify-* attributes for the no-code mode
• Live demo of the 4 formats

Support & changelog

• Questions or problems? Help Center · contacto@humancreativelab.cl
• Release history: CHANGELOG

License

MIT Human Creative Lab — made for Satify Survey.

Español

¿Qué es esto?

Muestra encuestas de Satify Survey dentro de cualquier sitio web: como ventana centrada (modal), panel deslizante (drawer), tarjeta flotante (popover) o incrustada en la página (embed).

No necesitas diseñar ni saber programar: creas la encuesta en el panel, pegas un fragmento en tu sitio y el widget se encarga del resto.

Documentación completa — cada opción con su valor por defecto, eventos, atributos HTML y demo en vivo: satify-survey.app/producto/widget-embebido

Empieza en 2 minutos

Elige el camino que va contigo. Los tres muestran la misma encuesta.

Solo HTML (sin programar)

<div data-satify-modal="TU-SURVEY-ID"></div>
<script src="https://unpkg.com/@satify/widget-sdk@3/dist/cdn.global.js"></script>

Aparece un botón flotante; al hacer clic se abre la encuesta. Eso es todo.

Con npm (React, Vue, cualquier framework)

npm install @satify/widget-sdk

import { createModal } from "@satify/widget-sdk";

createModal("TU-SURVEY-ID");

Desde un CDN (con <script>)

<script src="https://unpkg.com/@satify/widget-sdk@3/dist/cdn.global.js"></script>
<script>
  Satify("modal", "TU-SURVEY-ID");
</script>

¿Dónde encuentro mi Survey ID? En satify-survey.app → Encuestas → abre tu encuesta → pestaña Compartir → copia el ID.

Elige cómo se ve

El activador es lo que el usuario toca para abrirla: un botón flotante (por defecto) o una pestaña lateral (activator: "tab"). Se combina con cualquier formato; embed siempre está visible y no usa activador.

createDrawer("abc123", {
  activator: "tab",
  tab: { side: "right", text: "Feedback" },
});

Elige cuándo aparece

createModal("abc123", {
  trigger: { type: "auto", delay: 5000, frequency: "weekly" },
});

Disparadores: manual (por defecto) · auto · scroll · exit-intent · event · url-match Frecuencia: once · daily · weekly · always — se guarda en localStorage, sin cookies.

Contrólalo desde tu código

const widget = createModal("abc123", {
  appearance: { primaryColor: "#7c3aed", theme: "dark" },
  locale: "es", // idioma de la interfaz del widget: "es" | "en"
});

widget.open();                      // se encola solo si aún está cargando
widget.identify({ id: "user-1" }); // vincula las respuestas a un usuario conocido
widget.on("submit", (respuestas) => console.log(respuestas));
widget.destroy();                   // quítalo (llámalo siempre en la limpieza de tu SPA)

Eventos: ready · beforeShow (devuelve false para cancelar) · show · close · started · questionChanged · submit · error. Tipos de TypeScript incluidos — sin paquete @types/ aparte.

Datos útiles

• Panel + código: el widget combina la configuración guardada en el panel de Satify Survey con la de tu código (por defecto → panel → código). Si defines lo mismo en ambos lados, gana lo del código.
• A prueba de fallos: si algo falla, todos los métodos pasan a no hacer nada — el widget nunca rompe tu aplicación.
• Borradores: el progreso se autoguarda en localStorage y expira tras 1 hora.
• Modo de prueba: testMode: true ignora los límites de frecuencia mientras desarrollas.
• Navegadores: Chrome 66+ · Firefox 63+ · Safari 13.1+ · Edge 79+.

frame-src   https://satify-survey.app;
connect-src https://satify-survey.app;
style-src   'unsafe-inline';

Satify("modal", "abc123", { nonce: "TU_NONCE_CSP" });

Documentación completa

La referencia completa vive en la documentación — en español e inglés:

satify-survey.app/producto/widget-embebido

• Cada opción de configuración con su tipo y valor por defecto real
• Métodos de la instancia, eventos y sus datos
• Atributos HTML data-satify-* para el modo sin código
• Demo en vivo de los 4 formatos

Soporte y novedades

• ¿Dudas o problemas? Centro de ayuda · contacto@humancreativelab.cl
• Historial de versiones: CHANGELOG

Licencia

MIT Human Creative Lab — hecho para Satify Survey.