Diálogo de respuesta
Contenidos de la página
Acerca de los creativos de diálogo responsivos
El diálogo de respuesta es un tipo de intercept guiada disponible para proyectos de Información de sitios web/aplicaciones . Los cuadros de diálogo adaptables le ayudan a crear superposiciones compatibles con accesibilidad para su sitio web que se adaptan a diferentes tamaños de dispositivos.
Una vez que tenga acceso a esta función, Diálogo de respuesta Está disponible junto con otros creativos.
Creación de un cuadro de diálogo adaptable
Mantener la plataforma establecida en Sitio web .
Seleccionar Cubrir.
Hacer clic Crear Intercept.
En la página de Configuración, seleccione Apariencia.
Para usar el editor de intercept clásico, desplácese hacia abajo y seleccione Diálogo de respuesta. A continuación, sigue los pasos 7 y 8 para personalizar la apariencia de tu intercepción.
Consejo QHemos presentado el nuevo Estudio de Apariencia para la construcción de diseños de intercept . Este editor ofrece las mismas opciones de personalización que se describen en esta página, pero con opciones más avanzadas y un editor más flexible. Para empezar, utilice la plantilla "Ventana emergente central" o "Notificación en la esquina".
Complete los pasos que se describen a continuación en esta página de soporte:
Agregar Traducciones, si es necesario.
Hacer clic Agregar conexión para agregar un enlace personalizado o una encuesta al cuadro de diálogo.
Seleccione una de las siguientes opciones:
- Elija una encuesta existente: Enlace a una encuesta a la que tiene acceso. Asegúrese de que el proyecto que desea utilizar esté abierto y tenga un enlace anónimo disponible.
- Añadir un enlace externo: Pegue una URL completa.
Hacer clic Guardar conexión.
Agregar lógica de segmentación.
Agregar datos embebidos.
Ajustar configuración de intercept , como cuando se muestra la intercept y se conecta al XM Directory.
Publique los cambios.
Consejo Q: Para conocer los últimos pasos de configuración y detalles sobre el lanzamiento, también puede consultar Creación de intercepciones guiadas .
Tamaño y estilo
En el Tamaño y estilo En esta sección, puede personalizar el aspecto visual y operativo general del diseño de la siguiente manera:
Opciones de tamaño y estilo estándar
Estas son las opciones que aparecen si no utiliza un objetivo embebido y deja Mostrar la encuesta directamente en el cuadro de diálogo. deseleccionado.
- Espaciado de contenido:Configure la densidad del texto en su diseño. Puedes elegir una de las dos opciones. Compacto , Medio o Espacioso .
- Color: Configure el color de fondo del diseño eligiéndolo desde la paleta del selector de colores.
- Forma del borde: Configura el radio del borde de tu diseño. Esto determina qué tan redondeadas serán las esquinas. Puedes elegir entre Ninguna, ligeramente redondeada, moderadamente redondeada, muy redondeada.
- Sombra proyectada: Configura la sombra proyectada que rodea tu diseño. Puedes elegir entre Ninguno, Ligero, Medio, Pesado.
Mostrar Encuesta directamente en el cuadro de diálogo
Cuando seleccionas Mostrar la encuesta directamente en el cuadro de diálogo. La encuesta estará integrada en el diseño, en lugar de estar vinculada mediante un botón. Para probar la experiencia completa y precisa de la encuesta en el diseño, utilice el bookmarklet. Ver Intercepciones de prueba para más.
Consejo Q: Esta configuración anulará las opciones de visualización establecidas en los conjuntos de acciones conectados a este diseño. Para obtener más información sobre las opciones de visualización del conjunto de acciones , consulte Opciones de visualización.
Seleccionar esta opción elimina la Mensaje y Botones pestañas porque ya no tendrá un mensaje o botones en el cuadro de diálogo adaptable, aparte de lo que ya esté configurado en su encuesta objetivo . Seleccionar esta opción también significa que tendrá diferentes configuraciones de Tamaño y Estilo:
Cambiar automáticamente el tamaño del cuadro de diálogo para que se ajuste a su encuesta: Cambia automáticamente el tamaño del diálogo de respuesta para que se ajuste a la encuesta que estás mostrando en el cuadro de diálogo. La ventana se redimensionará automáticamente según la longitud de la primera página de su encuesta.
Consejo Q: El redimensionamiento automático está limitado por la altura de la ventana de su navegador. Si la primera página de tu encuesta contiene muchas preguntas, puedes acortarla, por ejemplo, moviendo las preguntas o insertando un salto de página. Sin embargo, su mejor opción para evitar que su encuesta se interrumpa es habilitar la Nueva experiencia para realizar Encuesta .
- Color: Configure el color de fondo del diseño eligiéndolo desde la paleta del selector de colores.
- Forma del borde: Configura el radio del borde de tu diseño. Esto determina qué tan redondeadas serán las esquinas. Puedes elegir entre Ninguna, ligeramente redondeada, moderadamente redondeada, muy redondeada.
- Sombra proyectada: Configura la sombra proyectada que rodea tu diseño. Puedes elegir entre Ninguno, Ligero, Medio, Pesado.
- Accesibilidad
Título del iframe: Este texto será leído por un lector de pantalla cuando el visitante navegue a la ventana incrustada.
Consejo Q: Proporcionar títulos para los Iframes durante la creación del diálogo garantiza que este sea accesible para los usuarios.
Consejo Q: Haga clic en la flecha en la parte inferior izquierda para mostrar las etiquetas de las secciones. Para mostrar solo los íconos de sección, haga clic en Ocultar etiquetas.
UTILICE UNA PLANTILLA
Si desea importar un tema de la encuesta En la configuración de estilo del creativo, haga clic Utilice una plantilla .
Los temas son creados por el administrador de la Marca/organización para el uso de los usuarios en su marca/organización. Seleccione una marca/organización del menú desplegable y luego haga clic en Importar. Si desea agregar un tema a esta lista, comuníquese con su Administrador de Marca/organización Para más información.
Al importar una plantilla de tema se ajustarán las siguientes configuraciones para el diseño:
- Color primario
- Color secundario
- Color de fondo
- Tamaño del texto de la pregunta
- Tamaño del texto de respuesta
- Espaciado de preguntas
- Contraste en primer plano
- Logotipo
Consejo Q: La configuración del diseño no guarda relación con el tema utilizado como plantilla. La configuración del elemento creativo no se actualiza si cambia el tema de la plantilla, y cambiar la configuración del elemento creativo no cambiará el tema de la plantilla.
CSS personalizado
Puede personalizar el CSS del cuadro de diálogo de respuesta según lo desee haciendo clic en el Personalizar CSS botón. Puede agregar clases y propiedades personalizadas además de las predeterminadas. Es posible que las modificaciones realizadas aquí no se reflejen en la vista previa; recuerda prueba su intercept antes del despliegue completando la configuración guiada.
Atención: El siguiente código se proporciona tal cual y requiere conocimientos de programación para implementarlo. El soporte técnico de Qualtrics no ofrece asistencia o consultoría sobre codificación personalizada. No obstante, puede preguntar a los usuarios especializados de nuestra comunidad.
-Haga clic aquí para ver el CSS predeterminado para cuadros de diálogo responsivos-
-Haga clic aquí para ver el CSS predeterminado para cuadros de diálogo responsivos-
Consejo Q: Asegúrese de reemplazar el INTERCEPT_ID en el fragmento a continuación con su Identificación de la intercepción.
/* Utilice las clases siguientes para anular los estilos de diálogo de respuesta .
Atención: El siguiente código se proporciona tal cual
y requiere conocimientos de programación para implementarlo.
El soporte técnico de Qualtrics no ofrece asistencia o consultoría sobre codificación personalizada.
En su lugar, puede preguntar a los usuarios especializados de nuestra comunidad.
Para obtener ayuda con el código personalizado, visite qualtrics*/
/* Estilo del cuadro de sombra que aparece detrás del diálogo. NOTA: Los cambios en este cuadro de sombras no se reflejarán en la vista previa */
.QSIWebResponsiveShadowBox {
/* familia de fuentes: Arial, Helvetica, sans-serif; */
/* índice z: 1; */
/* margen superior: 10px !importante; */
/* espacio en blanco: normal !importante; */
}
/* Dale estilo al desvanecimiento del contenedor */
.QSIWebResponsive-creativo-contenedor-desvanecimiento {
/* */
}
/* Dar estilo al contenedor principal del diálogo de respuesta a la web */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_contenido {
/* altura de línea: 1em !importante; */
/* margen: 0 0.5em 0 0 !importante; */
/* ancho: auto !importante; */
/* tamaño de fuente: hereda !important; */
/* peso de fuente: normal !importante; */
/* estilo de fuente: normal !importante; */
/* mostrar: en línea !importante; */
/* color: #000000 !importante; */
}
/* Dar estilo a la sección contenedora del logotipo del diseño */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_contenedor_logotipo {
/* visualización: bloque en línea !importante; */
/* margen derecho: 5px !importante; */
}
/* Dale estilo a la sección contenedora de texto del archivo diseño. Esto incluye la sección de encabezado y la sección de descripción */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_text-container {
/* display: inline-block !important; */
}
/* Dar estilo a la sección del titular del diseño */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_headline {
/* fuente: heredar !importante; */
}
/* Dar estilo a la sección de descripción del diseño */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_description {
/* fuente: heredar !importante; */
/* fondo: transparente !importante; */
/* borde: ninguno !importante; */
/* relleno: 0 !importante; */
/* vertical-align: middle !important; */
/* margen: 0 0.4em 0 0 !importante; */
/* cursor: ¡puntero!importante; */
}
/* Estiliza el contenedor que aloja el/los botón(es) */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-container {
/* display: inline-block !important; */
}
/* Aplicar estilo al primer botón del cuadro de diálogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-1 {
/* fuente: heredar !importante; */
/* relleno: .4em .4em !importante; */
/* ancho mínimo: 3em !importante; */
/* line-height: 1em !important; */
/* border-radius: 4px !important; */
/* border-width: 1px !important; */
/* border-style: solid !important; */
/* cursor: ¡puntero!importante; */
/* fondo: #FFF !importante; */
/* color: #000 !important; */
/* border-color: #000 !important; */
}
/* Aplicar estilo al segundo botón del cuadro de diálogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-2 {
/* fuente: heredar !importante; */
/* relleno: .4em .4em !importante; */
/* ancho mínimo: 3em !importante; */
/* line-height: 1em !important; */
/* border-radius: 4px !important; */
/* border-width: 1px !important; */
/* border-style: solid !important; */
/* cursor: ¡puntero!importante; */
/* fondo: #FFF !importante; */
/* color: #000 !important; */
/* border-color: #000 !important; */
}
/* Estiliza el botón que cierra el diálogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_close-btn {
/* display: inline-block !important; */
/* margin-right: 5px !important; */
}
}
Mensaje
En el Mensaje En esta sección, puede configurar el Titular y Descripción que aparece en tu diseño. El título generalmente debe ser una frase corta que capte la atención del visitante, mientras que la descripción brinda más detalles sobre por qué apareció el diseño .
La fuente se adoptará del sitio web que muestra la diseño. Tanto para el título como para la descripción, puedes personalizar el texto real. texto, fuente tamaño, y fuente peso.
Botones
En el Botones En esta sección, puede configurar opciones específicas para el número, la apariencia y el objetivo de cada botón.
- Especifica tu Texto. Esto es lo que dice el botón.
- Elige el Acción del botón A cualquiera de los dos Objetivo abierto o Descartar Intercept. Abrir Objetivo indica que este botón abrirá el objetivo que especifique en su criterios de intercept . Descartar Intercept simplemente cerrará la intercept.
- Elige tu Color de la etiqueta, Color de fondo y Color del borde utilizando la paleta selectora de color.
- Designar un Etiqueta ARIA. De forma predeterminada, los lectores de pantalla leerán el texto que especifique para la etiqueta del botón. Sin embargo, en algunos casos, es posible que desee que el lector de pantalla lea contexto adicional, como por ejemplo: "Haga clic en este botón para abrir una nueva ventana de encuesta ". En este caso, puede especificar la etiqueta ARIA para los controles de botón. Atención: Para que su diseño sea accesible, la etiqueta ARIA debe coincidir o incluir el texto del botón.
Consejo Q: Las fuentes de los botones deben configurarse explícitamente en el CSS de su sitio. Si no se especifica la fuente, los botones utilizarán la fuente predeterminada configurada por el navegador del usuario.
Logotipos e imágenes
En el Logotipos e imágenes En esta sección, puede especificar una o más imágenes/logotipos para incluir en su diseño.
Puedes optar por subir una imagen separada para Móvil o De oficina , de modo que se muestren imágenes diferentes dependiendo de si el diseño se visualiza en un navegador móvil o de escritorio. También puedes cargar la misma imagen pero con diferentes resoluciones para optimizar la visualización en los navegadores de ambos dispositivos.
Consejo Q: Si solo carga una imagen para dispositivos móviles, dicha imagen se usará tanto para navegadores móviles como de escritorio. Sin embargo, si sólo carga una imagen para el escritorio, dicha imagen sólo se utilizará para los navegadores de escritorio.
Para que la imagen cumpla con los accesibilidad , también tiene la posibilidad de especificar la Texto alternativo para acompañar las imágenes. (El texto alternativo es una función que permite a los lectores de pantalla describir una imagen a usuarios con discapacidad visual).
Animación
En el Animación En esta sección puedes elegir el tipo de animación ( Desteñir o Deslizarse hacia adentro ) lo que deseas para tu diseño tal como aparece en la pantalla.
- Mostrar cuadro de diálogo después de: El número de segundos después de que el usuario cumpla las condiciones de intercept (por ejemplo, haga clic en la aplicación) en que aparece este cuadro de diálogo.
- Establecer temporizador para cerrar el cuadro de diálogo: Determinar cuánto tiempo después de que aparece el cuadro de diálogo debe cerrarse. Anule la selección de esta opción para obligar al usuario a cerrar el cuadro de diálogo para eliminarlo de la pantalla.
Tipo de transición: Elija si el diseño se desvanece o se desliza en la pantalla cuando aparece. Si tu eliges Deslice hacia adentro animación, luego también puede seleccionar la posición final de la diseño en la pantalla (Arriba a la izquierda, Arriba a la derecha, Abajo a la izquierda, Abajo a la derecha).
Consejo Q: Usando el Deslice hacia adentro El tipo de transición hace que este diseño se comporte como un Slider Diseño.
Consejo Q: Desteñir Muestra una superposición a pantalla completa y mantiene el foco del teclado en el cuadro de diálogo. Deslizarse hacia adentro En la versión de escritorio, no se superpone a la página ni capta el foco, por lo que los usuarios de teclado pueden seguir navegando por la página con la tecla Tab. En el móvil, Deslizarse hacia adentro utiliza una superposición y atrapa el enfoque como Desteñir .
- Fondo difuminado: El color de la pantalla del dispositivo que se encuentra detrás del diseño (Ninguno, Claro, Medio u Oscuro).
- Visualización de la Encuesta:Dónde se mostrará la encuesta (Nueva ventana, Ventana incrustada, Ventana actual, Ventana PopUnder o Nueva pestaña).
Si lo necesita, también puede previsualizar la configuración de su animación en esta pantalla, haciendo clic en Animación de vista previa .
Preguntas frequentes
¿Cuál es la diferencia entre intercepciones independientes, intercepciones guiadas y creatividades guiadas?
¿Cuál es la diferencia entre intercepciones independientes, intercepciones guiadas y creatividades guiadas?
Intercepciones guiadas son cuando creas funciones como cuadros de diálogo interactivos, opinión integrados con plantillas, botones de opinión y opinión de aplicaciones integrados usando estos pasos . También conocidas como configuraciones guiadas, las intersecciones guiadas combinan el elemento visual y la configuración de una diseño en un flujo fácil de seguir que lo guiará de principio a fin.
Creatividades guiadas son cuando creas funciones como cuadros de diálogo interactivos, opinión integrados con plantillas, botones de opinión y opinión de aplicaciones integrados usando estos pasos en cambio. Con una diseño guiada, es necesario crear una intercept separada para emparejarla. Aún obtienes el editor diseño mejorado, pero no el rest de la configuración guiada.
Creé un diálogo de respuesta como diseño, pero quiero usarlo como una intercept guiada. ¿Puedo cambiarlo?
Creé un diálogo de respuesta como diseño, pero quiero usarlo como una intercept guiada. ¿Puedo cambiarlo?
¿Puedo guardar configuraciones guiadas en la biblioteca?
¿Puedo guardar configuraciones guiadas en la biblioteca?
¡Genial! ¡Gracias por tus comentarios!
¡Gracias por tus comentarios!