Qu’est ce qu’un widget, où et comment le mettre en place ?

Qu’est ce qu’un widget ?

Un widget est outil interactif qui va permettre, par exemple, de proposer l’affichage d’informations ou de divertissements ou encore de donner un accès à différents services (articles, liens). Certains widgets peuvent alors permettre d’afficher de la publicité, des informations comme les cours de la bourse ou la météo alors que d’autres permettent de jouer à des jeux vidéo basiques.

Où mettre en place un widget ?

Les widgets ne sont disponibles que sur web et sur les applications mobiles.

Depuis votre back office, vous avez deux endroits pour mettre en place des widgets. Ces derniers s’afficheront à vos utilisateurs  dans différentes pages :

Dans votre page d’accueil.
Pour ce faire, rendez-vous dans le menu PLATEFORME > Disposition > Accueil > Créer un composant ‘Widget’.  Il se comporte comme un smart composant au même titre que les Mosaïque et Carrousel. Vous pouvez ajouter et positionner autant de widgets que vous le souhaitez sur votre page d’accueil.

Dans une page spécifique, Contenu, Smartlist et Casting.
Pour ce faire, rendez-vous dans le menu PLATEFORME > Disposition et sélectionné une des rubriques suivantes : Page Contenu, Page Smartlist ou Page Casting. Dans la configuration de ces pages, la dernière option est l’activation ou non d’un widget. Pour modifier l’affichage et la disposition d’un widget sur une page spécifique, reportez-vous à la fonction dite Variable, plus bas dans la page d’aide.

 

Comment mettre en place un widget ?

Dans le menu PLATEFORME > Disposition > Accueil > Créer un composant ‘Widget’.

  • Paramètres du widget

Vous devez tout d’abord choisir les paramètres de ce widget, la largeur et la hauteur, afin de savoir la place que va prendre le widget sur la page d’accueil. La largeur peut-être définit en pourcentage ou pixel (100%, 500px par exemple). La Hauteur peut également être exprimée de la même façon mais vous pouvez mettre en place le mode « auto » qui va essayer de calculer la place optimal que veut prendre ce widget. Le mode auto est conseillé pour une page contenant uniquement du texte et des images.

Vous pouvez ensuite choisir d’activer ou non la barre de défilement : si elle n’est pas activée, le widget affichera seulement ce qui est possible d’afficher, selon la Hauteur qu’on lui a donné.

  • Contenu du widget

Le widget est configurable via du code HTML ou via une URL :

    • Code HTML : vous pouvez rentrer directement ce code dans l’éditeur, avec la possibilité d’utiliser le système de templating en open source Liquid.
    • URL : vous renseignez ici l’adresse URL de votre widget et qui peut être un fichier html, un site internet ou encore une application.

 

Dans le menu PLATEFORME > Disposition sur une des page > Page Contenu, Page Smartlist ou Page Casting.

Vous pouvez choisir d’activer ou non le widget sur le type de page choisi : Page Contenu, Page Smartlist ou Page Casting.

Ensuite, pour les paramètres et le contenu du widget, il s’agit de la même configuration que pour les widgets de la page d’accueil..

  • Paramètres du widget

Vous devez tout d’abord choisir les paramètres de ce widget, la largeur et la hauteur, afin de savoir la place que va prendre le widget sur la page d’accueil. La largeur peut-être définit en pourcentage ou pixel (100%, 500px par exemple). La Hauteur peut également être exprimée de la même façon mais vous pouvez mettre en place le mode « auto » qui va essayer de calculer la place optimal que veut prendre ce widget. Le mode auto est conseillé pour une page contenant uniquement du texte et des images.

Vous pouvez ensuite choisir d’activer ou non la barre de défilement : si elle n’est pas activée, le widget affichera seulement ce qui est possible d’afficher, selon la Hauteur qu’on lui a donné.

  • Contenu du widget

Le widget est configurable via du code HTML ou via une URL :

    • Code HTML : vous pouvez rentrer directement ce code dans l’éditeur, avec la possibilité d’utiliser le système de templating en open source Liquid.
    • URL : vous renseignez ici l’adresse URL de votre widget et qui peut être un fichier html, un site internet ou encore une application.

 

Comment mettre en place les variables ?

Vous pouvez mettre en place des variables pour certaines de vos pages. Ce sont des informations dynamiques sur les widgets qui permettent de l’adapter au mieux pour vos utilisateurs.

Par exemple, vous avez activez un Widget sur la catégorie de page > Page Contenu.
Mais vous souhaitez que 3 de vos contenus n’affiche pas exactement les même variables que le modèle de la page.
Rendez-vous directement dans les pages concerné et modifié les variables (Champs a remplir en bas de la page).

 

Dans le nom de la variable, indiquez widget_visible et en valeurs true ou false pour que le widget soit visible uniquement sur les page ou la variable a comme valeur true.

Le nom et la valeur de la variables sont définis dans les pages Contenu, Smartlist ou Casting et seront injecté dans les widgets en l’insérant dans le code html.

Des exemples de widget à mettre en place

Une vidéo YouTube

Pour partager facilement une vidéo Youtube sur votre plateforme avec l’option widget, c’est très simple :

Option 1

  • Cliquez sur le bouton « Partager » et choisissez « Intégrer ».
  • Récupérez l’URL/lien correct du code qui se trouve à l’intérieur de l’attribut src. L’URL intégrée ressemblera donc à https://www.youtube.com/embed/XXXXX

Option 2

  • Faites un clic droit directement sur la vidéo et choisissez l’option « Copier le code d’intégration » OU cliquez sur « Partager » puis « Intégrer » et enfin « Copier »

  • Dans le widget, collez directement le code d’intégration directement dans l’éditeur de code HTML

A noter : pour intégrer plusieurs vidéos YouTube dans le même widget, rentrez les informations suivantes :

  • Paramètres du widget :

Largeur 100%         Hauteur auto

  • Activer la barre de défilement : Oui
  • Contenu du widget dans la section HTML, un code du type :

<div style= »display: flex; align-item: center; justify-content: center »>
<div style= »margin: 5px »>
Code d’intégration Vidéo 1
</div>
<div style= »margin: 5px »>
Code d’intégration Vidéo 2
</div>
<div style= »margin: 5px »>
Code d’intégration Vidéo 3
</div>
</div>

 

Des contenus interactifs avec Genially

Genially est un outil très ergonomique pour créer facilement des contenus interactifs. Avec cet outil, vous pouvez créer des infographies, des vidéos de présentation, des images interactives, des jeux,  etc. Une fois que le contenu a été crée, vous pouvez le publier et copier/coller le code d’intégration dans le contenu du widget.

 

Un formulaire Mailchimp

Vous utilisez peut-être déjà Mailchimp pour communiquer de différentes façons avec vos utilisateurs.

Il est tout à fait possible d’inclure Mailchimp dans les widgets que vous mettez en place depuis votre back office.

Sur votre profil sur Mailchimp et depuis votre dahsboard :

  • Rendez-vous « Signup forms »
  • Sélectionnez  « Embeded forms » et mettez en place les paramètres de formulaire de votre choix
  • Cliquez sur « Generate Embed code » et copiez-le
  • Revenez dans votre back office et collez le code dans le contenu du widget

ATTENTION : les widgets  ajoutés doivent être maniés avec précaution car ils peuvent ralentir l’affichage de votre homepage et perturber les analytics ou les scripts de Google.

D’autres exemples de widgets à mettre en place seront ajoutés progressivement.

Avec les widgets, rendez votre plateforme encore plus dynamique que jamais et augmenter l’engagement de votre audience.