Passer au contenu principal

Comment personnaliser un widget bsport avec du CSS personnalisé

Ce guide explique comment ajouter du CSS personnalisé à nos widgets depuis le backoffice.

BrandedApp avatar
Écrit par BrandedApp
Mis à jour hier

⚠️ Après l’activation de reCAPTCHA dans le widget Lead Acquisition, certains ajustements CSS peuvent être nécessaires pour que le style s’affiche correctement.

Le rendu du reCAPTCHA peut varier selon :

  • Le widget newsletter actuel

  • La manière dont le widget est intégré dans le CMS du client

  • Les styles existants appliqués par le CMS

👩🏻‍💻 Si vous avez besoin d’aide pour personnaliser ou développer votre design, contactez votre Account Manager.

1. Accédez à Paramètres > Widgets

Cliquer ici pour aller à la page des widgets

2. Sélectionnez l’onglet CSS

Choisissez l’onglet contenant les classes du widget à cibler. Les règles CSS personnalisées peuvent être ajoutées dans n’importe quel onglet, ceux-ci servant surtout de guide pour faciliter la personnalisation. Vérifiez toujours l’aperçu du widget après modification.

⚠️ Évitez d’ajouter !important à chaque règle CSS.

Pourquoi ?

  • Injection automatique : Notre système ajoute automatiquement !important à toutes les règles CSS écrites par les clients.

  • Conflits potentiels : Si le client ajoute également !important, cela peut créer des duplications qui cassent le style attendu.

3. Enregistrez les modifications

N’oubliez pas de sauvegarder après avoir ajouté vos règles CSS.

4. C’est terminé !

Les widgets bsport s’afficheront maintenant avec votre CSS personnalisé.

⚠️ Si vous constatez une différence entre l’aperçu et le rendu sur votre site, activez le Mode Compatibilité.

Avez-vous trouvé la réponse à votre question ?