Guía de integración de widgets

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

Widget documentation

Widget configuration

Learn about display modes, positioning, sizing, animations, and behavior settings

Learn more

Display rules

Control when and to whom widgets are shown using targeting rules and behavioral triggers

Learn more

Widget triggers

Configure button, icon, and condition-based triggers with frequency control

Learn more

Widget styling

Customize icons, buttons, colors, and create beautiful widget designs

Learn more

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.

¿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