Customer Experience
Employee Experience
Brand Experience
Core XM
Design XM

Feedback embebido personalizado

Consejo Q: Si no tiene acceso a ninguna de las funciones descritas en esta página, póngase en contacto con su ejecutivo de cuentas. Para obtener más información sobre las diferencias entre la opinión digital y CustomerXM for Digital, consulte Opinión digital frente a CustomerXM for Digital.

Acerca de los diseños de feedback embebidos personalizados

Los comentarios embebidos personalizados le permiten crear contenido personalizado que se muestra como parte de su página. Este contenido personalizado puede ser cualquier cosa, desde un anuncio hasta una encuesta integrada.

Ejemplo: En esta captura de pantalla, aparece una encuesta incrustada en la página web después de que un visitante complete un pago. La encuesta se crea en la plataforma de la encuesta y se integra en la página con un diseño de opinión embebido personalizado.

La retroalimentación embebida personalizada es más notable que una creativa más pasiva, como el botón de retroalimentación, a la vez que nunca abruma a los visitantes de la página web interrumpiendo lo que están haciendo. En un mundo en el que los clientes están capacitados para dar opiniones rápidamente después de una interacción, la incorporación de opiniones personalizadas directamente en su página permite a los encuestados dar su opinión durante una experiencia.

Los diseños de opinión integrados personalizados también pueden ser útiles para la gestión de contenido, lo que le permite elegir qué encuestas se muestran a tipos específicos de visitantes de la página web.

Ejemplo: Por ejemplo, puede optar por mostrar una oferta de descuento solo a aquellos visitantes ubicados en áreas cercanas a ubicaciones de tiendas físicas, y alternar material a todos los demás.

Ejemplo: En la siguiente captura de pantalla, preguntamos a los visitantes para qué están comprando hoy. Si eligen zapatos, podemos redirigirlos directamente a la sección Zapatos de nuestro sitio web.

Consejo Q: Esta función solía llamarse Diseño HTML personalizado.

Implementación de comentarios embebidos personalizados

Genere un diseño de opinión embebido personalizado.
Atención: El nombre de su diseño no puede superar los 100 caracteres.
Haga que su equipo web designe un “contenedor” en su sitio web donde se insertarán sus opiniones embebidas personalizadas. Este espacio debe incluir un elemento HTML con un atributo ID. Identifique y copie el ID HTML entre comillas.

En muchos casos, una etiqueta HTML con un ID ya existe en la ubicación adecuada y no es necesario realizar modificaciones en el sitio.

Consejo Q: Utilice la función “Inspeccionar elemento” de su navegador para determinar el ID HTML de un elemento. En la mayoría de los navegadores, solo tiene que hacer clic con el botón derecho en la parte de la página que desea inspeccionar y seleccionar “Inspeccionar” o “Inspeccionar elemento”.
Crear un intercept.
En el menú Opciones de la acción de su intercept, seleccione Opciones avanzadas.
Pegue el ID HTML del contenedor de destino en el campo Punto de inserción de diseño.
Haga clic en Guardar.
Cuando un visitante acceda a esta página en su página web, Qualtrics buscará el elemento HTML con el ID que ha especificado e insertará su diseño en ese contenedor de div.

Consejo Q: En los ejemplos anteriores, estamos integrando una encuesta de Qualtrics en la página. Para lograr un efecto similar, al editar su diseño, simplemente agregaría un objetivo incrustado en el tamaño y la forma que desea que la encuesta ocupe en la página.

Opciones personalizadas de feedback embebido

En la sección Opciones de su diseño, encontrará la configuración específica de los diseños de opinión integrados personalizados.

Posicionamiento personalizado

A veces, su opinión embebida personalizada puede ser más pequeña que el contenedor de destino en el que se insertará en su página web. En este caso, puede utilizar Posicionamiento personalizado para especificar dónde se mostrará su HTML en relación con el contenedor de destino.

Para tener aún más control sobre el posicionamiento, puede desplazar la posición X o Y del diseño de su posición inicial o seleccionar Corregir a página para que los comentarios embebidos personalizados sigan al visitante mientras se desplazan.

Reemplazar el contenido del contenedor del objetivo

De forma predeterminada, cuando se inserta un diseño de opinión incrustado personalizado en una página, sustituye el contenido existente del elemento HTML de destino. Verá esta opción seleccionada como Sustituir contenido del contenedor objetivo.

Anexar al contenedor del objetivo

En lugar de sustituir el contenido del contenedor de destino, puede seleccionar Añadir al contenedor de destino para colocar su diseño dentro del contenedor de destino, pero después de cualquier contenido existente.

Insertar antes del contenedor del objetivo

Esta opción le permite insertar el feedback incrustado personalizado antes del contenedor de destino.

Consejo Q: Esto ignorará las opciones de posicionamiento personalizado.

Insertar después del contenedor del objetivo

Esta opción le permite insertar el feedback incrustado personalizado después del contenedor de destino.

Consejo Q: Esto ignorará las opciones de posicionamiento personalizado.

Una nota sobre el índice Z

Índice Z es una propiedad CSS que especifica qué elementos de la página Web deben estar en la parte superior cuando los elementos se solapan. De forma predeterminada, los diseños tendrán un índice z más alto que otros elementos de su página para que siempre estén en la parte superior.

Esto suele ser mejor, pero en algunos casos esto puede no ser preferible. Por ejemplo, un menú desplegable puede estar cubierto por su opinión embebida personalizada.

Advertencia: ¡Ten cuidado! No debe añadir la CSS de índice Z a un destino incrustado. Sin embargo, la adición del índice Z a otros tipos de elemento es correcta.

Para ajustar el índice z de su opinión incrustada personalizada:

Vaya a la página web que muestra el diseño y abra la herramienta Herramientas del desarrollador o Inspeccionar elemento.
Identifique la clase de div que comienza con “QSI” y copie lo que hay entre comillas. A continuación, reemplace el espacio entre “QSIUserDefinedHTML” y la cadena que comienza por “SI_” por un punto (.). En el siguiente ejemplo, copiaríamos:
```
QSIUserDefinedHTML SI_4PEs8K4EkCbmSdT_UserDefinedHTMLContainer
```
y después de sustituir el espacio por un punto, ahora tenemos:
```
QSIUserDefinedHTML.SI_4PEs8K4EkCbmSdT_UserDefinedHTMLContainer
```
En su cuenta de Qualtrics, vaya al Editar para su diseño.
Haga doble clic en cualquier elemento para modificarlo o crear uno nuevo en blanco.
Advertencia: Recomendamos no añadir el elemento CSS de índice Z a un destino incrustado porque es posible que tenga problemas con otras partes de su página que se cubran accidentalmente. Sin embargo, la adición del índice Z a otros tipos de elemento es correcta.
Haga clic en Fuente en la parte superior del editor de contenido enriquecido para acceder a la vista HTML.
Tome el siguiente código (incluidas las etiquetas de estilo) y péguelo en la fuente.
```
<style type="text/css"> .QSIUserDefinedHTML{z-index:1;} </style>
```
Reemplace “QSIUserDefinedHTML” por el ID que recuperó en el paso 2 y reemplace el valor de índice z por el apropiado para su página web.
```
<style type="text/css"> .QSIUserDefinedHTML.SI_4PEs8K4EkCbmSdT_UserDefinedHTMLContainer{z-index:1;} </style>
```
Si el código de proyecto ya está en el código fuente de su sitio web, haga clic en el botón Publicar para insertar los cambios en su sitio.
Si el código no está en el código fuente de su sitio web, puede probar el diseño en su sitio web utilizando Probar intercept y confirmar que todo está en capas correctamente.
Si la capa aún no es correcta, puede considerar cambiar el valor del índice z a un número mayor para apilar su diseño más alto en la página, o un número más pequeño (incluso negativo) para apilar más bajo.