Comment intégrer ses tableaux de bord à son site internet avec Powerslide ?

Dernière mise à jour : 30/07/2021

A l’ère de la digitalisation et de l’open data, partager ses données via son site internet devient une nécessité. Mais comment mettre en avant ses données et les rendre lisibles par tout un chacun sans un interlocuteur ?

Dans cet article, nous vous montrons comment illustrer vos données dans un tableau de bord interactif, comment partager ce tableau de bord et comment l’intégrer directement à votre site internet avec Powerslide.

dashboard

Créer ses tableaux de bord

Les prérequis

Avant de créer votre tableau de bord, il vous faudra passer par une phase de réflexion pour qu’il soit efficace par rapport au message que vous souhaitez faire passer, ainsi que votre auditoire. Vous pourrez retrouver toutes les questions qu’il faut se poser pour arriver à un tableau de bord efficace dans notre article consacré à ce sujet.

Dans Powerslide, la première étape consiste à importer son jeu de données. Il existe plusieurs façons de le faire, que votre source de données soit un fichier Excel ou CSV, une base de données, ou un fichier Google Sheets. Vous trouverez une explication de toutes les façons d’importer votre source de données dans notre documentation.

Une fois la source de données intégrée à Powerslide, vous pouvez commencer à créer votre tableau de bord. Powerslide vous permet d’y ajouter du texte, des images, des vidéos et des formes, mais l’élément sur lequel nous nous attarderons dans cet article est la création de graphiques à partir des données importées au préalable.

Créer des graphiques dans Powerslide

Pour intégrer des graphiques à votre tableau de bord interactif, il vous suffit de glisser et déposer les données que vous souhaitez mettre en avant sur votre tableau de bord. Selon le type de données que vous avez déposées, Powerslide affichera le graphique le plus adapté selon les normes de la dataviz. Cependant, il vous est toujours possible de changer de représentation si vous le souhaitez. Pour vous aider à choisir la bonne représentation pour vos données, vous pouvez retrouver quelques conseils sur la data visualisation dans notre article "Data visualisation, ce qu'il faut savoir".

Pour modifier le type de graphique, vous pouvez :

  • Cliquer sur le graphique que vous souhaitez modifier, puis changer de type en cliquant sur les boutons en forme de cercle qui s’afficheront sous celui-ci.
  • Cliquer sur le graphique à modifier puis utiliser les boutons situés dans la partie « Type de graphique » du panneau latéral de gauche.

Partager ses tableaux de bord

Une fois votre tableau de bord réalisé, vous pourrez le présenter à votre auditoire. Pour cela évidemment, vous pouvez le leur présenter depuis votre poste en utilisant le mode de visualisation comme une présentation classique mais Powerslide vous permet également de mettre votre tableau de bord à disposition de votre public à tout moment.

En effet, il vous est possible de rendre votre tableau de bord Powerslide publique afin que toute personne ayant le lien vers votre tableau de bord puisse le consulter sans que vous ayez à être devant votre poste.

Pour faire cela, depuis le menu Paramètres de l’interface d’édition de votre tableau de bord, cliquez sur Accès public, vous obtiendrez alors les informations de partage (l’URL d’accès, le code à intégrer, …).

public

Powerslide vous permet également de d’attribuer les droits de lecture ou les droits d’écriture directement à vos collaborateurs (à partir de cette même interface). A l’aide des menus déroulants, vous pourrez choisir à quel(s) membre(s) de votre équipe vous allez attribuer ces droits.

droits

 

Intégrer ses tableaux de bord à son site

Une autre façon de partager votre tableau de bord est de l’intégrer directement à votre site internet. Pour ce faire, vous devrez tout d’abord passer votre tableau de bord en accès public comme pour obtenir le lien de partage, vous verrez qu’en plus du « lien public », il y a une section « code à intégrer ». Il s’agit du code HTML à intégrer à votre site internet pour que votre tableau de bord s’y affiche dans une balise iframe.

Qu'est-ce qu'une balise iframe ?

Iframe est la contraction d’« inline frame ». Il s’agit d’une des balises HTML utilisables pour créer une page internet. Cette balise agit comme un cadre photo numérique : elle permet d’intégrer un contenu provenant d’un serveur externe à votre page internet.

Elle se présente sous la forme :

<iframe
src="<URL du contenu à afficher>"
height="<hauteur du cadre>"
width="<largeur du cadre>"
title="<titre souhaité>"
style="<CSS à appliquer au cadre>"
>
<Texte de remplacement>
</iframe>

En rouge les attributs obligatoires, en vert ceux optionnels.

Voici un exemple d’iframe contenant un tableau de bord Powerslide :

<iframe
src="https://app.powerslide.io/slide/headless/6becc168-ff0e-42e4-8c39-b3885abf24f7"
title="Mon tableau de bord"
style="margin: 30px 0; display: block;" allowfullscreen width="100%" height="800"
>
</iframe>

Ce bout de code HTML est automatiquement généré par Powerslide lorsque vous passez votre tableau de bord en "accès public". L’iframe généré a pour source (src) un lien vers votre tableau de bord dans Powerslide. Si vous essayez de copier-coller ce lien dans la barre d’adresse de votre navigateur, vous accéderez à votre tableau de bord. Il aura par défaut le même titre (attribut title) que votre présentation. Un style par défaut est également appliqué pour optimiser l’affichage de votre tableau de bord dans l’iframe.

Comment intégrer mes tableaux de bord à mon site Wordpress ?

Pour intégrer votre présentation interactive à votre site internet il vous suffit donc de copier ce code HTML et le coller dans le code HTML de votre page web à l’endroit où vous souhaitez afficher le tableau de bord. Vous pouvez le coller tel qu’il est, il est fonctionnel, mais vous pouvez également modifier les attributs (excepté l’attribut src) si vous souhaitez modifier l’apparence de l’iframe.

Pour mieux comprendre comment intégrer votre tableau de bord interactif à votre site web, voici une vidéo de l’intégration d’un Powerslide à un site Wordpress :

 

En résumé,

Choisir la meilleure représentation pour ses données, partager ses présentations avec ses collaborateurs et intégrer un tableau de bord interactif à son site internet peuvent devenir un jeu d’enfant grâce à Powerslide.

Vous aussi, intégrez vos tableaux de bord à votre site internet en quelques clics.

Je découvre Powerslide