CSS para Surveys

Last Updated agosto 7, 2025

DAP Para clientes Para empleados Premium FedRAMP Canadá Escritorio

Breve descripción general

Las hojas de estilo en cascada (CSS) te permiten aplicar una personalización avanzada a las encuestas, incluidos elementos como la fuente, el fondo y el borde.

Se pueden utilizar CSS para personalizar las Surveys de WalkMe y las Surveys de NPS:

Botones de acción y cierre
Texto para el título
Texto
Botón "X"

Surveys

Cómo funciona

Las hojas de estilo en cascada (CSS) son un lenguaje de hojas de estilo utilizado para describir el formato de un documento escrito en un lenguaje de marcado. Al escribir CSS, deberás referirte a los diferentes componentes (técnicamente conocidos como elementos) de la encuesta. Al escribir en la ventana CSS Personalizada, WalkMe muestra las opciones de autocompletado para los selectores, propiedades y valores.

CSS

Configuración de componentes del globo

Cada encuesta incluye una serie de componentes o elementos que se pueden personalizar con CSS.

Por ejemplo, puedes seleccionar la sección de título de una encuesta utilizando esta clase:

.wm--survey-title

Consulta la lista completa de clases.

Reglas globales

Se puede acceder a CSS global desde el editor.

Abre el menú Configuración en el editor
Haz clic en Editar CSS global

ID de la encuesta

Pasa el cursor sobre la encuesta en el editor
Haz clic en el menú Opciones
Haz clic en Copiar ID

Consejo

Reemplaza el XXXXX en el CSS de esta página con el ID de la encuesta o el cambio deseado (color, fuente, etc.)

Uso de !important

Por defecto, el diseño del tema de WalkMe anula cualquier otro cambio de diseño en un globo o aplicación.

Para que se aplique CSS, la regla CSS debe contener "!important" para garantizar que anule el estilo por defecto.

Por ejemplo:

#walkme-survey-balloon-37897 .walkme-survey-title {

color: #000 !important;

}

Componentes de encuestas configurables

DIV	Funciones editables
#walkme-survey-balloon-XXXXX	Los principales componentes de la encuesta, que incluyen: Visualización Fondo Posicionamiento en la pantalla Índice Z Anchura Altura
.walkme-survey-title	Título de la encuesta, que incluye lo siguiente: Alineación del texto Color de fuente Tamaño de fuente Familia de fuentes Relleno Margen
.walkme-survey-question-title	Preguntas de la encuesta, que incluyen: Alineación del texto Color de fuente Tamaño de fuente Familia de fuentes Relleno Margen
#walkme-survey-answer-text-XXXXXX	Respuestas de encuestas, que incluyen: Alineación del texto Color de fuente Tamaño de fuente Familia de fuentes Relleno Margen
#walkme-survey-answer-radiobutton-XXXXX	Botones de radio de respuesta a la encuesta, que incluyen: Posicionamiento Anchura Altura Antecedentes Radio del borde Borde inferior Color
.walkme-click-and-hover.walkme-custom-balloon-close-button.walkme-action-close.walkme-inspect-ignore	Botón "Cerrar" de la encuesta, que incluye: Color de fuente Tamaño de fuente Familia de fuentes Anchura Altura Fondo Radio del borde
.walkme-custom-balloon-content-wrapper	Contenido general de la encuesta y texto, que incluye: Color de fuente Tamaño de fuente Familia de fuentes Color de fondo

Componentes de encuestas NPS configurables

DIV	Funciones editables
.walkme-survey-question-nps-answers	Todas las respuestas de la encuesta de NPS (generalmente de 0 a 10), incluyendo: Visualización Fondo Posicionamiento
.walkme-survey-nps-answer seleccionado .walkme-survey-answer-label-nps-radiobutton	La respuesta de NPS seleccionada, que incluye: Color de fondo Color del borde
.walkme-survey-low-score-div span walkme-survey-high-score-div span	Etiquetas de puntaje alto y bajo, que incluyen: Alineación del texto Color de fuente Tamaño de fuente Familia de fuentes Relleno Margen
.walkme-custom-side-border	Borde lateral de la encuesta, que incluye: Color de fondo Visualización

Personalizaciones comunes de CSS para encuestas

Cambiar el tamaño de fuente del título de la encuesta

#walkme-survey-id-XXXXXX .walkme-survey-title {

font-size: XXpx !important;

}

Cambiar el color de la barra lateral de la encuesta y el botón de enviar

#walkme-survey-balloon-XXXXX .walkme-custom-side-border{

background-color: #XXXXXX !important;

}

#walkme-survey-balloon-XXXXX .walkme-custom-balloon-submit-button{

background-color: #XXXXXX !important;

}

Cambiar o corregir el margen de las opciones de NPS (1-10)

#walkme-survey-question-nps-answers-XXXX .walkme-survey-nps-answer {

margin: XXpx !important;

}

Cambiar el estilo de fuente de las preguntas de la encuesta

#walkme-survey-balloon-XXXXX .walkme-custom-balloon-content {

font-family: (aquí la fuente) !important;

}

Cambiar el color de las respuestas de la encuesta de NPS

.walkme-survey-question-nps-answers.selected .walkme-survey-nps-answer.selected label {

background: XXX !important;

border-color: XXX !important;

}

Cambiar el color de las respuestas de la encuesta de NPS al pasar el cursor

.walkme-survey-answer-label-nps-radiobutton.walkme-survey-answer-label-nps-radiobutton-unchecked:hover {

background: XXX !important;

border-color: XXX !important;

}

Cambiar el ancho de la pregunta de la encuesta

#walkme-survey-balloon-XXXXXX {

ancho: 650 px !important;

altura: auto !important;

}

Cambiar el ancho de la pregunta de la encuesta de NPS

#walkme-survey-balloon-XXXXXX .walkme-custom-balloon-mid-div {

ancho: 650 px !important;

position: fixed !important;

top: 50% !important;

left: 50% !important;

transform: translate(-50%,-50%) !important;

}

Cambiar el color del asterisco junto a las preguntas obligatorias

.walkme-survey-balloon .walkme-survey-question-mandatory {

color: #ff0000 !important;

}

Cambiar el texto del botón de la encuesta

Puedes cambiar el texto de los botones de la encuesta en la página Multilingüe de la consola.

Ve a la consola → Multilingüe → Traducciones → WalkMe General → Texto general de WalkMe → Texto del botón de enviar

Was this article helpful?

Yes No

Yes

Thanks for your feedback!