La fonction de démonstration interactive permet aux utilisateurs d'interagir avec une simulation de produit ou une solution de passage 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 propose des démonstrations interactives intégrées et des options de mise en forme. Vous pouvez capturer votre écran, les clics de souris et améliorer la démonstration interactive directement dans vos articles, sans aucun outil externe.
Par exemple, si vous écrivez un article pratique sur la configuration des rôles utilisateurs, vous pouvez enregistrer une démonstration interactive qui montre chaque étape en action. Cela aide les lecteurs à suivre visuellement et à comprendre le processus sans avoir à deviner ou à se fier uniquement aux instructions textuelles.
NOTE
La fonctionnalité de démonstration interactive est disponible uniquement pour KB Site 2.0.
Accéder à la démo interactive
Pour accéder à la démo interactive,
Naviguez vers l'article souhaité dans l'éditeur WYSIWYG avancé.
Tapez la commande
/Interactive demoBarre et appuyez sur Entrée.Si l'extension de démo interactive Document360 n'est pas installée, cliquez sur Installer.
NOTE
Cette extension est actuellement prise en charge uniquement dans le navigateur Chrome .
Dans le Chrome Web Store, cliquez sur Ajouter à Chrome.
Une fois installé, retournez au portail de la base de connaissances.
Enregistrement de l'écran
La boîte de dialogue interactive de démonstration apparaîtra.
Dans le menu déroulant audio, sélectionnez l'option souhaitée ou sélectionnez Pas d'enregistrement audio sans son.
Cliquez sur Suivant.
Sélectionnez l'écran à capturer :
Onglet Chrome : Enregistre uniquement l'onglet Chrome sélectionné.
Fenêtre : Enregistre uniquement la fenêtre d'application sélectionnée.
Cliquez sur Partager.
L'écran sélectionné apparaîtra avec le panneau d'enregistrement de l'écran .
Choisissez la résolution recommandée (16:9 ou 4:3).
Cliquez sur Démarrer la capture pour commencer l'enregistrement.
Cliquez sur Rejeter pour annuler et revenir à l'écran précédent.
Dans la section Floutée sélectionnée , cliquez sur Ajouter pour masquer des zones spécifiques de l'écran lors de l'enregistrement d'informations sensibles.
Si besoin, activez les contrôles d'enregistrement Show à l'écran .
Un logo Document360 apparaîtra dans le coin inférieur gauche de l'écran d'enregistrement. Cliquer sur le logo met l'enregistrement en pause. Ce logo sera également visible dans la démo interactive enregistrée.
Les clics de souris et les interactions seront capturés, et des indicateurs de clic seront affichés pour faciliter la modification du guide.
Cliquez sur Pause pour mettre l'enregistrement en pause et sur Enregistrer pour reprendre.
Pour arrêter l'enregistrement, cliquez sur Arrêter le partage dans le panneau flottant ou Arrêter l'enregistrement dans le panneau d'enregistrement à l'écran .
Après 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 interactif de démos .
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 mise en forme, notamment :
Ajouter des éléments
a. Appel à l'action : ajouter un bouton interactif dans la démo
Dans le panneau de droite, cliquez sur Appel à l'action.
Entrez le titre et la description.
NOTE
Dans le champ Description, sélectionnez le contenu et vous pouvez utiliser les outils de mise en forme de base tels que Gras (), Italique (), Souligner (), Liste ordonnée (), Liste non ordonnée () et Hyperlien ().
Dans la section Branches , saisissez le nom du bouton et sélectionnez l'action souhaitée :
URL externe : Entrez le lien de destination.
Étape suivante : afficher un message ou une information pour l'utilisateur.
Cliquez sur Ajouter nouveau pour ajouter un autre bouton.
Choisissez la position du bouton souhaitée dans la section Position .
Activez le bouton de la voix off IA pour ajouter la narration :
Sélectionnez une voix dans le menu déroulant.
Voici le script de narration.
Cliquez sur l' icône Lecture () pour prévisualiser.
Cliquez sur Postuler.
b. Points chauds
Les points d'accès peuvent être utilisés pour mettre en avant l'effet de clic de la souris dans la démo interactive.
Allez à la durée exacte dans la vidéo et cliquez sur Hotspot pour ajouter.
Dans la boîte de dialogue Points d'accès Hotspots, consultez la liste des hotspots existants (s'il y en a un).
Naviguez vers l'emplacement souhaité dans la vidéo et cliquez sur Ajouter un nouveau pour ajouter un hotspot à la timeline.
Vous pouvez glisser le point d'accès à la position souhaitée.
Activez le bouton Afficher le point d'accès pour afficher le point d'accès.
Dans le champ Temps , entrez le temps désiré. Utilisez l'option Affiner les millisecondes () pour des réglages précis.
Entrez un titre dans le champ Titre .
Saisissez la description dans le champ Description .
NOTE
Dans le champ Description , sélectionnez le contenu et vous pouvez utiliser les outils de mise en forme de base tels que Gras (), Italique (), Souligner (), Liste ordonnée (), Liste non ordonnée () et Hyperlien ().
Dans les paramètres Bulle, ajustez la position du point chaud en choisissant le point de grille exact parmi les options proposées.
Dans la section Effets , activez le bouton Activer le zoom si nécessaire.
Pour ajouter la narration vocale, activez le bouton de désactivation de la voix par l'IA .
Sélectionnez la voix désirée et entrez le contenu dans le champ texte.
Cliquez sur le bouton Lecture () à côté du contenu pour le prévisualiser dans la voix sélectionnée.
Cliquez sur Postuler pour enregistrer les modifications.
Le texte sera ajouté à la liste. Passez la souris sur n'importe quel texte pour :
Cliquez sur l' icône Modifier () pour modifier.
Cliquez sur l'icône Plus () et sélectionnez Supprimer pour supprimer.
c. Flou :
Pour masquer des informations sensibles dans la démo interactive :
Dans le panneau de droite, cliquez sur Flou.
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 de nouveaux flouts pour en ajouter de nouveaux.
Cliquez sur Ajouter nouveau pour ajouter une zone de flou.
Assurez-vous que le bouton de flou affiché est activé.
Entrez un nom pour le flou.
Sélectionnez l' heure de début et l'heure de fin pour le flou. Utilisez l'option Affiner les millisecondes () pour des réglages précis.
NOTE
Vous pouvez utiliser le curseur de la vidéo pour ajuster l'heure de début et de fin de la vidéo. Et vous pouvez redimensionner la dimension de flou en faisant glisser les bords dans la vidéo interactive.
Choisissez une forme : cercle ou rectangle.
Ajustez le curseur d'intensité pour modifier l'opacité.
Cliquez sur Appliquer pour enregistrer les modifications.
Le flou sera ajouté à la liste.
Passez la souris sur un élément flou, cliquez sur l'icône Plus (), puis sélectionnez Supprimer pour supprimer.
d. Image
La liste des images existantes apparaît.
Si aucune image n'a été ajoutée auparavant, cliquez sur Ajouter pour en ajouter une nouvelle.
S'il y a déjà beaucoup d'images, cliquez sur Ajouter de nouvelles pour en ajouter de nouvelles.
Dans le champ Temps , entrez le temps désiré. Utilisez l'option Affiner les millisecondes () pour des réglages précis.
Cliquez sur Image pour importer des images et des emojis prédéfinis catégorisés par nom.
Pour appliquer votre propre image, cliquez sur l' icône et importez l'image désirée depuis votre explorateur de fichiers local.
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 :
Temps : Dans le champ Temps , mettez à jour l'heure souhaitée. Utilisez l'icône Affinage millisecondes () pour des réglages précis.
Remplacer l'image : Cliquez sur Remplacer l'image pour remplacer l'image téléchargée. Les formats pris en charge sont le JPG ou le PNG.
Taille et position : Sélectionnez Freeform pour ajuster la position de l'image en utilisant le glisser de la souris.
Dans le champ Degré , saisissez la valeur souhaitée pour faire pivoter l'image.
Utilisez les icônes Rotation à gauche ou Rotation à droite .
Ou bien, sélectionnez Ajuster à l'écran pour ajuster l'image à la taille de l'écran.
Dans la section Comportement , vous pouvez sélectionner :
Restez : Conservez l'image pendant une durée précise. Saisissez le nombre de secondes dans le champ Sec .
Bouton suivant : Gardez l'image visible jusqu'à ce que le bouton suivant soit cliqué.
CTA : Lien d'un appel à l'action.
Dans la section Voix off :
Activez le bouton Voix off .
Sélectionnez la voix désirée dans le menu déroulant (en fonction de l'accent que vous préférez).
Dans le champ Contenu , saisissez le texte en voix off souhaité.
Cliquez sur l' icône Lecture () pour prévisualiser le contenu avec la voix sélectionnée.
Cliquez sur Postuler pour enregistrer les modifications.
L'image sera ajoutée à la liste.
Survolez un élément image, cliquez sur l'icône Plus (), puis sélectionnez Supprimer pour supprimer.
e. Mise en lumière : Mettez en avant les points importants de la démonstration interactive
Dans le panneau de droite, cliquez sur Projecteur.
Cliquez sur Ajouter pour créer un projecteur.
Voici un nom pour les projecteurs.
Sélectionnez l' heure de début et l' heure de fin. Utilisez l'option Affiner les millisecondes () pour des réglages précis.
Choisissez une forme : cercle ou rectangle.
Cliquez sur Appliquer pour enregistrer les modifications.
f. Caméra
Pendant le montage, vous pouvez enregistrer une vidéo depuis votre caméra et l'ajouter à votre démo interactive.
Clique sur l'appareil photo.
Le panneau Enregistrement apparaît avec une liste de vidéos préenregistrées (le cas échéant).
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 de nouvelles pour en ajouter une autre.
Dans le volet Ajouter un nouvel enregistrement , choisissez l'un des éléments suivants :
Enregistrer du nouveau : enregistrez une vidéo directement avec votre caméra.
Sélectionner la vidéo : Téléchargez une vidéo déjà enregistrée.
Dans le champ Temps , entrez le temps désiré. Utilisez l'option Affiner les millisecondes () pour des réglages précis.
Sélectionnez la caméra et le microphone souhaités, puis cliquez sur Démarrer l'enregistrement.
Après le compte à rebours de 3 secondes, l'enregistrement commence.
Utilisez Pause et Reprenez si besoin.
Cliquez sur l' icône Reprendre pour recommencer.
Cliquez sur Supprimer pour supprimer l'enregistrement en cours.
Cliquez sur Arrêter pour terminer l'enregistrement.
Après l'arrêt, cliquez sur Enregistrer et continuez. Le système traitera et ajoutera la vidéo à la démo.
Si nécessaire, cliquez sur Enregistrer à nouveau pour créer un nouvel enregistrement.
La vidéo enregistrée sera superposée au-dessus de la démo interactive. Depuis le panneau de droite, vous pouvez :
Cliquez sur Remplacer la vidéo pour échanger l'original.
Cliquez sur l' icône Lecture () pour prévisualiser.
Cliquez sur Enregistrer pour capturer une vidéo fraîche.
Dans la section Forme , choisissez une forme d'affichage : Cercle, Carré, Large ou Portrait.
Dans la section Position, sélectionnez où la vidéo doit apparaître dans la démo.
Activez le bouton Sous-titres pour générer automatiquement les sous-titres si des voix sont détectées.
Cliquez sur Appliquer pour enregistrer les modifications.
Toutes les vidéos enregistrées sont listées dans le volet. Pour en supprimer un, survolez la souris, cliquez sur l' icône Plus () et sélectionnez Supprimer.
NOTE
Vous ne pouvez pas créer deux vidéos enregistrées en même temps.
g. Texte
Vous pouvez ajouter des superpositions de texte à votre démo interactive.
Cliquez sur Texte.
Si aucun texte n'a été ajouté auparavant, cliquez sur Ajouter.
Si des textos existent déjà, cliquez sur Ajouter un nouveau.
Dans le champ Temps , définissez quand le texte doit apparaître. Utilisez l'option Affiner les millisecondes () pour des réglages précis.
Saisissez le texte souhaité dans le champ Texte .
Choisissez la police et la taille de la police.
Sélectionnez une couleur de texte dans la palette ou entrez un code hexadécimal.
Dans le champ Degré, entrez une valeur pour faire pivoter la position du texte.
Dans la section Comportement , choisissez-en un :
Rester : Entrez le nombre de secondes où le texte reste visible.
Montrer jusqu'à : Saisissez le temps jusqu'à ce que le texte reste visible.
Si vous avez sélectionné Rester pour, vous pouvez activer la voix off IA :
Activez le bouton de la voix off IA .
Sélectionnez une voix dans le menu déroulant.
Voici le contenu en voix off.
Cliquez sur Lecture pour prévisualiser.
Cliquez sur Postuler pour sauvegarder.
Le texte sera ajouté à la liste. Passez la souris sur n'importe quel texte pour :
Cliquez sur l' icône Modifier () pour modifier.
Cliquez sur l' icône Plus (), puis sélectionnez Supprimer pour supprimer.
h. Points forts
Vous pouvez utiliser les surlunces pour attirer l'attention sur des éléments spécifiques de la démo.
Cliquez sur Surligner.
Si aucun surlignage n'existe, cliquez sur Ajouter.
Si les points forts existent déjà, cliquez sur Ajouter nouveau.
Dans le champ Nom , saisissez un nom. Cela n'apparaîtra pas dans la démo.
Sélectionnez l' heure de début et l' heure de fin pour le moment fort. Utilisez l'option Affiner les millisecondes () pour des réglages précis.
Dans le menu déroulant Forme , choisissez Rectangle ou Cercle.
Dans la section Couleur , sélectionnez une couleur de surlignement.
Cliquez sur Postuler pour sauvegarder.
Le point fort sera ajouté à la liste. Pour supprimer un surligne, passez la souris dessus, cliquez sur l' icône Plus , puis sélectionnez Supprimer.
Édit
i. Culture
Pour recadrer n'importe quelle partie de la vidéo :
Dans le panneau de droite, cliquez sur Recovoir.
Sélectionnez un format d'image : Original, Personnalisé, Carré, Paysage ou Portrait.
Vous pouvez voir la sortie de recadrage (largeur et hauteur) en fonction du ratio sélectionné.
Cliquez sur l' icône Supprimer () pour supprimer le recadrage appliqué.
Cliquez sur Appliquer pour enregistrer les modifications.
Une fois recadré, seule la partie recadrée sera visible lors de l'enregistrement de la vidéo.
j. Finition :
Pour couper n'importe quelle partie de la vidéo :
Dans le panneau de droite, cliquez sur Trim.
Cliquez sur Ajouter maintenant pour ajouter une nouvelle finition à la démo interactive.
Si des finitions existent déjà, cliquez sur Ajouter une nouvelle pour ajouter une autre finition.
Fixez les horaires de From et To .
Cliquez sur Postuler et cliquez sur Terminé.
k. Musique :
Pour ajouter de la musique à la démo interactive
Activez le bouton Activer la musique de fond pour ajouter la musique de fond à la démo interactive.
Cliquez sur Choisir parmi Galary pour télécharger un fichier.
NOTE
Formats audio pris en charge : .mp3, .aac (taille maximale du fichier : 5 Mo).
Dans l'onglet Presets , vous pouvez utiliser des options de musique préchargées.
Sélectionnez n'importe quelle musique et cliquez sur Insérer.
Une fois téléchargé, cliquez sur Remplacer l'audio pour changer la piste sélectionnée.
Ajustez le curseur de volume pour contrôler le volume.
L'option Fade In/Fade Out permet à la musique de démarrer et de se terminer de façon fluide lors de ces interactions.
Activez la pause sur l'interaction si nécessaire. Lorsque l'utilisateur ajoute de la musique de fond, l'option Pause sur l'interaction mettra temporairement la musique ajoutée en pause chaque fois que l'utilisateur clique sur des points d'accès ou interagit avec la vidéo.
Une fois terminé, cliquez sur Postuler.
Voix
Vous pouvez choisir comment la démo interactive est narrée :
Voix originale : Utilise la voix de fond originale.
Voix IA : Permet des voix off générées par IA dans plusieurs langues.
Voix off IA : Pour sélectionner la voix off IA désirée parmi plusieurs langues. Le script vidéo sera rendu dans la section Script .
Pas de voix : Aucune voix off ne sera utilisée.
Sous-titres : Cliquez sur Sous-titres pour ajouter des sous-titres à la démo interactive. Si la vidéo a une voix off, les sous-titres générés automatiquement apparaîtront ici, et vous pourrez les modifier si besoin.
Sinon, vous pouvez entrer manuellement votre script de voix off. Activez la case Afficher les sous-titres pour afficher les sous-titres dans la démo interactive.
É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 () à côté des éléments pour supprimer.
Cliquez sur Fermer pour enregistrer les modifications.
Montage de la démo interactive enregistrée
Une fois la démonstration interactive ajoutée à un article, vous pouvez appliquer les options de mise en forme suivantes :
Aligner à gauche : Aligner la démo interactive à gauche.
Centre : Aligne la démo interactive avec le centre.
Aligner à droite: Aligner la démo interactive à droite.
En ligne à gauche : Place la démo interactive en ligne à gauche.
Bloc en ligne : Affiche la démonstration interactive comme un élément de bloc en ligne.
Inline à droite : Place la démo interactive en ligne à droite.
Redimensionner : Ajuste les dimensions interactives de la démo.
Copier : copie la démonstration interactive sur le clipboard pour la réutiliser dans un autre article ou catégorie au sein du même projet.
Édition : Permet d'autres modifications, notamment :
Ajouter des éléments : Flou et Projecteur
Édit : recadre, finition et musique
Voix : Voix originale, voix IA, et Sans voix
FAQ
Les articles avec une démonstration interactive apparaîtront-ils dans les résultats de recherche du portail ?
Oui. Les articles contenant une démonstration 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.