Insérer un widget

Les widgets sont des petites applications qui intègrent des contenus variés dans les pages web de votre site. Le mot provient de la diminution des termes anglais « window » et « gadget ».

L'intégration d'un widget s'effectue en back-office, en cliquant sur le "+"  et sur une des icônes de la barre de menu

Lorsque vous avez inséré un widget en back-office une barre de menu spécifique s'affiche en cliquant sur le titre ou le fond grisé

Elle vous permet de :

• déplacer verticalement le widget
• éditer la fenêtre de saisie de la taille d'affichage du widget
• positionner une ancre
• aligner horizontalement le widget : gauche - centre - droite
• supprimer le widget

Insérer une vidéo

Quel type de vidéo peut-on insérer ?

Des vidéos hébergées sur les serveurs de la médiathèque INRAE, YouTube, Dailymotion ou Viméo
Si votre vidéo est hébergée sur un autre serveur nous vous conseillons de faire une image de cette vidéo et d'insérer un lien vers son URL

Comment intégrer le widget vidéo ?

• cliquer sur les icones  "+" et "video" >> une fenêtre popup s'affiche
• renseigner les champs 
  • titre : il ne s'affiche pas dans la page web
  • url de la vidéo
  • largeur et hauteur qui déterminent la taille d'affichage de la vidéo dans la zone texte
  • cliquer sur le bouton Sauvegarder

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.

Voir aussi : flyer vidéo

Insérer un fil Instagram

Prérequis

• avoir un compte Instagram

Comment créer le fil instagram ?

• se connecter à l'interface avec son compte
• sélectionner une publication 
• via les 3 points, en haut et à droite de l'écran, sélectionner l'entrée "Intégrer" et cliquer sur le bouton "Copier le code intégré"

Comment intégrer le code dans le widget Instagram ?

• cliquer sur les icones  "+" et "instagram" 
• dans la première fenêtre qui s'affiche, saisir les valeurs de la taille d'affichage du widget puis sauvegarder
  à noter : actuellement ces valeurs ne sont pas prises en compte. Le fil s'affiche au format 326 X 531
• dans la fenêtre nommée Instagram, cliquer sur le crayon bleu pour accéder à la zone de saisie du code intégré

Voir aussi : flyer instagram

Insérer un contenu Genial.ly

Prérequis

• avoir un compte Genial.ly
• ce compte peut être gratuit (données partagées sur le web) ou payant (garantie de la confidentialité des données,  le système de sécurité étant plus élevé dans la version payante).

Comment créer un contenu interactif Genial.ly ?

• se connecter à l'interface avec son compte
• créer le visuel Genial.ly : insérer de l'interactivité dans votre contenu 

Pour obtenir le code IFRAME de votre visuel

• dans votre tableau de bord
  • cliquer sur le bouton "Partager" qui apparaît lorsque au passage de votre souris sur la vignette de votre création. Si vous ne voyez pas cette option, c'est que votre création n'est pas encore publiée. Vous devez la publier pour pouvoir la partager.
  • sélectionner l'onglet "Insérer" et vous verrez apparaître les deux codes, l'iframe et le script. Copier de préférence le code IFRAME
• en mode édition de votre visuel
  • cliquer sur le bouton "Partager" qui se trouve en haut à droite de l'éditeur. Si vous ne voyez pas cette option, c'est que votre création n'est pas encore publiée. Vous devez la publier pour pouvoir la partager.
  • sélectionner l'onglet "Insérer" et vous verrez apparaître les deux codes, l'iframe et le script. Copier de préférence le code IFRAME

Comment intégrer le code dans le widget Genial.ly ?

• cliquer sur les icones  "+" et "Genial.ly" 
• dans la première fenêtre saisir un titre, les valeurs de la taille d'affichage du widget puis sauvegarder
• dans la fenêtre nommée Genial.ly, cliquer sur le crayon bleu pour accéder à la zone de saisie du code intégré

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.

Voir aussi : flyer genial.ly

Insérer une carte de géolocalisation

Cette fonctionnalité vous permet d'afficher une carte  Google Maps, OpenStreetMap, Géoportail, 

Comment générer une carte de géolocalisation ?

• se connecter à l'interface https://www.google.fr/maps
• saisir les coordonnées recherchées pour afficher la carte

Pour obtenir le code IFRAME de votre carte

• cliquer sur le bouton "Partager" et, dans la fenêtre qui s'ouvre, sélectionner le lien "Intégrer une carte"
• cliquer sur le lien "COPIER LE CONTENU HTML"

Comment intégrer le code dans le widget "Carte" ?

• cliquer sur les icones  "+" et "Carte" 
• dans la première fenêtre saisir un titre et définir les propriétés d'affichage du widget (largeur, hauteur) puis sauvegarder
• dans la fenêtre nommée Carte, cliquer sur le crayon bleu et copier le code à intégrer

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.

Voir aussi : flyer Gogle Maps

Insérer un fil twitter

Comment créer un fil twitter ?

• se connecter à l'interface https://publish.twitter.com/
• saisir l'identifiant du fil twitter à insérer - ex : @INRAE_France
• sélectionner l'affichage "Embedded Timeline" : le widget twitter défini par défaut s'affiche.

Récupérer le code IFRAME de votre fil twitter

• cliquer sur le bouton  "Copy code" pour récupérer le code à intégrer au format par défaut
  à noter : il est inutile de reformater le widget dans l'interface publish de twitter car les propriétés 'affichage seront définies dans le  back-office de votre site

Comment intégrer le code récupéré dans le widget twitter ?

• cliquer sur les icones  "+" et "Twitter" 
• dans la première fenêtre saisir un titre et définir les propriétés d'affichage du widget (largeur, hauteur, couleur du fond et présence ou absence de l'image d'illustration) puis sauvegarder
• dans la fenêtre nommée Twitter, cliquer sur le crayon bleu et copier le code à intégrer

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.

Voir aussi : flyer twitter

Insérer un contenu Piktochart

Piktochart est un outil en ligne qui permet de créer des infographies, des présentations, des rapports ou encore des affiches et flyers.

Prérequis

• avoir un compte Picktochart
• ce compte peut être gratuit (données partagées sur le web) ou payant (garantie de la confidentialité des données,  le système de sécurité étant plus élevé dans la version payante).

Comment créer un contenu interactif Piktochart ?

• se connecter à l'interface avec son compte
• créer le visuel Piktochart : insérer de l'interactivité dans votre contenu 

Pour obtenir le code IFRAME de votre visuel

• dans votre tableau de bord
  • cliquer sur les 3 points qui apparaissent au passage de votre souris sur le visuel de votre création. 
  • sélectionner l'entrée "Share" et vous verrez apparaître le code HTML à partager
  • cliquer sur le bouton "Copy" et dans le code copié, repérer l'identifiant piktochart du visuel, exemple, en gras dans l'url : https://create.piktochart.com/output/60039585-memo-migration
• en mode édition de votre visuel
  • cliquer sur le bouton "Share" qui se trouve dans la barre de menu du haut de l'éditeur. 
  • cliquer sur le bouton "Copy Embed Code". Exemple de code copié : <div class="piktowrapper-embed" data-uid="7073c888c282-memo-migration"></div><script>(function(d){var js, id="pikto-embed-js", ref=d.getElementsByTagName("script")[0];if (d.getElementById(id)) { return;}js=d.createElement("script"); js.id=id; js.async=true;js.src="https://create.piktochart.com/assets/embedding/embed.js";ref.parentNode.insertBefore(js, ref);}(document));</script>
  • repérer l'identifiant du visuel en gras dans l'exemple ci-dessus 

Comment intégrer le code dans le widget Picktochart ?

• cliquer sur les icones  "+" et "Piktochart" 
• dans la fenêtre saisir l'identifiant Piktochart, les valeurs de la taille d'affichage du widget puis sauvegarder

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.

Voir aussi : flyer Piktochart

Insérer un contenu externe

Quel type de contenu externe peut-on insérer ?

Des contenus Google (docs / sheets / forms / agenda...), Enquêtes/Sondages Limesurvey , document pdf enregistré dans la médiathèque du site, flux généré par l'application Hal Tools INRIA, contenu Research Gate

Comment insérer un contenu externe ?

• cliquer sur les icones  "+" et "contenu externe" >> une fenêtre popup s'affiche
• renseigner les champs 
  • titre : il ne s'affiche pas dans la page web
  • largeur et hauteur qui déterminent la taille d'affichage de la vidéo dans la zone texte
  • url du contenu à insérer
  • cliquer sur le bouton Sauvegarder

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.

Cas des enquêtes / sondages INRAE Limesurvey

Vous pouvez désormais afficher au sein d'une page, un sondage LimeSurvey créé dans les environnements internet  (sondages.inrae.fr) ou intranet (sondages.intranet.inrae.fr) INRAE. Pour afficher un sondage créé dans un environnement hors INRAE, veuillez déclarer un ticket Ariane.

À noter : un sondage créé dans l'espace intranet ne s'affichera pas dans un site internet.

Restitution en front-office

Pour ne pas afficher le bandeau d'entête avec le logo INRAE ainsi que le pied de page de votre questionnaire, sélectionnez le modèle "Template INRAE pour iframe" dans la section "paramètres généraux du questionnaire" de l'interface d'administration de Limesurvey.

En back-office (cliquez pour agrandir l'image)
​​​​​​

En front-office : modèle iframe

En front-office : modèle par défaut

Insérer un flux RSS

Quel type de flux peut-on  insérer ?

Ce widget a été développé pour inclure dans la page un flux de publications hébergées sur la plateforme HAL (archive ouverte multidisciplinaire permettant de partager en libre accès les résultats de recherche)

Comment générer un flux rss HAL ?

L'interface générique de recherche de résultats est https://hal.science/ mais vous pouvez effectuer votre recherche spécifique sur  https://hal.inrae.fr/

Après avoir cliqué sur l'entrée RSS, vous devez copier l'URL du flux affiché

Comment insérer un flux rss ?

• cliquer sur les icones "+" et "Flux RSS"
• dans la fenêtre, saisir l'adresse du flux RSS à afficher dans le champ nommé "Url RSS", spécifier la hauteur du bloc à afficher dans le champ "Hauteur"

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.

Voir aussi : flyer HAL INRAE

Insérer un fond grisé

• cliquer sur les icones "+" et "Fond grisé"
• cliquer sur le crayon bleu pour accéder à la zone de saisie = zone de texte riche (texte mis en forme, image, vidéo...) qui doit apparaître sur un fond grisé. 

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.

Insérer un saut de ligne

• pour éviter la superposition de widgets, d'images et ainsi éviter le calcul de paragraphes à insérer
• précédé et suivi d'un paragraphe vide, pour intégrer un intervalle entre deux paragraphes

• cliquer sur les icones  "+" et "Saut de ligne" 

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.

Insérer une vue 360°

Quel type de vue 360 peut-on  insérer ?

Vous pouvez insérer dans votre page des vues 360° hébergées sur le s plateformes "Imageenvue" et "Uptale"
Les URLs compatibles sont de type :

• https://www.uptale.io/
• https://www.imageenvue.com/

Pour afficher une vue 360° hébergée sur une autre plateforme ou ayant un nom de domaine différent, veuillez déclarer un ticket Ariane.

Comment insérer une vue 360° ?

• cliquer sur les icones "+" et "Vue 360°"
• dans la fenêtre, spécifier les hauteur et largeur de la zone d'affichage et l'url de la vue. 

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.

Insérer un menu accordéon

Un menu accordéon est une liste d'en-têtes qui affichent un complément d'information lorsque vous cliquez sur chacun d’eux. Le texte de l'en-tête apparaitra précédé d'un liseré de la couleur du site.

Comment insérer un menu accordéon ?

• cliquer sur les icones "+" et "Accordeon"
• dans la première modale, saisir le texte de l'en-tête qui apparaitra au format plié
• dans le widget "Accordéon" cliquer sur le crayon sur fond bleu afin de saisir le texte riche qui s'affichera au format déplié. Ce texte peut être mis en forme et contenir des images, des fichiers à télécharger ou d'autres widgets.

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.

Voir aussi : tutoriel

Insérer des colonnes

Ce widget vous permet d'afficher du texte réparti sur deux ou trois colonnes.

Comment afficher du texte en colonnes ?

• cliquer sur les icônes "+" et "Colonnes"
• dans la première modale un menu déroulant vous permet de choisir le type d'affichage : 2 ou 3 colonnes.
•  après avoir sauvegardé votre choix le widget "Colonnes" s'affiche.

2 cas d’utilisation :

• Répartition automatique des paragraphes d’un texte dans les colonnes définies
• Chaque colonne contient du texte composé de plusieurs paragraphes

Répartition automatique du texte dans les colonnes

Dans le widget  "Colonnes" , cliquez sur le crayon sur fond bleu puis saisissez votre texte.
 Chaque paragraphe se positionne automatiquement dans une colonne ➔ attention aux paragraphes sans texte qui génèrent un espace vide dans les colonnes.

Dans chaque paragraphe vous pouvez appliquer un style sur des caractères (bold, italique, souligné…), inclure un fichier à télécharger, créer une liste à puces.

Voir aussi : tutoriel

Mise en forme spécifique dans chaque colonne

Lorsque vous voulez, au sein d'une même colonne, afficher des paragraphes qui se succèdent, vous devez créer dans le widget "Colonnes" deux ou trois autres widgets de  même type. Pour ces derniers, sélectionnez dans le menu « Affichage en colonnes » : Désactivé. Il n'y aura pas de répartition automatique du texte comme décrit dans le paragraphe précédent.

En résumé :

• créer un widget "Conteneur" (sélection de deux ou trois colonnes)
• dans ce conteneur créer autant de widgets  "Colonnes" ( menu désactivé)
• dans ces derniers, cliquez sur le crayon sur fond bleu afin de saisir du texte riche

Insérer un diaporama ou une galerie d'images

Ce widget vous permet d'insérer une image qui pointera vers une galerie d'image ou un diaporama.
Les images doivent être enregistrées dans un folder (dossier) de la médiathèque du site : la galerie exposera les images de ce folder dans une popup.
L'ordre d'affichage des images est celui défini dans le folder.

Comment insérer une galerie d'images ou un diaporama ?

• en back-office, onglet "Media" récupérer l'url du dossier contenant les images 
• cliquer sur les icones "+" et "Galerie"
• dans la fenêtre modale, configurez le widget "Galerie"
  • saisir l'url du folder ou dossier contenant les images
  • choisir, dans le menu déroulant, la taille de l'image d'illustration qui s'affichera dans le texte
  • saisir, si nécessaire,  un texte dans la zone "Légende sous l'image d'illustration" : la légende s'affichera à partir du format medium
  • sélectionner ou pas le défilement automatique des images et définir son délai
  • sauvegarder la saisie

En cliquant sur l'intitulé du widget et sur le crayon sur fong gris, vous pouvez aligner l'image d'illustration avec du texte ou avec un autre élément (image, autre widget).