---
title: "Cuestionarios de onboarding"
description: "Añade cuestionarios interactivos a tus onboardings de Adapty para recopilar preferencias de usuario y crear flujos personalizados, sin necesidad de código."
---

Convierte tu onboarding en una conversación bidireccional: añade cuestionarios en el editor sin código de Adapty para recopilar preferencias, segmentar usuarios y [ramificar flujos](onboarding-user-engagement#onboarding-flow-branching) según las respuestas en tiempo real. Empezarás a obtener información en minutos, sin escribir una sola línea de código.

## Añadir cuestionarios \{#add-quizzes\}

Puedes añadir distintos tipos de cuestionario —texto, emojis u opciones con imagen— para recopilar información del usuario:

1. Haz clic en **Add** en la parte superior izquierda.
2. Selecciona **Quiz** y elige uno:
- **Simple**: Lista de selección única con opciones de texto. Úsala para segmentar usuarios por un atributo principal (p. ej., "¿Cuál es tu rol?").
- **Multiple choice**: Permite seleccionar más de una opción de texto. Ideal para conocer todos los intereses del usuario (p. ej., funciones favoritas).
- **Emoji**: Opciones representadas con emojis para respuestas rápidas. Perfecto para verificaciones de opinión rápidas (p. ej., "¿Cuánto te entusiasma esto?").
- **Media picker**: Sube imágenes o vídeos como opciones seleccionables. Ideal para elecciones que dependen de lo visual (p. ej., elige tu tema favorito).
- **Rating**: Los usuarios valoran en una escala numérica o de estrellas. Úsalo para medir satisfacción o confianza (p. ej., valora esta función del 1 al 5).
- **Popup question**: Muestra una pregunta en forma de modal. Excelente para preguntas que requieren respuesta inmediata.
3. Configura el cuestionario en el panel derecho:
- **Required**: Hace que responder sea obligatorio antes de continuar.
- **Layout**: Elige entre lista o cuadrícula de imágenes.
- **Multiple answers**: Permite selección múltiple (desactiva las opciones de navegación del cuestionario).
- **Show checkboxes**: Muestra casillas de verificación cuando la selección múltiple está activada.
4. Configura las opciones del cuestionario en el panel derecho:
- **Label**: Texto que se muestra para cada opción.
- **Value**: El valor que se envía a los análisis y a los payloads de webhooks.
- **Image type**: Sube contenido multimedia o usa emojis.
5. Configura las [acciones](onboarding-actions) que se dispararán cuando el usuario seleccione una opción.

Consulta más información en la [guía para diseñar cuestionarios](#how-to-design-quizzes) a continuación.

   <img src="/assets/shared/img/add-quiz.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

### Cómo diseñar cuestionarios \{#how-to-design-quizzes\}

A continuación se muestra un ejemplo sencillo de configuración de un cuestionario.

Supongamos que tienes una app de recetas y quieres saber si tus usuarios son veganos o vegetarianos, y luego conocer más sobre sus preferencias según su respuesta.

#### Paso 1. Añadir pantallas \{#step-1-add-screens\}

1. Añade una nueva pantalla e inserta un elemento **Quiz** en ella.
   
   <img src="/assets/shared/img/onboarding-user-engagement1.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
2. Añade pantallas para los distintos grupos de usuarios. En nuestro ejemplo, estas pantallas recopilarán información adicional, por lo que también contendrán cuestionarios.
   
   <img src="/assets/shared/img/onboarding-user-engagement2.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
3. Añade una pantalla final para indicar que el onboarding ha terminado y que los usuarios pueden ir directamente a la app.
   
   <img src="/assets/shared/img/onboarding-user-engagement3.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '400px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

#### Paso 2. Configurar la navegación \{#step-2-configure-navigation\}

1. Para configurar la navegación dinámica, selecciona el elemento **Options** en la primera pantalla del cuestionario. En la sección **Behavior**, añade **Action on Option**.

    Como queremos redirigir a los usuarios a distintas pantallas según sus respuestas, selecciona **Navigate** como acción, elige **Dynamic** en **Data** y selecciona tu elemento **Options** en **State**. Luego asocia cada opción con una pantalla.

   
   <img src="/assets/shared/img/onboarding-user-engagement4.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

2. En ambas pantallas condicionales, configura el botón de navegación. Como necesitamos omitir la segunda pantalla condicional, apunta el botón de navegación directamente a la pantalla que quieres mostrar a continuación.

:::tip
Si quieres personalizar el propio onboarding según las respuestas del cuestionario, consulta la guía de [navegación](onboarding-navigation-branching#dynamic-navigation) o la de [uso de variables](onboarding-variables).
:::

   
   <img src="/assets/shared/img/onboarding-user-engagement5.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

## Personalización del cuestionario \{#quiz-customization\}

Más allá del [diseño básico de elementos](onboarding-layout#element-layout), puedes personalizar la apariencia del cuestionario:

1. Selecciona el elemento del cuestionario en el panel izquierdo.
2. Ve a **Styles** en el menú derecho.
3. Ajusta estos parámetros:
- **Options**: Altura, relleno, fondo, redondez, borde y color del borde.
- **Text**: Color, fuente y alineación.
- **Pressed State**: Fondo, color del texto y color del borde.

:::tip
Tras personalizar un elemento del cuestionario, puedes hacer clic en **Apply styles to all options** en la parte inferior para aplicar los mismos estilos en todas las pantallas del onboarding de una sola vez.
:::

   <img src="/assets/shared/img/quiz-customization.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

## Guardar respuestas del cuestionario \{#save-quiz-answers\}

También puedes procesar las respuestas del cuestionario en el código de tu app para almacenarlas o utilizarlas en tu aplicación.

Para ello, debes gestionar el evento de respuesta del cuestionario en el código de la app. Consulta la guía de tu plataforma:

- [iOS](ios-handling-onboarding-events)
- [Android](android-handle-onboarding-events)
- [React Native](react-native-handling-onboarding-events)
- [Flutter](flutter-handling-onboarding-events)