Les widgets web vous permettent d’afficher des graphiques de votre tableau de bord Cité de l’énergie directement sur le site web de votre commune. Vous créez le widget dans le tableau de bord, copiez le code, puis l’insérez sur votre site web. Les données restent ainsi toujours à jour. Les modifications que vous apportez dans le tableau de bord sont reprises automatiquement et immédiatement dans le widget de votre site web.
Prérequis : enregistrer le domaine autorisé
Un widget s’affiche uniquement sur les sites web dont vous avez autorisé le domaine dans le tableau de bord. Pour ce faire, saisissez l’adresse de votre site web comme domaine autorisé, par exemple www.xy.ch.
Sur les autres domaines, le widget reste vide. Vous évitez ainsi que vos graphiques apparaissent sur des sites tiers sans votre accord.
Créer un widget dans le tableau de bord
La vidéo montre étape par étape comment créer un widget dans le tableau de bord et copier le code d’intégration.
Insérer le code sur le site web
Dans le tableau de bord, vous trouverez sous Code d'intégration tous les codes nécessaires à l’intégration. L’icône de copie, à droite de chaque bloc de code, vous permet de copier le code dans le presse-papiers.
Le code d’intégration se compose de trois blocs :
- Code de base (bloc supérieur) : le code
<script>est identique pour tous les widgets. Insérez-le une seule fois sur votre site web, même si vous intégrez plusieurs widgets. - Widget individuel : le code
<es-widget widget-id="…">affiche un seul widget. Chaque widget possède son propre identifiant. Insérez le code à l’endroit où le widget doit apparaître. - Liste automatique de widgets : le code
<es-widget-list region-id="…">affiche sous forme de liste tous les widgets disponibles de votre Cité de l’énergie. Pour en savoir plus, consultez la section « Plusieurs widgets avec un seul code ».
Vous avez donc toujours besoin du code de base. Vous y ajoutez soit le code d’un widget individuel, soit celui de la liste automatique de widgets. Dans la plupart des systèmes de gestion de contenu (CMS), vous insérez le code au moyen d’un élément HTML ou d’un élément de code.
Plusieurs widgets avec un seul code : la liste automatique de widgets
La liste automatique de widgets vous permet d’intégrer plusieurs widgets à la fois avec un seul code. Les widgets nouveaux ou modifiés apparaissent automatiquement, sans que vous deviez adapter le code sur votre site web.
Les attributs de style vous permettent de définir si les widgets sont disposés côte à côte ou les uns sous les autres.
Adapter l’affichage avec les attributs de style
Les attributs de style vous permettent d’adapter l’apparence de la tuile du widget à votre site web. Le contenu du graphique lui-même ne peut pas être modifié. Vous trouverez de plus amples informations ici.
| Élément | Par défaut | Modifiable |
|---|---|---|
| Titre : police | reprend automatiquement la police de votre site web | oui, au choix |
| Titre : couleur de police | – | oui |
| Tuile : couleur d’arrière-plan | – | oui |
| Tuile : ombrage | – | oui |
| Tuile : forme | – | oui |
| Disposition de plusieurs widgets | – | oui, avec la liste automatique de widgets |
| Contenu du graphique | selon le tableau de bord | non |
Cet article a-t-il été utile ?
C'est super !
Merci pour votre commentaire
Désolé ! Nous n'avons pas pu vous être utile
Merci pour votre commentaire
Commentaires envoyés
Nous apprécions vos efforts et nous allons corriger l'article