Modifier le HTML et le CSS de votre widget ou microsite pour Advocate

Vous pouvez personnaliser vos widgets et microsite Advocate avec du HTML et du CSS supplémentaires pour mieux les aligner sur l'apparence et l'identité visuelle de votre marque. En utilisant l'éditeur HTML intégré d'Advocate, vous pouvez ajouter de la structure, du style et même remplacer certains composants par défaut pour une personnalisation plus poussée.

Remarque : L'édition de HTML/CSS personnalisés n'est disponible que pour certaines éditions d'Advocate. Contactez le support pour mettre à niveau votre compte et accéder à cette fonctionnalité.

Pourquoi utiliser du HTML ou du CSS personnalisés ?

Le HTML personnalisé et le CSS en ligne vous permettent de :

• Respecter plus fidèlement les directives de marque de votre entreprise

• Reformater la disposition et les espacements

• Appliquer des styles au-delà de ce qui est disponible dans l'éditeur par défaut

• Remplacer le style de certains composants du widget ou du microsite

Important : Notre équipe de support apporte une assistance limitée pour les problèmes introduits par du code personnalisé. Si vous avez un doute, nous vous recommandons de travailler avec votre équipe d'implémentation Advocate ou l'équipe post-lancement.

Modifier le HTML ou le CSS

Modifier votre microsite

Vous pouvez modifier le HTML ou le CSS pour effectuer d'autres personnalisations de votre microsite en utilisant l'éditeur HTML intégré. Bien que l'éditeur HTML offre une plus grande flexibilité dans la conception du microsite, gardez à l'esprit que nous ne pouvons pas dépanner les ajustements effectués avec du HTML ou du CSS personnalisé.

1. Dans le menu de navigation gauche, sélectionnez [Engage] → Contenu.

2. Sur la carte du microsite, sélectionnez Modifier le contenu.

3. Dans l'onglet Microsite, sélectionnez la mise en page ou la page dont vous souhaitez modifier le code.

4. Sélectionnez [Affichage du code] dans la barre de menu supérieure.

5. Ajoutez ou modifiez le HTML et le CSS selon les besoins.

6. Le CSS peut être ajouté de trois manières :

   • En important une feuille de style CSS externe

   • En haut de la page dans une <style> balise :

   <style>
     p {
       color: blue;
     }
   
     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }
   
     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 

   • En ligne, pour appliquer un style à un élément HTML spécifique :

   <h3 style="font-size:30px;color:blue;">Get rewarded when your friend uses our product</h3> 

7. Sélectionnez [Pinceau] pour prévisualiser vos modifications.

8. Sélectionnez Enregistrer le brouillon pour enregistrer, ou Publier pour mettre les modifications en ligne.

Modifier votre widget

Modifier les composants à l'aide des CSS Parts

Certains composants intégrés de votre widget ou microsite ne peuvent pas être entièrement stylés via l'éditeur visuel. Dans certains cas, vous pouvez remplacer leur apparence en utilisant les CSS parts, qui permettent un contrôle plus précis.

Si vous souhaitez effectuer des modifications de style avancées, l'équipe impact.com peut vous conseiller sur ce qui est possible et partager les sélecteurs de CSS part pertinents. Si vous êtes intéressé par la modification de composants avec des CSS parts, contactez votre équipe d'implémentation Advocate ou l'équipe de support post-lancement.