Ask Users - Online Forms and Surveys Builder

Ask users

BETA

Encuestas Formularios Blog Documentación Integraciones Precios

Iniciar sesión ComenzarIniciar

Guía de integración de widgets

Instrucciones completas para integrar encuestas en línea y widgets de comentarios en tu sitio web.

Documentación de widgets

Configuración de widgets

Aprende sobre modos de visualización, posicionamiento, tamaño, animaciones y configuración de comportamiento

Más información

Reglas de visualización

Controla cuándo y a quién se muestran los widgets usando reglas de orientación y disparadores de comportamiento

Más información

Disparadores de widgets

Configura disparadores basados en botones, íconos y condiciones con control de frecuencia

Más información

Estilos de widgets

Personaliza íconos, botones, colores y crea hermosos diseños de widgets

Más información

Security and CSP

Configure Content Security Policy headers for widget integration

Más información

Web Components

Usa Shadow DOM para aislamiento CSS completo al incrustar en sitios de terceros

Más información

docs.widgets.cards.reactLibrary.title

docs.widgets.cards.reactLibrary.description

Más información

1

Crea tu cuenta

Regístrate en Ask Users y elige el plan que se ajuste a tus necesidades. Recibirás una clave API que usarás para autenticar tus widgets.

Regístrate ahora

Añade scripts a tu sitio web

Añade estas etiquetas de script a la sección <head> de tu HTML. Reemplaza YOUR_API_KEY con tu clave API real del panel.

<!-- Add these to your <head> section -->
<script src="https://askusers.org/widget/widget-common.js"></script>

<!-- For survey widgets -->
<script src="https://askusers.org/widget/survey-widget.js?api-key=YOUR_API_KEY"></script>

<!-- For form widgets (waitlist, feedback, contact forms, feature requests, etc.) -->
<script src="https://askusers.org/widget/form-widget.js?api-key=YOUR_API_KEY"></script>

Nota: Solo incluye los scripts para los tipos de widget que planeas usar.

Añade el HTML del widget

Coloca el HTML del widget donde quieras que aparezca el widget en tu página.

Widget de encuesta en línea

<div class="askusers-survey-widget"
     data-survey-id="YOUR_SURVEY_ID"
     data-context-id="product-feedback"
     data-context-type="survey">
</div>

Widget de formulario (lista de espera, contacto, comentarios)

<div class="askusers-form-widget"
     data-form-id="YOUR_FORM_ID"
     data-context-id="product-launch"
     data-context-type="product">
</div>

Crea tu formulario en el panel y usa plantillas como "Lista de Espera / Registro de Email", "Comentarios Rápidos (Pulgares)", "Formulario de Contacto" o "Solicitud de Función". Reemplaza YOUR_FORM_ID con el ID de tu formulario.

Prueba tu integración

Una vez que hayas añadido los scripts y el HTML, prueba tus widgets para asegurarte de que funcionan correctamente:

Verifica que los widgets se carguen y se muestren correctamente
Prueba los envíos de formularios (aparecerán en tu panel)
Verifica que el estilo coincida con el diseño de tu sitio
Prueba en diferentes dispositivos y tamaños de pantalla

Configuración avanzada

Personalización de estilos

Personaliza la apariencia del widget usando propiedades CSS personalizadas. Añádelas al atributo style del elemento del widget.

Ejemplo: Colores personalizados de marca

<div class="askusers-form-widget"
     data-form-id="YOUR_FORM_ID"
     data-context-id="my-product"
     data-context-type="launch"
     style="
       --askusers-color-primary: #8b5cf6;
       --askusers-color-background: #ffffff;
       --askusers-color-text: #1f2937;
       --askusers-color-success: #10b981;
     ">
</div>

Múltiples widgets en una página

Puedes usar múltiples widgets en la misma página dándole a cada uno un context-id único.

<!-- Survey widget -->
<div class="askusers-survey-widget"
     data-survey-id="YOUR_SURVEY_ID"
     data-context-id="product-feedback"
     data-context-type="survey">
</div>

<!-- Form widget for feedback -->
<div class="askusers-form-widget"
     data-form-id="YOUR_FEEDBACK_FORM_ID"
     data-context-id="article-123"
     data-context-type="article">
</div>

<!-- Form widget for feature requests -->
<div class="askusers-form-widget"
     data-form-id="YOUR_FEATURE_REQUEST_FORM_ID"
     data-context-id="product-roadmap"
     data-context-type="roadmap">
</div>

Integración con frameworks

Para aplicaciones de una sola página (React, Vue, Angular, etc.), necesitas inicializar manualmente los widgets cuando los componentes se montan o las rutas cambian, ya que la inicialización automática solo ocurre en la carga de la página.

React

function MyComponent() {
  useEffect(() => {
    // Manual initialization required for SPAs
    if (window.AskUsersWidget) {
      // Initialize survey widgets
      window.AskUsersWidget.initializeSurveyWidgets?.();
      // Initialize form widgets (handles all form types)
      window.AskUsersWidget.initializeFormWidgets?.();
    }
  }, []);

  return (
    <div
      className="askusers-form-widget"
      data-form-id="YOUR_FORM_ID"
      data-context-id="my-component"
      data-context-type="feedback"
    />
  );
}

Vue.js

<template>
  <div
    class="askusers-form-widget"
    data-form-id="YOUR_FORM_ID"
    data-context-id="my-component"
    data-context-type="feedback"
  />
</template>

<script>
export default {
  mounted() {
    // Manual initialization required for SPAs
    if (window.AskUsersWidget) {
      window.AskUsersWidget.initializeSurveyWidgets?.();
      window.AskUsersWidget.initializeFormWidgets?.();
    }
  }
}
</script>

Angular

@Component({
  selector: 'app-my-component',
  template: `
    <div
      class="askusers-form-widget"
      data-form-id="YOUR_FORM_ID"
      data-context-id="my-component"
      data-context-type="feedback">
    </div>
  `
})
export class MyComponent implements OnInit {
  ngOnInit() {
    // Manual initialization required for SPAs
    if ((window as any).AskUsersWidget) {
      (window as any).AskUsersWidget.initializeSurveyWidgets?.();
      (window as any).AskUsersWidget.initializeFormWidgets?.();
    }
  }
}

Svelte

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    // Manual initialization required for SPAs
    if (window.AskUsersWidget) {
      window.AskUsersWidget.initializeSurveyWidgets?.();
      window.AskUsersWidget.initializeFormWidgets?.();
    }
  });
</script>

<div
  class="askusers-form-widget"
  data-form-id="YOUR_FORM_ID"
  data-context-id="my-component"
  data-context-type="feedback"
/>

Importante: Llama al método init apropiado cada vez que renderices un componente de widget. Los widgets manejan múltiples inicializaciones de manera elegante y solo inicializarán nuevos widgets que no hayan sido procesados.

Web Components (Shadow DOM)

Para aislamiento CSS completo al incrustar widgets en sitios de terceros, usa nuestros elementos personalizados Web Component. Estos usan Shadow DOM para evitar que los estilos del sitio anfitrión afecten la apariencia del widget.

Cuándo usar Web Components

Usa Web Components cuando:

Incrustando en sitios de terceros donde no controlas el CSS
El sitio anfitrión tiene estilos globales que entran en conflicto con el widget
Necesitas consistencia visual garantizada en diferentes sitios

Usa incrustación estándar div cuando:

Incrustando en tu propio sitio donde controlas los estilos
Quieres que el widget herede algunos estilos del sitio anfitrión
Prefieres la sintaxis de atributos data-*

Uso de Web Components

Los Web Components usan atributos HTML limpios en lugar de atributos data-*:

Widget de formulario

<askusers-form
  form-id="YOUR_FORM_ID"
  display-mode="inline"
  prefill-email="user@example.com"
  prefill-name="John Doe"
></askusers-form>

Widget de encuesta

<askusers-survey
  survey-id="YOUR_SURVEY_ID"
  display-mode="popup"
  trigger-style="icon"
  position="bottom-right"
></askusers-survey>

Mapeo de atributos

Atributo Web Component	Atributo data-* equivalente
`form-id`	`data-form-id`
`survey-id`	`data-survey-id`
`display-mode`	`data-display-mode`
`prefill-email`	`data-prefill-email`
`trigger-style`	`data-trigger-style`

Soporte de TypeScript

Si estás usando TypeScript con React/JSX y obtienes errores de tipo como:

Property 'askusers-form' does not exist on type 'JSX.IntrinsicElements'

Descarga nuestro archivo de declaraciones de tipo y añádelo a tu proyecto:

// Download from: https://askusers.org/widget/askusers-widget.d.ts
// Then add to your project:
/// <reference path="path/to/askusers-widget.d.ts" />

Las declaraciones de tipo incluyen todos los atributos soportados para los elementos personalizados askusers-form y askusers-survey.

Habilitar Web Components en la vista previa

Ve a la página de vista previa del formulario/encuesta
Desplázate hasta Configuración de visualización del widget
Encuentra la sección Opciones de incrustación
Marca Usar Web Component para aislamiento CSS
El código de incrustación generado usará la sintaxis Web Component

¿Necesitas ayuda?

Si encuentras problemas durante la configuración, estamos aquí para ayudar. Consulta nuestra documentación o contacta con soporte.

Ver ejemplos Contactar soporte