L’outil de création HTML te permet d’intégrer du contenu interactif et des médias directement dans tes pages ou articles d’actualités. Cette fonctionnalité donne du contexte supplémentaire, des fonctionnalités et de l’engagement à ton contenu en affichant des outils externes, des vidéos ou des diffusions en direct en parallèle de tes communications internes.
L’intégration de contenu se fait généralement à l’aide d’un iframe ou d’un code d’intégration fourni par des services tiers.
Cette fonctionnalité est disponible lorsque tu utilises l'ancien outil de création HTML dans Pages ou l'outil de création d'articles.
Appareil(s) : création sur ordinateur de bureau, accessible sur ordinateur et sur mobile
Rôles/Autorisations :
- Administrateur système
- Éditeur
- Éditeur de Global Pages
- Propriétaires d’espaces/administrateurs d’espaces (pour les articles d’espaces)
Intégration de contenu à l’aide des iFrames
Un iFrame (cadre en ligne) est un élément HTML qui te permet d’afficher du contenu provenant d’un autre site web directement à l’intérieur d’une page.
Cet outil peut être utilisé pour intégrer des pages Web, des formulaires, des vidéos, des outils interactifs, des tableaux de bord ou des tableaux de collaboration.
Comment ajouter une iFrame
- Ouvre la page ou l’article de presse que tu souhaites modifier.
- Dans l’éditeur, va dans Outils.
- Sélectionne le code source.
- Colle l’iFrame ou intègre le code fourni par le service externe.
- Enregistrez vos modifications.
Le contenu intégré apparaîtra alors dans la page.
Exemple de code iFrame
Voici un exemple d'iFrame de base utilisé pour intégrer une page Web :
<p>< iframe src= " https://productportal.workvivo.com" width= " 100% " height= " 1000px " frameborder= " 0 " marginwidth= " 0px " marginheight= " 0px " scrolling= " yes " allowfullscreen= " allowfullscreen " data-mobile-width= " 100% " data-mobile-height= " 1000 px " ></iframe></p>
- src = « https://productportal.workvivo.com » : cette URL sera donc intégrée.
- width = « 100 % » : il prendra autant de largeur que possible dans la page/l'article.
- height = « 1000 px » : sa hauteur sera définie sur 1000 pixels.
- scrolling = « oui » : l'iFrame a une fonction de défilement et n'est pas statique.
Remarque : il existe des paramètres de taille distincts pour le mobile (data-mobile-width et data-mobile-height), dans cet exemple cependant, les dimensions sont les mêmes que pour le web.
Affichage Web :
Affichage sur mobile :
Remarque: Si tu rencontres l'erreur ci-dessous, contacte ton chef de projet en matière d'expérience client ou soumets une demande via le centre d'aide.
Personnaliser le contenu intégré
Comme le contenu est affiché depuis un site web externe, la plupart des éléments visuels doivent être contrôlés sur la plateforme hôte.
Voici quelques exemples d'éléments qui ne peuvent pas être personnalisés dans Workvivo :
- Images
- Couleurs et style
- Mise en page
- Réactivité du site
Cependant, tu peux ajuster certains paramètres d’affichage sur Workvivo. Par exemple :
- Largeur
- Hauteur
- Si le contenu est défilable ou statique
Intégrer des diffusions en direct ou des webinaires
Des diffusions en direct et les webinaires peuvent également être intégrés dans des pages en utilisant le code d’intégration fourni par la plateforme vidéo.
Cette option est particulièrement utile lorsque tu héberges du contenu qui pourrait être externe à Workvivo, comme des diffusions externes ou des diffusions en direct, des enregistrements de webinaires ou des annonces vidéo.
Comment intégrer une diffusion en direct
- Ouvre la vidéo en direct.
-
Copie le code d'intégration du fournisseur de la vidéo.
- Modifie ta page.
-
Cliquez sur l’icône Insérer un média.
- Sélectionne intégrer.
- Colle le code d'intégration.
-
Clique sur Enregistrer.
Le cadre vidéo de la diffusion en direct apparaîtra dans la page.
Modifier les dimensions du cadre vidéo
Si la vidéo intégrée semble trop petite, tu peux redimensionner le cadre média en cliquant sur la vidéo intégrée dans l’éditeur, en sélectionnant le bouton Insérer un média et en ajustant les dimensions du cadre comme tu le souhaites.
Par exemple, tu peux définir la largeur sur 950 et la hauteur sur 549.
Cela permet à la vidéo de s’afficher de manière plus visible dans la mise en page.
Résolution des problèmes liés au contenu intégré
Si le contenu intégré n’apparaît pas correctement, commence par vérifier que le code d’intégration a été entièrement copié à partir de la source. Confirme ensuite que le site web externe autorise l’intégration, car certaines sources bloquent l’intégration de leur contenu dans d’autres emplacements. Enfin, assure-toi que les dimensions sont adaptées à la mise en page.
Si tu rencontres encore des problèmes, envoie une demande au centre d’aide.
Cet article concerne l’ancien outil de création HTML. Si tu utilises le nouvel outil d’édition de pages basé sur des blocs, consulte la section Intégrer du contenu dans les pages.