← Tous les articlesIntégrer Face Up dans Genially : tutoriel iframe
April 11, 2026
Mame-Mor Fall

Intégrer Face Up dans un module Genially : tutoriel iframe pas-à-pas

Vous avez un module Genially qui présente un sujet relationnel (gestion de conflit, recadrage, écoute client) et vous voulez ajouter une vraie mise en situation conversationnelle entre deux slides. Bonne nouvelle : Genially supporte l'intégration de contenu externe via iframe. Ce tutoriel détaille la procédure pas-à-pas pour intégrer un scénario Face Up dans une slide Genially, avec les bons paramètres pour un rendu propre et une expérience apprenant fluide.

Pré-requis

Avant de commencer, vérifiez trois éléments. Premièrement, vous avez un compte Face Up et au moins un scénario publié. Si ce n'est pas le cas, voir le tutoriel de création de scénario qui s'applique aussi à Genially. Deuxièmement, vous avez un compte Genially qui permet d'insérer du contenu externe. Troisièmement, vous savez à quel endroit du module vous voulez insérer la mise en situation : idéalement après l'apport de contenu et avant la phase de débrief.

Étape 1 : publier le scénario Face Up et récupérer l'URL d'intégration

Connectez-vous à Face Up et ouvrez le scénario à intégrer. Récupérez l'adresse d'intégration de la page Face Up de ce scénario, puis copiez-la : vous en aurez besoin à l'étape suivante.

Étape 2 : préparer la slide Genially de destination

Dans Genially, créez une nouvelle slide ou ouvrez celle où vous voulez placer la simulation. Pour un confort de lecture optimal, dédiez une slide entière à la mise en situation : n'essayez pas de la placer en surimpression d'un autre contenu.

Dimensions recommandées

Le ratio Genially par défaut est 16:9. Sur une slide en 1920 × 1080, prévoyez une zone d'au moins 1280 × 720 pour l'iframe, centrée. Laissez de la marge en haut pour un titre court ("Entraînez-vous : la conversation avec votre collaborateur"), et en bas pour une consigne de durée ("Comptez 7 à 10 minutes").

Étape 3 : insérer l'élément iframe dans Genially

Dans Genially, utilisez l'option d'insertion de contenu externe (code HTML ou embed) et collez l'adresse d'intégration Face Up récupérée à l'étape 1, ou le code iframe correspondant.

Si vous collez un code iframe, vérifiez qu'il autorise le micro et la caméra (attribut allow) : sans cela, le navigateur peut refuser l'accès au micro de l'apprenant, ce qui empêche l'échange à la voix. Validez. Genially affiche un placeholder dans l'éditeur ; le vrai rendu apparaît en mode prévisualisation.

Redimensionner et positionner

Une fois l'iframe insérée, redimensionnez-la pour qu'elle occupe la zone prévue. Maintenez le ratio. Centrez-la dans la slide. Si vous travaillez en équipe, ajoutez une note pour vos collègues concepteurs : "Iframe Face Up, scénario X, ne pas modifier l'URL".

Étape 4 : tester en conditions réelles

Passez en mode prévisualisation Genially et testez l'enchaînement. Vérifiez quatre points. (1) La simulation se charge sans message d'erreur de mixed content. (2) Le micro et la caméra fonctionnent : l'échange se fait à la voix et en vidéo. (3) La navigation Genially reste accessible autour de l'iframe : l'apprenant doit pouvoir avancer ou reculer dans le module sans rester bloqué dans la simulation. (4) Le rendu mobile est correct si vos apprenants utilisent tablette ou smartphone.

Cas du tracking SCORM

Si votre module Genially est exporté en SCORM pour un LMS, le tracking de complétion fonctionne sur la base de la lecture des slides. La simulation Face Up intégrée dans une slide ne fait pas remonter de score par ce biais. Pour obtenir le score et la complétion dans le carnet de notes, ajoutez la mise en situation directement dans votre LMS en LTI 1.3. Voir guide complet plateforme e-learning 2026.

Étape 5 : communiquer les consignes à l'apprenant

Une mise en situation conversationnelle change la posture de l'apprenant : il passe de la lecture passive à la production active. Ce changement mérite d'être annoncé. Avant la slide d'intégration, prévoyez une slide de consigne courte qui dit trois choses : (1) ce qu'on lui demande de faire ("Vous allez mener un entretien avec un collaborateur joué par une IA"), (2) la durée prévue ("Comptez 8 minutes"), (3) ce qu'il faut faire après ("Vous reviendrez ensuite sur ce module pour le débrief").

Erreurs fréquentes

Mixed content : si Genially est servi en HTTPS et que vous insérez une URL en HTTP, le navigateur bloque. Toujours utiliser une adresse en https://.

Micro refusé : oubli de l'attribut allow. Le revérifier dans le code de l'iframe.

Cadrage trop petit : sur tablette en mode portrait, une iframe de 800px de large devient illisible. Tester en mode portrait avant de publier.

Lecture séquentielle bloquée : si la slide d'intégration est marquée comme obligatoire avec un déblocage conditionnel, vérifier que la condition utilise un événement Genially compatible. À défaut, retirer la condition pour la slide d'iframe.

Ce qu'on gagne au final

L'apprenant traverse un parcours unifié dans Genially mais accède à un vrai entraînement conversationnel sur les moments où ça compte. La direction formation conserve son investissement Genially, ajoute une brique IA sur les compétences relationnelles, et donne à l'apprenant un débriefing après chaque échange. Pour aller plus loin sur l'architecture pédagogique, voir le guide pilier sur les outils auteur et l'IA conversationnelle.

Conclusion

L'intégration iframe entre Face Up et Genially est techniquement simple : quelques minutes par slide une fois la procédure connue. La vraie valeur n'est pas technique, elle est pédagogique : elle vous permet de garder Genially pour ce qu'il sait faire (transmission visuelle rapide) et d'y greffer la pratique conversationnelle là où votre module le demande. Le résultat : un module sensiblement plus efficace sur les compétences relationnelles, sans devoir reconstruire toute votre stack.

Plus d'articles

Découvrez nos articles similaires

Transformez vos formations
en expériences immersives !

Prêts à créer des formations qui obtiennent des résultats mesurables ?