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.
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 Pro — l'intégration iframe est limitée en version gratuite. 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.
Connectez-vous à votre console Face Up. Ouvrez le scénario à intégrer. Cliquez sur "Partager" puis sélectionnez l'option "Intégrer dans un site externe". Vous obtenez une URL d'embed du type https://app.face-up.fr/embed/{scenario_id}. Copiez cette URL — vous en aurez besoin à l'étape suivante.
Avant de copier, vérifiez deux paramètres dans les options de partage. Authentification : choisissez "anonyme avec ID externe" si vous voulez que l'apprenant Genially soit reconnu sans recréer de compte. Mode plein écran : activez-le pour que la simulation s'affiche correctement sur ordinateur portable et tablette.
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.
Le ratio Genially par défaut est 16:9. Une simulation Face Up s'affiche correctement à partir de 800 × 600 pixels. 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").
Dans la barre d'outils Genially, cliquez sur "Insérer" puis sur "Autres" et enfin sur "Insérer du HTML / Embed code". Une fenêtre s'ouvre avec un champ texte. Collez l'URL d'embed Face Up récupérée à l'étape 1, ou collez directement le code iframe complet :
<iframe src="https://app.face-up.fr/embed/{scenario_id}" width="100%" height="100%" frameborder="0" allow="microphone; camera; fullscreen" allowfullscreen></iframe>
L'attribut allow="microphone; camera" est important : sans lui, le navigateur peut refuser l'accès au micro de l'apprenant, ce qui empêche les modes voix. Validez. Genially affiche un placeholder dans l'éditeur ; le vrai rendu apparaît en mode prévisualisation.
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".
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 fonctionne si votre scénario est en mode voix. (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.
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. Pour un suivi plus fin de la performance dans la simulation Face Up (score de progression, axes de débrief), utilisez les exports xAPI Face Up qui remontent dans votre LMS si celui-ci les supporte. Voir guide complet plateforme e-learning 2026.
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").
Mixed content : si Genially est servi en HTTPS et que vous insérez une URL en HTTP, le navigateur bloque. Toujours utiliser https://.
Micro refusé : oubli de l'attribut allow. Le re-vé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.
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 gagne une mesure de progression réelle. Pour aller plus loin sur l'architecture pédagogique, voir le guide pilier sur les outils auteur et l'IA conversationnelle.
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.
