Le score Mavilà peut reprendre les couleurs, les bordures, les coins et la police de votre site, pour s'intégrer naturellement à vos annonces. Les couleurs des notes, elles, restent fixes : elles font partie de la lecture du score.
Modifiez les réglages : l'apparence du score se met à jour en direct, tout comme le code à intégrer juste en dessous. Il ne vous reste plus qu'à le copier dans votre template d'annonce.
Réglages
Attention, n'oubliez pas de remplacer [votre clé d'accès Mavilà] par votre clé d'accès et [variable de l'adresse des biens] par la variable de votre template qui contient l'adresse du bien, comme expliqué dans le guide d'installation.
Chaque réglage correspond à un paramètre du code. Seuls ceux que vous modifiez sont nécessaires : les autres gardent leur valeur par défaut.
data-theme-background-color
Ce qu'il change
Le fond de couleur de la zone centrale, qui contient la note et le détail par catégorie.
Valeur par défaut
#FDFDFC
data-theme-background-accent-color
Ce qu'il change
Le fond de couleur de l'en-tête, du pied de bloc (avec le logo Mavilà) et des pictogrammes.
Valeur par défaut
#F2EFEA
data-theme-primary-color
Ce qu'il change
La couleur des titres et des textes principaux.
Valeur par défaut
#0C1B33
data-theme-secondary-color
Ce qu'il change
La couleur des textes secondaires, des pictogrammes et des intertitres.
Valeur par défaut
#766F6B
data-theme-action-color
Ce qu'il change
La couleur du bouton « Voir le détail par catégorie » et du bouton d'information.
Valeur par défaut
#046865
data-theme-stroke-color
Ce qu'il change
La couleur des bordures et des lignes de séparation.
Valeur par défaut
#E3DFDA
data-theme-stroke-weight
Ce qu'il change
L'épaisseur des bordures et des lignes de séparation.
Valeur par défaut
1px
data-theme-corner-radius
Ce qu'il change
L'arrondi des coins du bloc et de ses éléments.
Valeur par défaut
16px
data-theme-font-family
Ce qu'il change
La police de tous les textes du bloc.
Valeur par défaut
Source Sans Pro
| Paramètre | Ce qu'il change | Valeur par défaut |
|---|---|---|
| data-theme-background-color | Le fond de couleur de la zone centrale, qui contient la note et le détail par catégorie. | #FDFDFC |
| data-theme-background-accent-color | Le fond de couleur de l'en-tête, du pied de bloc (avec le logo Mavilà) et des pictogrammes. | #F2EFEA |
| data-theme-primary-color | La couleur des titres et des textes principaux. | #0C1B33 |
| data-theme-secondary-color | La couleur des textes secondaires, des pictogrammes et des intertitres. | #766F6B |
| data-theme-action-color | La couleur du bouton « Voir le détail par catégorie » et du bouton d'information. | #046865 |
| data-theme-stroke-color | La couleur des bordures et des lignes de séparation. | #E3DFDA |
| data-theme-stroke-weight | L'épaisseur des bordures et des lignes de séparation. | 1px |
| data-theme-corner-radius | L'arrondi des coins du bloc et de ses éléments. | 16px |
| data-theme-font-family | La police de tous les textes du bloc. | Source Sans Pro |
Si votre site définit ses couleurs, ses bordures ou sa police dans des variables CSS (aussi appelées « custom properties », souvent issues d'un design system), vous pouvez les indiquer à la place des valeurs du simulateur. Le score suivra alors automatiquement les évolutions du design de votre site.
Exemple avec des variables CSS
<div data-mavila-widget
data-api-key="[votre clé d'accès Mavilà]"
data-address="[variable de l'adresse des biens]"
data-theme-primary-color="var(--couleur-texte)"
data-theme-action-color="var(--couleur-marque)"
data-theme-font-family="var(--police-principale)"></div>
<script src="https://api.mavila.fr/widget/v1/mavila-widget.js" defer></script>Les noms de variables de cet exemple sont fictifs : utilisez ceux définis dans la feuille de style de votre site.
Vous ne trouvez pas votre réponse ?
Nous contacter