Qu’est ce qu’un widget, où et comment le mettre en place ?
TABLE DES MATIÈRES
- Qu’est ce qu’un widget, où et comment le mettre en place ?
- Où mettre en place un widget ?
- Comment mettre en place un widget ?
- Comment mettre en place les variables ?
- Des exemples de widget à mettre en place
Un widget est un 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éos 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 composant 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 ?
Nos widgets sont modifiables de différente manières.
1. 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éfinie 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 optimale 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 qu'il est possible d’afficher, selon la Hauteur qu’on lui a donnée.
2. 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.
Par exemple afficher une page spécifique en utilisant son UUID :
{% if uuid == "zfezfzefzegfzgzrgzrgzrgz" %}
Pour une configuration liée aux Variables, ajoutez :
{% if custom_params.display == "Valeur de la variable" %}
- 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. Elles se trouvent en bas d'une page et sont représentées par les champs suivants :
Ajoutez tout d'abord dans le code HTML du widget :
{% if custom_params.display == "Valeur de la variable par exemple true" %}
Puis par exemple, pour la variable, indiquez une valeur 'true' pour que le widget soit visible uniquement sur les pages avec la valeur 'true'.
Les noms et les valeurs des variables sont définis dans les pages, puis injectés dans les widgets en l’insérant dans le code html.
Des exemples de widget à mettre en place
1. 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 correcte 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>
2. 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.
3. 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.
Avec les widgets, rendez votre plateforme encore plus dynamique que jamais et augmenter l’engagement de votre audience.