Mautic vous offre un large répertoire de possibilités pour interagir avec des clients potentiels sur le site web. Le plus connu et le plus répandu est ce qu'on appelle le « Focus Item » – une forme de notification qui se déplace de façon animée dans la fenêtre.
Malheureusement, les Focus Items du kit de construction standard Mautic ne peuvent être personnalisés que de manière très parcimonieuse : Les modifications individuelles de mise en page dans l'éditeur ne peuvent être effectuées qu'en HTML – un vrai cauchemar pour chaque éditeur.
Pour un aspect élégant pour un Focus Item personnalisé : Changer le style Mautic « hard » pour l'ensemble de l'instance Mautic. Les éléments de mise au point peuvent ainsi être adaptés à la conception du site Web et sont ensuite créés dans cette variante par défaut lorsque l'éditeur crée un élément de mise au point.
Responsable de l'apparence des différents Focus Item, les Styles sont des fichiers php différents, que l'on peut trouver dans le répertoire suivant : « plugins/MauticFocusBundle/Views/Builder ». Il y a quelques fichiers de Style généraux qui sont utilisés pour chaque Focus Item, ainsi que quatre dossiers pour chaque type : Bar, Modal. Notification et Page.
En ajustant les fichiers php dans les dossiers respectifs, vous pouvez modifier les styles par défaut des éléments du focus.
En voici un exemple à titre d'illustration :
La tâche : Le Style Focus Item « Notification » doit être ajusté. Il y a une autre particularité : Le style « Notification » utilise le HTML du style « Modal ». Par conséquent, les modifications doivent être effectuées dans le dossier Modal ainsi que dans le dossier Notification.
Vous devez d'abord éditer le fichier « index.html.php » dans le dossier Modal et dans ce cas ajouter un logo comme image. La couleur de fond de l'élément de mise au point doit être contrôlée par la couleur primaire dans le Mautic-Builder – pour que cela fonctionne, ajoutez le style suivant au div avec la classe « mautic-focus » :
style="background-color: #<?php echo $props['colors']['primary']; ?>;"
La variable « $props » permet, par exemple, d'accéder aux couleurs et aux contenus stockés dans le Focus Item.
Ensuite, vous éditez le fichier « style.less.php » dans le dossier Notification et ajoutez le style pour le texte et le bouton via CSS. Maintenant, seules les couleurs doivent être ajustées dans le Mautic-Builder et le Focus Item est prêt.
Voici un exemple de comparaison avant et après :
Sans style individuel:
Avec un style individuel:
Attention : Actuellement, il n'y a pas de méthode « update-proof » (à l'épreuve des mises à jour), c'est-à-dire que les fichiers Focus Item traités sont modifiés ou écrasés par chaque mise à jour Mautic ! Ils doivent donc être sauvegardés et stockés dans les répertoires appropriés après la mise à jour. Ce n'est pas une solution optimale, mais elle peut être résolue par un petit automatisme – et son utilisation justifie ce désagrément et le coût associé.