Configurer un widget HTML

Le widget HTML vous permet d'intégrer du contenu personnalisé sur la page d'accueil et les pages de groupe de votre plateforme. Utilisez-le pour afficher divers éléments, des simples bannières aux outils tiers intégrés.

Voici des exemples de ce que vous pouvez afficher :

• des videos (YouTube, Vimeo) ;
• des cartes (Google Maps) ;
• des présentations interactives (Genially, Prezi) ;
• des formulaires et enquêtes (Typeform, Google Forms) ;
• des calendriers (Google Calendar) ;
• des widgets (mises à jour météo, compte à rebours, horloges, etc.).

Voici comment fonctionne le widget HTML :

• vous pouvez ajouter plusieurs widgets HTML par page et les déplacer à n'importe quelle position dans la mise en page de votre page ;
• la largeur maximale du widget est définie sur la largeur de la page pour un affichage cohérent ;
• les widgets HTML sont affichés uniquement sur la page où ils sont ajoutés ; ils ne sont pas transférés aux sous-groupes.
• Si votre organisation utilise la solution Globalization, le carrousel peut être traduit dans la langue préférée de chaque utilisateur. Pour plus d'informations, consultez Traduire un widget HTML.

Vous n'avez pas besoin d'être développeur pour utiliser ce widget. Utilisez nos exemples de code pour ajouter des titres de section stylisés, des bannières de texte ou intégrer du contenu externe.

Si vous êtes à l'aise avec HTML et CSS, vous pouvez écrire du code personnalisé pour contrôler la mise en page et le style à l'intérieur du widget. Voir les Conseils pour la personnalisation du widget HTML pour plus d'informations.

Ajouter un widget HTML

• Si vous ne pouvez pas accéder au panneau de configuration de la mise en page comme décrit dans la première étape, remplacez l'étape 1 par :
  • Pour la page d'accueil : En haut à droite de votre page d'accueil, cliquez sur Configurer la mise en page.
  • Pour une page de groupe : Dans la barre latérale gauche, cliquez sur un groupe. Ensuite, cliquez sur Configurer la mise en page en haut à droite de la section principale.

1. Accédez au panneau de configuration de la mise en page :
   • Pour la page d'accueil : Dans la barre latérale gauche, cliquez sur Configuration de la page d'accueil.
   • Pour une page de groupe : Dans la barre latérale gauche, survolez un groupe, puis cliquez sur  Configurer la mise en page.
2. Dans le panneau Configurer la mise en page à droite, dans la section Ajouter un widget, cliquez sur HTML.
3. Collez votre code HTML. Vous pouvez soit :
   • Utilisez un exemple de code, et modifiez-le si nécessaire.
   • Collez votre propre code HTML complet avec CSS en ligne/interne.
4. Dans le coin inférieur droit, cliquez sur Appliquer.
   Le widget HTML apparaît sur la page.

Modifier un widget HTML

• Si vous ne pouvez pas accéder au panneau de configuration de la mise en page comme décrit dans la première étape, remplacez l'étape 1 par :
  • Pour la page d'accueil : En haut à droite de votre page d'accueil, cliquez sur Configurer la mise en page.
  • Pour une page de groupe : Dans la barre latérale gauche, cliquez sur un groupe. Ensuite, cliquez sur Configurer la mise en page en haut à droite de la section principale.

1. Accédez au panneau de configuration de la mise en page :
   • Pour la page d'accueil : Dans la barre latérale gauche, cliquez sur Configuration de la page d'accueil.
   • Pour une page de groupe : Dans la barre latérale gauche, survolez un groupe, puis cliquez sur Configurer la mise en page.
2. Dans le panneau Configurer la mise en page à droite, cliquez sur le HTML que vous souhaitez modifier.
3. Modifiez le contenu dans le champ fourni.
4. En bas à droite, cliquez sur Appliquer.

Supprimer un widget HTML

• Si vous ne pouvez pas accéder au panneau de configuration de la mise en page comme décrit dans la première étape, remplacez l'étape 1 par :
  • Pour la page d'accueil : En haut à droite de votre page d'accueil, cliquez sur Configurer la mise en page.
  • Pour une page de groupe : Dans la barre latérale gauche, cliquez sur un groupe. Ensuite, cliquez sur Configurer la mise en page en haut à droite de la section principale.

1. Accédez au panneau de configuration de la mise en page :
   • Pour la page d'accueil : Dans la barre latérale gauche, cliquez sur Configuration de la page d'accueil.
   • Pour une page de groupe : Dans la barre latérale gauche, survolez un groupe, puis cliquez sur Configurer la mise en page.
2. Dans le panneau de droite, survolez le widget HTML pertinent et cliquez sur  Supprimer.
3. En bas à droite, cliquez sur Appliquer.

Extraits de code

Utilisez ces extraits de code pour ajouter rapidement du contenu personnalisé. Ces extraits vous donnent la structure de base pour créer vos propres contenus. Le widget HTML fournit l’espace sur la page, mais c’est à vous de faire en sorte que le contenu que vous ajoutez s’affiche correctement et fonctionne comme prévu.

Liens rapides :

• Titre de section personnalisé
• Bannière de texte personnalisée
• Contenu externe intégré
  • Où trouver votre URL embed src
  • Exemple d'intégration simple
  • Exemple d'intégration avec 2 éléments côte à côte
  • Exemple d'intégration avec 3 éléments côte à côte
  • Mise en page de type « Bento box »

Titre de section personnalisé

Utilisez cet extrait pour créer des titres personnalisés pour des sections spécifiques de votre page. Remplacez Titre de section personnalisé par le titre de votre section.

<div id="widget_html_title">Custom section title</div>

<style>
     #widget_html_title{
          font-size: 24px;
          font-weight: 600;
          line-height: 32px;
     }
</style>

Bannière de texte personnalisée

Créez une bannière ou un bloc de texte formaté avec vos couleurs, polices et messages. Remplacez Titre et Description par votre propre texte, et modifiez les couleurs (#007bff et #ffffff) et les polices.

<div id="widget_html_banner">
  <h2>Title</h2>
  <p>Description</p>
</div>

<style>
     #widget_html_banner{
          background-color: #007bff; /* Example background color (blue) */
          color: #ffffff; /* Example text color (white) */
          padding: 20px;
          text-align: center;
          border-radius: 8px;
          font-family: Arial, sans-serif;
     }
     #widget_html_banner h2{
          font-size: 28px;
          margin-top: 0;
          margin-bottom: 10px;
     }
     #widget_html_banner p{
          font-size: 16px;
          margin-bottom: 0;
     }
</style>

Contenu externe intégré

Utilisez les extraits de code ci-dessous pour afficher du contenu provenant de services tiers, tels que YouTube, Google Maps, Google Agenda, Typeform, Genially, et plus encore. Remplacez la valeur src dans chaque extrait par votre propre URL d'intégration.

Où trouver votre URL src d'intégration

Sur la plupart des outils tiers, recherchez des options telles que « Partager », « Publier », « Intégrer » ou une icône qui ressemble à < >.

Ces outils vous donnent souvent un bloc de code complet qui ressemble à ceci :

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allowfullscreen></iframe>

Ne copiez pas l'intégralité du bloc de code. Copiez uniquement l'adresse web (URL) entre guillemets après src= (la partie qui commence par https://). Cette URL pointe directement vers le contenu que vous souhaitez afficher.

https://www.youtube.com/embed/VIDEO_ID/

Exemples :

• YouTube/Vimeo : Cliquez sur Partager → Intégrer, puis copiez l'URL src du code <iframe>.
• Google Maps : Recherchez un lieu, cliquez sur Partager → Intégrer une carte, puis copiez l'URL src du code <iframe>.
• Typeform/Google Forms/Autres outils : Utilisez la section Partager ou Publier pour trouver l'option Intégrer. Extrayez l'URL src.

Exemple d'intégration simple

Cet extrait de code de base sert à intégrer un seul élément d'intégration.

Remplacez http://example.com/embed/content par votre URL src d'intégration.

<iframe class="widget_html_iframe" src="http://example.com/embed/content"></iframe>

<style>
.widget_html_iframe {
  border: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}
</style>

Exemple d'intégration avec 2 éléments côte à côte

Cet extrait affiche 2 éléments (comme des vidéos, des documents ou des tableaux de bord) côte à côte.

Remplacez les éléments suivants par vos URL src d'intégration :

• http://example.com/embed/content1
• http://example.com/embed/content2

<div class="widget_html_gallery_2">
  <iframe class="iframe_embed" src="http://example.com/embed/content1"></iframe>
  <iframe class="iframe_embed" src="http://example.com/embed/content2"></iframe>
</div>

<style>
.widget_html_gallery_2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.iframe_embed {
  border: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}
</style>

Exemple d'intégration avec 3 éléments côte à côte

Utilisez ce code pour présenter 3 éléments dans une mise en page côte à côte.

Remplacez les éléments suivants par vos URL src d'intégration :

• http://example.com/embed/content1
• http://example.com/embed/content2
• http://example.com/embed/content3

<div class="widget_html_gallery_3">
  <iframe class="iframe_embed" src="http://example.com/embed/content1"></iframe>
  <iframe class="iframe_embed" src="http://example.com/embed/content2"></iframe>
  <iframe class="iframe_embed" src="http://example.com/embed/content3"></iframe>
</div>

<style>
.widget_html_gallery_3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.iframe_embed {
  border: none;
  width: 100%;
  aspect-ratio: 2.73;
  border-radius: 8px;
}
</style>

Mise en page de type « Bento box »

Ce modèle avancé organise plusieurs blocs de contenu intégrés dans un design « Bento Box ». Pour que cette mise en page avancée s'affiche au mieux, vous devrez peut-être ajuster le contenu que vous y intégrer :

• Choisissez un contenu qui s'affiche bien dans les différentes tailles de boîtes. Les boîtes plus grandes sont idéales pour les images importantes ou les informations plus détaillées, tandis que les boîtes plus petites conviennent bien aux éléments courts et clairs.
• Soyez conscient de la forme originale (comme large ou haute) de votre contenu intégré (en particulier les images et les vidéos). Si la forme du contenu ne correspond pas à la boîte, certaines parties peuvent être coupées ou vous risquez de voir des espaces vides autour.
• Bien que la mise en page Bento Box s'adapte à différentes tailles d'écran, assurez-vous que le contenu que vous intégrez est visible sur n'importe quelle taille d'écran.

Remplacez les éléments suivants par vos URL src d'intégration :

• http://example.com/embed/content1
• http://example.com/embed/content1
• http://example.com/embed/content1
• http://example.com/embed/content4

<div class="bento_wrapper">
  <iframe class="one" src="http://example.com/embed/content1"></iframe>
  <iframe class="two" src="http://example.com/embed/content2"></iframe>
  <iframe class="three" src="http://example.com/embed/content3"></iframe>
  <iframe class="four" src="http://example.com/embed/content4"></iframe>
</div>

<style>
* {
  box-sizing: border-box;
}

.bento_wrapper {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  grid-auto-rows: minmax(200px, auto);
}

.bento_wrapper > iframe {
  border: 2px solid rgb(200, 200, 200);
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.05);
  width: 100%;
  height: 100%;
  padding: 0;
}

.one {
  grid-column: 1 / 2;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 4;
}
.four {
  grid-column: 2 / 4;
  grid-row: 3;
}
</style>

Conseils pour la personnalisation du widget HTML

Chaque widget HTML fournit un champ dédié pour l'ajout de votre HTML et CSS personnalisés. Les styles et le contenu que vous ajoutez s'appliquent uniquement à l'intérieur de ce widget spécifique.

• Options de style : Utilisez le CSS en ligne (style="") ou le CSS interne (à l'intérieur d'une balise <style>) pour styliser le contenu de votre widget.
• Isolation des styles : Le CSS du widget est limité à ce widget. Il n'affectera pas le reste de la page, et les styles de la plateforme ne s'appliqueront pas à l'intérieur du widget.
• Intégration de contenu externe : Utilisez des balises <iframe> pour intégrer du contenu externe. La source doit utiliser HTTPS. Le contenu non sécurisé (HTTP) peut être bloqué par les navigateurs modernes et ne pas s'afficher.
• Limitations de sécurité : Les balises <script> et les styles z-index en ligne ne sont pas autorisés dans le widget HTML.
• Responsabilité d'affichage : Vous êtes responsable de vous assurer que le contenu du widget s'affiche correctement.

Bonnes pratiques

Suivez ces recommandations pour des résultats optimaux :

• Gardez les styles auto-contenus :
  • Incluez tout le CSS nécessaire dans le widget.
  • Le CSS personnalisé défini au niveau de la plateforme ou du groupe n'affecte pas le widget HTML. Pour réutiliser ces styles, copiez-les manuellement dans la balise <style> du widget.
• Utilisez des liens relatifs :
  • Liez vers d'autres pages de la plateforme en utilisant des URL relatives (ex. : /paths/:pathID/home).
  • Évitez les URL absolues (par exemple, https://mypf.360learning.com/paths/:pathID/home) pour garantir que les liens fonctionnent correctement sur les domaines personnalisés et le domaine principal 360Learning.
• Vérifiez toujours votre widget pour vous assurer que le contenu s'affiche et se comporte comme prévu sur toutes les tailles d'écran.