Clause de non-responsabilité: Cet article a été généré par traduction automatique.

Capture d’une démo interactive dans l’éditeur WYSIWYG avancé

Prev Next

NOTE

Les fonctionnalités de Floik AI sont disponibles dans tous les plans Document360 en tant que module complémentaire. Pour acheter ou en savoir plus, veuillez contacter notre support team.

La fonction de démonstration interactive permet aux utilisateurs de participer à une simulation de produit ou à une visite guidée au lieu de regarder une vidéo statique ou de lire des instructions textuelles. Il offre une expérience pratique où les utilisateurs peuvent cliquer, taper, survoler et explorer l'interface dans un environnement guidé.

Document360 offre des démos interactives intégrées et des options de formatage. Vous pouvez capturer votre écran, vos clics de souris et améliorer la démo interactive directement dans vos articles sans aucun outil externe.

Par exemple, si vous rédigez un article pratique sur la configuration des rôles d'utilisateur, vous pouvez enregistrer une démo interactive qui montre chaque étape en action. Cela aide les lecteurs à suivre visuellement et à comprendre le processus sans avoir besoin de deviner ou de se fier uniquement à des instructions textuelles.

NOTE

La fonction de démonstration interactive n'est disponible que pour le site KB 2.0.


Accéder à la démo interactive

Pour accéder à la démo interactive,

  1. Accédez à l'article souhaité dans l'éditeur WYSIWYG avancé.

  2. Tapez la commande /Interactive demobarre oblique et appuyez sur Entrée.

  3. Si l'extension de démonstration Document360 Interactive n'est pas installée, cliquez sur Installer.

    NOTE

    Cette extension n'est actuellement prise en charge que dans le navigateur Chrome .

  4. Dans le Chrome Web Store, cliquez sur Ajouter à Chrome.

  5. Une fois installé, revenez au portail de la base de connaissances.

Creating an interactive demo in the Advanced WYSIWYG editor

Enregistrement de l'écran

      La boîte de dialogue de démonstration interactive s'affiche.

  1. Dans la liste déroulante audio, sélectionnez l'option souhaitée ou sélectionnez Aucun audio à enregistrer sans son.

  2. Cliquez sur Suivant.

  3. Sélectionnez l'écran à capturer :

    • Onglet Chrome : enregistre uniquement l'onglet Chrome sélectionné.

    • Fenêtre : Enregistre uniquement la fenêtre de l'application sélectionnée.

  4. Cliquez sur Partager.

    L'écran sélectionné s'affiche avec le panneau d'enregistrement d'écran .

  5. Choisissez la résolution recommandée (16:9 ou 4:3).

  6. Cliquez sur Démarrer la capture pour commencer l'enregistrement.

  7. Cliquez sur Annuler pour annuler et revenir à l'écran précédent.

  8. Dans la section Flou sélectionné , cliquez sur Ajouter pour masquer des zones spécifiques de l'écran lors de l'enregistrement d'informations sensibles.

  9. Si nécessaire, activez l'option Afficher les commandes d'enregistrement à l'écran .

    Un logo Document360 apparaîtra dans le coin inférieur gauche de l'écran d'enregistrement. En cliquant sur le logo, l'enregistrement sera interrompu. Ce logo sera également visible dans la démo interactive enregistrée.

  10. Les clics de souris et les interactions seront capturés, et des indicateurs de clic seront affichés pour faciliter l'édition du guide.

  11. Cliquez sur Pause pour suspendre l'enregistrement et sur Enregistrer pour reprendre.

  12. Pour arrêter l'enregistrement, cliquez sur Arrêter le partage dans le panneau flottant ou sur Arrêter l'enregistrement dans le panneau d'enregistrement d 'écran .

    Après l'enregistrement, le système importera la démo interactive dans l'article. Cela peut prendre quelques instants.

Ajout d'éléments interactifs

Une fois traitée, la démo interactive enregistrée apparaît dans le panneau de l'éditeur de démo interactive .

  1. Cliquez sur l'icône Lecture () pour prévisualiser la démo interactive enregistrée.

    L' éditeur de démonstration interactif fournit des outils de formatage, notamment :

Screenshot of a video editor interface with various editing tools and options displayed.

Ajouter des éléments

un. Appel à l'action : Pour ajouter un bouton interactif dans la démo

  1. Dans le volet de droite, cliquez sur Appel à l'action.

  2. Entrez le titre et la description.

    NOTE

    Dans le champ Description, sélectionnez le contenu et vous pouvez utiliser les outils de formatage de base tels que Gras (), Italique (), Souligné (), Liste ordonnée (), Liste non ordonnée () et Lien hypertexte ().

  3. Dans la section Branches , entrez le nom du bouton et sélectionnez l'action souhaitée :

    1. URL externe : saisissez le lien de destination.

    2. Étape suivante : Affiche un message ou des informations pour l'utilisateur.

  4. Cliquez sur Ajouter pour inclure un autre bouton.

  5. Choisissez la position de bouton souhaitée dans la section Position .

  6. Activez la bascule de voix off IA pour ajouter une narration :

    1. Sélectionnez une voix dans la liste déroulante.

    2. Entrez le script de narration.

    3. Cliquez sur l'icône Lecture () pour afficher un aperçu.

  7. Cliquez sur Appliquer.

b. Points chauds

Les points d'accès peuvent être utilisés pour présenter l'effet de clic de souris dans la démo interactive.

  1. Allez à la durée exacte dans la vidéo et cliquez sur Point d'accès pour l'ajouter.

    Dans la boîte de dialogue Points chauds , passez en revue la liste des points d'accès existants (le cas échéant).

  2. Naviguez jusqu'à l'emplacement souhaité dans la vidéo et cliquez sur Ajouter pour ajouter un point d'accès à la chronologie.

  3. Vous pouvez faire glisser la zone réactive à la position souhaitée.

  4. Activez l'option Afficher le point d'accès pour afficher le point d'accès.

  5. Dans le champ Heure , entrez l'heure souhaitée. Utilisez l'option Réglage précis en millisecondes () pour des réglages précis.

  6. Entrez un titre dans le champ Titre .

  7. Entrez la description dans le champ Description .

    NOTE

    Dans le champ Description , sélectionnez le contenu et vous pouvez utiliser les outils de formatage de base tels que Gras (), Italique (), Souligné (), Liste ordonnée (), Liste non ordonnée () et Lien hypertexte ().

  8. Sous Paramètres de bulle, ajustez la position du point chaud en choisissant le point de grille exact parmi les options proposées.

  9. Dans la section Effet , activez l'option Activer le zoom si nécessaire.

  10. Pour ajouter une narration vocale, activez l'option Voix off AI .

    1. Sélectionnez la voix souhaitée et saisissez le contenu dans le champ de texte.

    2. Cliquez sur le bouton Lecture () à côté du contenu pour le prévisualiser dans la voix sélectionnée.

  11. Cliquez sur Appliquer pour enregistrer les modifications.

  12. Le texte sera ajouté à la liste. Passez la souris sur un texte pour :

    • Cliquez sur l'icône Modifier () pour modifier.

    • Cliquez sur l'icône Plus () et sélectionnez Supprimer pour supprimer.

    Video editor interface showing article creation options and highlighted actions for user guidance.

c. Flou :

Pour masquer des informations sensibles dans la démo interactive :

  1. Dans le volet droit, cliquez sur Flout.

  2. Si aucun flou n'a été ajouté auparavant, cliquez sur Ajouter pour ajouter un nouveau flou.

    S'il y a déjà beaucoup de flous, cliquez sur Ajouter pour ajouter de nouveaux flous.

  3. Cliquez sur Ajouter pour ajouter une zone de flou.

  4. Assurez-vous que l'option Afficher le flou est activée.

  5. Entrez un nom pour le flou.

  6. Sélectionnez l' heure de début et l' heure de fin pour le flou. Utilisez l'option Réglage précis en millisecondes () pour des réglages précis.

      NOTE

    Vous pouvez utiliser le curseur de la vidéo pour régler l'heure de début et de fin de la vidéo. Et vous pouvez redimensionner la dimension du flou en faisant glisser les bords dans la vidéo interactive.

  7. Choisissez une forme : Cercle ou Rectangle.

  8. Ajustez le curseur Intensité pour modifier l'opacité.

  9. Cliquez sur Appliquer pour enregistrer les modifications.

    Le flou sera ajouté à la liste.

  10. Passez la souris sur un élément de flou, cliquez sur l'icône Plus (), puis sélectionnez Supprimer pour le supprimer.

It shows how to add a blur element to a recording demo in the Advanced WYSIWYG editor

d. L'image

La liste des images existantes s'affiche.

  1. Si aucune image n'a été ajoutée auparavant, cliquez sur Ajouter pour ajouter une nouvelle image.

    S'il y a déjà beaucoup d'images, cliquez sur Ajouter pour ajouter de nouvelles images.

  2. Dans le champ Heure , entrez l'heure souhaitée. Utilisez l'option Réglage précis en millisecondes () pour des réglages précis.

  3. Cliquez sur Image pour importer des images prédéfinies et des emojis classés par nom.

    Pour appliquer votre propre image, cliquez sur l' icône et importez l'image souhaitée à partir de votre explorateur de fichiers local.

  4. Une fois téléchargée, cette image sera placée au-dessus de la vidéo enregistrée.

    Vous pouvez effectuer les actions suivantes sur l'image téléchargée :

  5. Heure : Dans le champ Heure , mettez à jour l'heure souhaitée. Utilisez l'icône Affiner les millisecondes () pour des réglages précis.

  6. Remplacer l'image : cliquez sur Remplacer l'image pour remplacer l'image téléchargée. Les formats pris en charge sont JPG ou PNG.

  7. Taille et position : sélectionnez Forme libre pour ajuster la position de l'image à l'aide du glissement de la souris.

    1. Dans le champ Degré , entrez la valeur souhaitée pour faire pivoter l'image.

    2. Utilisez les icônes Rotation à gauche ou Rotation à droite .

    Vous pouvez également sélectionner Ajuster à l'écran pour ajuster l'image à la taille de l'écran.

  8. Dans la section Comportement , vous pouvez sélectionner :

    1. Rester pour : Conservez l'image pendant une durée déterminée. Entrez le nombre de secondes dans le champ Sec .

    2. Bouton Suivant : Gardez l'image visible jusqu'à ce que vous cliquiez sur le bouton Suivant .

    3. CTA : Lien vers un appel à l'action.

  9. Dans la section Voix off :

    1. Activez l'option Voiceover .

    2. Sélectionnez la voix souhaitée dans la liste déroulante (en fonction de votre accent préféré).

    3. Dans le champ Contenu , saisissez le texte de voix off souhaité.

    4. Cliquez sur l'icône Lecture () pour prévisualiser le contenu avec la voix sélectionnée.

  10. Cliquez sur Appliquer pour enregistrer les modifications.

    Adding an image in the Interactive demo

    L'image sera ajoutée à la liste.

  11. Passez la souris sur n'importe quel élément d'image, cliquez sur l'icône Plus (), puis sélectionnez Supprimer pour le supprimer.

    Video editor interface displaying content categories and a sun emoji image.

e. Spotlight : mettez en évidence les zones importantes dans la démo interactive

  1. Dans le volet de droite, cliquez sur Spotlight.

  2. Cliquez sur Ajouter pour créer un spotlight.

  3. Entrez un nom pour le projecteur.

  4. Sélectionnez l' heure de début et l' heure de fin. Utilisez l'option Réglage précis en millisecondes () pour des réglages précis.

  5. Choisissez une forme : cercle ou rectangle.

  6. Cliquez sur Appliquer pour enregistrer les modifications.

    Video editor interface showing options to create an article and spotlight settings.

f. Caméra

Pendant le montage, vous pouvez enregistrer une vidéo à partir de votre appareil photo et l'ajouter à votre démo interactive.

  1. Cliquez sur Appareil photo.

    Le volet Enregistrement s'affiche avec une liste de vidéos préenregistrées (le cas échéant).

  2. Cliquez sur Créer.

    • Si aucune vidéo n'a été ajoutée auparavant, cliquez sur Créer.

    • S'il y a déjà beaucoup de vidéos, cliquez sur Ajouter pour en ajouter une autre.

  3. Dans la sous-fenêtre Ajouter un nouvel enregistrement , choisissez l'une des options suivantes :

    • Enregistrer nouveau : Enregistrez une vidéo directement à l'aide de votre appareil photo.

    • Sélectionner une vidéo : téléchargez une vidéo déjà enregistrée.

  4. Dans le champ Heure , entrez l'heure souhaitée. Utilisez l'option Réglage précis en millisecondes () pour des réglages précis.

  5. Sélectionnez la caméra et le microphone souhaités, puis cliquez sur Démarrer l'enregistrement.

  6. Après le compte à rebours de 3 secondes, l'enregistrement commence.

    1. Utilisez Pause et Reprendre si nécessaire.

    2. Cliquez sur l'icône Reprendre pour recommencer.

    3. Cliquez sur Ignorer pour supprimer l'enregistrement en cours.

    4. Cliquez sur Arrêter pour terminer l'enregistrement.

  7. Après l'arrêt, cliquez sur Enregistrer et continuer. Le système traitera et ajoutera la vidéo à la démo.

  8. Si nécessaire, cliquez à nouveau sur Enregistrer pour créer un nouvel enregistrement.

  9. La vidéo enregistrée se superposera au-dessus de la démo interactive. À partir du panneau de droite, vous pouvez :

    • Cliquez sur Remplacer la vidéo pour permuter l'original.

    • Cliquez sur l'icône Lecture () pour afficher un aperçu.

    • Cliquez sur Enregistrer nouveau pour capturer une nouvelle vidéo.

  10. Dans la section Forme , choisissez une forme d'affichage : Cercle, Carré, Large ou Portrait.

  11. Dans la section Position , sélectionnez l'endroit où la vidéo doit apparaître dans la démo.

  12. Activez l'option Sous-titres pour générer automatiquement des sous-titres si la parole est détectée.

  13. Cliquez sur Appliquer pour enregistrer les modifications.

  14. Toutes les vidéos enregistrées sont répertoriées dans le volet. Pour en supprimer un, passez la souris dessus, cliquez sur l'icône Plus (), puis sélectionnez Supprimer.

  NOTE

Vous ne pouvez pas créer deux vidéos enregistrées avec le même horodatage.

g. SMS

Vous pouvez ajouter des superpositions de texte à votre démo interactive.

  1. Cliquez sur Texte.

    • Si aucun texte n'a été ajouté auparavant, cliquez sur Ajouter.

    • Si des textes existent déjà, cliquez sur Ajouter nouveau.

  2. Dans le champ Heure , définissez le moment où le texte doit apparaître. Utilisez l'option Réglage précis en millisecondes () pour des réglages précis.

  3. Entrez le texte souhaité dans le champ Texte .

  4. Choisissez la police et la taille de la police.

  5. Sélectionnez une couleur de texte dans la palette ou entrez un code hexadécimal.

  6. Dans le champ Degré , entrez une valeur pour faire pivoter la position du texte.

  7. Dans la section Comportement , choisissez l'une des options suivantes :

    • Rester pendant : Entrez le nombre de secondes pendant lesquelles le texte reste visible.

    • Afficher jusqu'à : Entrez l'heure jusqu'à laquelle le texte reste visible.

  8. Si vous avez sélectionné Rester pour, vous pouvez activer la voix off IA :

    1. Activez la bascule de la voix off de l'IA .

    2. Sélectionnez une voix dans la liste déroulante.

    3. Entrez le contenu de la voix off.

    4. Cliquez sur Lire pour l'aperçu.

  9. Cliquez sur Appliquer pour enregistrer.

Using the text feature in the Interactive demo

Le texte sera ajouté à la liste. Passez la souris sur un texte pour :

  • Cliquez sur l'icône Modifier () pour modifier.

  • Cliquez sur l'icône Plus (), puis sélectionnez Supprimer pour supprimer.

Video editor interface displaying a welcome message and article list for Document360.

h. Souligner

Vous pouvez utiliser les points forts pour attirer l'attention sur des éléments spécifiques de la démo.

  1. Cliquez sur Mettre en surbrillance.

    • S'il n'y a pas de surbrillance, cliquez sur Ajouter.

    • Si les surbrillances existent déjà, cliquez sur Ajouter.

  2. Dans le champ Nom , entrez un nom. Cela n'apparaîtra pas dans la démo.

  3. Sélectionnez l' heure de début et l' heure de fin pour la mise en surbrillance. Utilisez l'option Réglage précis en millisecondes () pour des réglages précis.

  4. Dans la liste déroulante Forme , choisissez Rectangle ou Cercle.

  5. Dans la section Couleur , sélectionnez une couleur de surbrillance.

  6. Cliquez sur Appliquer pour enregistrer.

    Video editor interface showing article statuses and options for highlighting elements.

    La mise en surbrillance sera ajoutée à la liste. Pour supprimer un surlignage, passez la souris dessus, cliquez sur l'icône Plus , puis sélectionnez Supprimer.

    Video editor interface displaying article statuses and options for managing content.

Éditer

i. Recadrage

Pour recadrer n'importe quelle partie de la vidéo :

  1. Dans le volet de droite, cliquez sur Recadrer.

  2. Sélectionnez un rapport d'aspect : Original, Personnalisé, Carré, Paysage ou Portrait.

  3. Vous pouvez afficher le rendement du recadrage (largeur et hauteur) en fonction du rapport sélectionné.

  4. Cliquez sur l'icône Supprimer () pour supprimer le recadrage appliqué.

  5. Cliquez sur Appliquer pour enregistrer les modifications.

    Une fois recadrée, seule la partie recadrée sera visible lors de l'enregistrement de la vidéo.

Video editor interface showing aspect ratio options and content list for editing.

j. Couper:

Pour découper n'importe quelle partie de la vidéo :

  1. Dans le volet droit, cliquez sur Découper.

  2. Cliquez sur Ajouter maintenant pour ajouter une nouvelle version à la démo interactive.

    S'il existe déjà des garnitures, cliquez sur Ajouter pour ajouter une autre coupe.

  3. Réglez les durées de début et de fin .

    Cliquez sur Appliquer , puis sur Terminé.

k. Musique:

Pour ajouter de la musique à la démo interactive

  1. Activez l'option Activer la musique de fond pour ajouter une musique de fond à la démo interactive.

  2. Cliquez sur Choisir dans Galary pour télécharger un fichier.

    NOTE

    Formats audio pris en charge : .mp3, .aac (taille maximale du fichier : 5 Mo).

  3. Dans l'onglet Préréglages , vous pouvez utiliser des options de musique préchargées.

  4. Sélectionnez n'importe quelle musique et cliquez sur Insérer.

  5. Une fois téléchargé, cliquez sur Remplacer l' audio pour modifier la piste sélectionnée.

  6. Ajustez le curseur Volume pour contrôler le volume.

  7. L'option Fondu entrant/sortant permet au début et à la fin de la musique de se dérouler en douceur pendant ces interactions.

  8. Activez la pause de l'interaction si nécessaire. Lorsque l'utilisateur ajoute une musique de fond, l'option Pause lors de l'interaction met temporairement en pause la musique ajoutée chaque fois que l'utilisateur clique sur des zones réactives ou interagit avec la vidéo.

  9. Une fois cela fait, cliquez sur Appliquer.

    Video editor interface showing background music settings and article status updates.

Voix

Vous pouvez choisir le mode de narration de la démo interactive :

  1. Voix d'origine : Utilise la voix d'arrière-plan d'origine.

  2. Voix IA : Permet de générer des voix off générées par l'IA dans plusieurs langues.  

    Voix off de l'IA : Pour sélectionner la voix off IA souhaitée dans plusieurs langues. Le script de la vidéo sera rendu dans la section Script .

  3. Pas de voix : aucune voix off ne sera appliquée.

  4. Sous-titres : cliquez sur Sous-titres pour ajouter des sous-titres à la démo interactive. Si la vidéo comporte une voix off, les sous-titres générés automatiquement apparaîtront ici et vous pourrez les modifier si nécessaire.

    Vous pouvez également saisir manuellement votre script de voix off. Cochez la case Afficher les sous-titres pour afficher les sous-titres dans la démo interactive.

  5. Éléments ajoutés : Vous pouvez voir les éléments ajoutés dans la démo d'interactide. À partir de là, cliquez sur l'icône Modifier () pour modifier l'élément souhaité. Cliquez sur l'icône Supprimer () en regard des éléments à supprimer.

  6. Cliquez sur Fermer pour enregistrer les modifications.

    Video editor interface showing voice options and article status in Document360.

Montage de la démo interactive enregistrée

Une fois la démo interactive ajoutée à un article, vous pouvez appliquer les options de formatage suivantes :

Interactive demo showcasing article creation and management features in Document360 interface.

  1. Aligner à gauche : aligne la démo interactive sur la gauche.

  2. Centre : aligne la démo interactive sur le centre.

  3. Aligner à droite: aligne la démo interactive sur la droite.

  4. En ligne à gauche : Place la démo interactive en ligne sur la gauche.

  5. Bloc en ligne : Affiche la démo interactive en tant qu'élément de bloc en ligne.

  6. En ligne droite : Place la démo interactive en ligne sur la droite.

  7. Redimensionner : ajuste les dimensions de la démo interactive.

  8. Copier : copie la démo interactive dans le presse-papiers pour la réutiliser dans un autre article ou une autre catégorie du même projet.  

  9. Modifier : Permet d'autres modifications, notamment :

    • Ajouter des éléments : Flou et Projecteur

    • Modifier : recadrer, tailler et écouter de la musique

    • Voix : Voix originale, Voix IA et Pas de voix


FAQ

Les articles avec une démo interactive apparaîtront-ils dans les résultats de recherche du portail ?

Oui. Les articles qui contiennent une démo interactive apparaîtront toujours dans les résultats de recherche du portail s'il y a une correspondance dans le titre ou le contenu de l'article.