CSS pour les Surveys
Aperçu général
Les feuilles de style en cascade (CSS) vous permettent d'appliquer la personnalisation avancée aux Surveys (sondages), y compris les éléments tels que la police, l'arrière-plan et la bordure.
Le CSS peut être utilisé pour personnaliser les Surveys et les Surveys NPS :
- Boutons d'action et de fermeture
- Texte pour le titre
- Texte
- bouton « X »
Comment ça marche
La feuille de style en cascade (CSS) est une langue de feuille de style utilisée pour décrire le formatage d'un document écrit dans une langue de balisage. Lorsque vous écrirez en CSS, vous devrez consulter les différents composants (connus techniquement comme des éléments) du Survey. Lorsque vous tapez dans la fenêtre CSS personnalisé, WalkMe affiche des options automatiques pour les sélecteurs, les propriétés et les valeurs.
Récapitulatif des paramètres
La configuration des composants de la bulle
Chaque Survey comprend un certain nombre de composants (éléments) qui peuvent être personnalisés avec le CSS. Par exemple, vous pouvez cibler la section de titre d'un Survey en utilisant cette classe :.wm--survey-title (voir ci-dessous la liste complète des classes).
Règles globales
Le CSS global pour les Surveys peut être ajouté dans le menu Customize (personnaliser) :
Rechercher l'ID d'un Survey
- Passez la souris sur le nom de votre Survey
- Allez sur l'Icône du crayon
- Cliquez sur « Copy ID » (copier l'ID)
Utilisation d'!Important
Par défaut, la conception du thème WalkMe remplace tout autre changement de conception dans la bulle ou l'app. Pour appliquer le CSS, la règle CSS doit contenir "!important" pour vous assurer qu'elle remplace le style par défaut.
Par exemple :
#walkme-survey-balloon-37897.walkme-survey-title {
color: #000 !important;
}
Composants configurables du Survey
| div | FONCTIONNALITÉS MODIFIABLES | |
| 1 | #walkme-survey-balloon-37897 | Cet élément est la partie principale du sondage. Vous serez en mesure de modifier :
|
| 2 | .walkme-survey-title | Cet élément est le titre principal pour le sondage. Vous serez en mesure de modifier :
|
| 3 | .walkme-survey-question-title | Cet élément est la ou les question(s) du Survey (sondage). Vous serez en mesure de modifier :
|
| 4 | #walkme-survey-answer-text-XXXXXX | Cet élément est la ou les réponse(s) du Survey (sondage). Vous serez en mesure de modifier :
|
| 5 | #walkme-survey-resply-radiobutton-110079 | Cet élément est le bouton radio pour les réponses. Vous serez en mesure de modifier :
|
| 6 | .walkme-click-and-hover.walkme-custom-balloon-close-button.walkme-action-close.walkme-inspect-ignore | Cet élément est le bouton Fermer. Vous serez en mesure de modifier :
|
| 7 | .walkme-custom-balloon-content-wrapper | Cet élément est le sélecteur général pour tout le contenu ou le texte dans le sondage. Vous serez en mesure de modifier :
|
Composants configurables du Survey NPS (sondage)
| div | FONCTIONNALITÉS MODIFIABLES | |
| 1 | .walkme-survey-question-nps-answers | Cet élément est la totalité des réponses dans votre sondage NPS (généralement de 0 à 10). Vous serez en mesure de modifier :
|
| 2 | .walkme-survey-nps-answer sélectionné.walkme-survey-nps-answer-label-nps-radiobutton | Cet élément est la réponse NPS sélectionnée. Vous serez en mesure de modifier :
|
| 3 | .walkme-survey-low-score-div span or walkme-survey-high-score-div span | Cet élément est le label de haute et de faible valeur dans l'un ou l'autre bout de la bulle. Vous serez en mesure de modifier :
|
| 4 | .walkme-custom-side-border | Cet élément est la bordure de côté pour le sondage. Vous serez en mesure de modifier :
|
Personnalisation du CSS du Survey commun
Modifiez la taille de la police du titre du Survey
#walkme-survey-id-XXXXXX.walkme-survey-title {
font-size: XXpx !important;
}
Modifiez la couleur de la barre latérale et le bouton Soumettre
#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;
}
Modifiez ou fixez la marge des choix NPS (1-10)
#walkme-survey-question-nps-answers-XXXX.walkme-survey-nps-answer {
margin: Xpx !important;
}
Modifiez la police des questions du sondage
#walkme-survey-balloon-XXXXX.walkme-custom-balloon-content {
font-family: (font here) !important;
}
Modifiez la couleur des réponses du sondage NPS
.walkme-survey-question-nps-answers.selected.walkme-survey-nps-answer.selected label {
background: XXX !important;
border-color: XXX !important;
}
Modifiez la couleur des réponses du sondage NPS lorsque vous passez la souris sur le sondage.
.walkme-survey-answer-label-nps-radiobutton.walkme-survey-answer-label-nps-radiobutton-unchecked:hover {
background: XXX !important;
border-color: XXX !important;
}