Capturing an Interactive demo in the Advanced WYSIWYG editor

The interactive demo feature allows users to engage with a product simulation or walkthrough instead of watching a static video or reading text instructions. It provides a hands-on experience where users can click, type, hover, and explore the interface in a guided environment.

Document360 offers built-in interactive demos and formatting options. You can capture your screen, mouse clicks, and enhance the interactive demo directly within your articles without any external tools.

For example, if you're writing a how-to article on configuring user roles, you can record an interactive demo that shows each step in action. This helps readers follow along visually and understand the process without needing to guess or rely only on text instructions.

NOTE

The Interactive demo feature available only for KB Site 2.0.

Accessing the Interactive demo

To access the Interactive demo,

1. Navigate to the desired article in the Advanced WYSIWYG editor.

2. Type the Slash command /Interactive demo and press Enter.

3. If the Document360 Interactive demo extension is not installed, click Install.

   NOTE

   This extension is currently supported only in the Chrome browser.

4. In the Chrome web store, click Add to Chrome.

5. Once installed, return to the Knowledge base portal.

Recording the screen

      The Interactive demo dialog will appear.

6. From the audio dropdown, select the desired option or select No audio to record without sound.

7. Click Next.

8. Select the screen to capture:

   • Chrome tab: Records only the selected Chrome tab.

   • Window: Records only the selected application window.

9. Click Share.

   The selected screen will appear along with the Screen recording panel.

10. Choose the recommended resolution (16:9 or 4:3).

11. Click Start capturing to begin recording.

12. Click Discard to cancel and return to the previous screen.

13. In the Blur selected section, click Add to hide specific areas of the screen when recording sensitive information.

14. If needed, enable the Show recording controls on screen toggle.

    A Document360 logo will appear in the bottom left corner of the recording screen. Clicking the logo will pause the recording. This logo will also be visible in the recorded interactive demo.

15. Mouse clicks and interactions will be captured, and click indicators will be displayed for easier guide editing.

16. Click Pause to pause the recording and Record to resume.

17. To stop recording, click Stop sharing in the floating panel or Stop recording in the Screen recording panel.

    After recording, the system will import the interactive demo into the article. This may take a few moments.

Adding interactive elements

Once processed, the recorded interactive demo appears in the interactive demo editor panel.

1. Click the Play () icon to preview the recorded interactive demo.

   The Interactive demo editor provides formatting tools, including:

Add elements

a. Call to action: To add an interactive button in the demo

1. In the right pane, click Call to action.

2. Enter the Title and Description.

   NOTE

   In the Description field, select the content and you can use the basic formatting tools such as Bold (), Italics (), Underline (), Ordered list (), Unordered list (), and Hyperlink ().

3. In the Branches section, enter the button name and select the desired action:

   1. External URL: Enter the destination link.

   2. Next step: Displays a message or information for the user.

4. Click Add new to include another button.

5. Choose the desired button position under the Position section.

6. Enable the AI voiceover toggle to add narration:

   1. Select a voice from the dropdown.

   2. Enter the narration script.

   3. Click the Play () icon to preview.

7. Click Apply.

b. Hotspots

Hotspots can be used to showcase the mouse click effect in the Interactive demo.

1. Go to the exact duration in the video and click Hotspot to add.

   In the Hotspots dialog, review the list of existing hotspots (if any).

2. Navigate to the desired location in the video and click Add new to add a hotspot to the timeline.

3. You can drag the hotspot to the desired position.

4. Turn on the Show hotspot toggle to display the hotspot.

5. In the Time field, enter the desired time. Use the Fine-tune milliseconds () option for precise adjustments.

6. Enter a title in the Title field.

7. Enter the description in the Description field.

   NOTE

   In the Description field, select the content and you can use the basic formatting tools such as Bold (), Italics (), Underline (), Ordered list (), Unordered list (), and Hyperlink ().

8. Under Bubble settings, adjust the hotspot position by choosing the exact grid point from the given options.

9. In the Effect section, turn on the Enable zoom toggle if required.

10. To add voice narration, turn on the AI voice over toggle.

    1. Select the desired voice and enter the content in the text field.

    2. Click the Play () button next to the content to preview it in the selected voice.

11. Click Apply to save the changes.

    

12. The text will be added to the list. Hover over any text to:

    • Click the Edit () icon to modify.

    • Click the More () icon and select Delete to remove.

    

c. Blur:

To hide sensitive information in the interactive demo:

1. In the right pane, click Blur.

2. If no blurs were added before, click Add to add a new blur.

   If there are already many blurs, click Add new to add new blurs.

3. Click Add new to add a blur area.

4. Ensure the Show blur toggle is turned on.

5. Enter a Name for the blur.

6. Select the Start time and End time for the blur. Use the Fine-tune milliseconds () option for precise adjustments.

   NOTE

   You can use the slider of the video to adjust the start and end time of the video. and you can resize the blur dimension by dragging the edges in the interactive video.

7. Choose a shape: Circle or Rectangle.

8. Adjust the Intensity slider to modify opacity.

9. Click Apply to save changes.

   

   The blur will be added to the list.

10. Hover over any blur item, click the More () icon, and select Delete to remove.

d. Image

The list of existing images appears.

1. If no images were added before, click Add to add a new image.

   If there are already many images, click Add new to add new images.

2. In the Time field, enter the desired time. Use the Fine-tune milliseconds () option for precise adjustments.

3. Click Image to import predefined images and emojis categorized by name.

   To apply your own image, click the icon, and import the desired image from your local file explorer.

4. Once uploaded, this image will be placed above the recorded video.

   You can perform the following actions on the uploaded image:

5. Time: In the Time field, update the desired time. Use the Fine-tune milliseconds () icon for precise adjustments.

6. Replace image: Click Replace image to replace the uploaded image. Supported formats are JPG or PNG.

7. Size and position: Select Freeform to adjust the image position using mouse drag.

   1. In the Degree field, enter the desired value to rotate the image.

   2. Use the Rotate left or Rotate right icons.

   Or, select Fit to screen to adjust the image to the screen size.

8. In the Behaviour section, you can select:

   1. Stay for: Keep the image for a specific duration. Enter the number of seconds in the Sec field.

   2. Next button: Keep the image visible until the Next button is clicked.

   3. CTA: Link a Call to Action.

9. In the Voiceover section:

   1. Turn on the Voiceover toggle.

   2. Select the desired voice in the dropdown (based on your preferred accent).

   3. In the Content field, enter the desired voiceover text.

   4. Click the Play () icon to preview the content with the selected voice.

10. Click Apply to save the changes.

    

    The image will be added to the list.

11. Hover over any image item, click the More () icon, and select Delete to remove.

    

e. Spotlight: Highlight important areas in the interactive demo

1. In the right pane, click Spotlight.

2. Click Add to create a spotlight.

3. Enter a Name for the spotlight.

4. Select the Start time and End time. Use the Fine-tune milliseconds () option for precise adjustments.

5. Choose a Shape: Circle or Rectangle.

6. Click Apply to save changes.

   

f. Camera

While editing, you can record a video from your camera and add it to your Interactive demo.

1. Click Camera.

   The Recording pane appears with a list of prerecorded videos (if any).

2. Click Create.

   • If no videos were added before, click Create.

   • If there are already many videos, click Add new to add another.

3. In the Add new recording pane, choose one of the following:

   • Record new: Record a video directly using your camera.

   • Select video: Upload an already recorded video.

4. In the Time field, enter the desired time. Use the Fine-tune milliseconds () option for precise adjustments.

5. Select the desired camera and microphone, then click Start recording.

6. After the 3-second countdown, the recording begins.

   1. Use Pause and Resume as needed.

   2. Click the Retake icon to start over.

   3. Click Discard to delete the current recording.

   4. Click Stop to end recording.

7. After stopping, click Save and continue. The system will process and add the video to the demo.

8. If required, click Record again to create a new recording.

9. The recorded video will overlay above the Interactive demo. From the right panel, you can:

   • Click Replace video to swap the original.

   • Click the Play () icon to preview.

   • Click Record new to capture a fresh video.

10. In the Shape section, choose a display shape: Circle, Square, Wide, or Portrait.

11. In the Position section, select where the video should appear in the demo.

12. Turn on the Subtitles toggle to auto-generate subtitles if speech is detected.

13. Click Apply to save changes.

14. All recorded videos are listed in the pane. To delete one, hover over it, click the More () icon, and select Delete.

NOTE

You cannot create two recorded videos at the same timestamp.

g. Text

You can add text overlays to your Interactive demo.

1. Click Text.

   • If no texts were added before, click Add.

   • If texts already exist, click Add new.

2. In the Time field, set when the text should appear. Use the Fine-tune milliseconds () option for precise adjustments.

3. Enter the desired text in the Text field.

4. Choose the font and font size.

5. Select a text color from the palette or enter a hex code.

6. In the Degree field, enter a value to rotate the text position.

7. In the Behaviour section, choose one:

   • Stay for: Enter the number of seconds the text remains visible.

   • Show until: Enter the time until which the text remains visible.

8. If you selected Stay for, you can enable AI voiceover:

   1. Turn on the AI voiceover toggle.

   2. Select a voice from the dropdown.

   3. Enter the voiceover content.

   4. Click Play to preview.

9. Click Apply to save.

The text will be added to the list. Hover over any text to:

• Click the Edit () icon to modify.

• Click the More () icon, and select Delete to remove.

h. Highlight

You can use highlights to draw attention to specific elements in the demo.

1. Click Highlight.

   • If no highlights exist, click Add.

   • If highlights already exist, click Add new.

2. In the Name field, enter a name. This will not appear in the demo.

3. Select the Start time and End time for the highlight. Use the Fine-tune milliseconds () option for precise adjustments.

4. In the Shape dropdown, choose Rectangle or Circle.

5. In the Color section, select a highlight color.

6. Click Apply to save.

   

   The highlight will be added to the list. To delete a highlight, hover over it, click the More icon, and select Delete.

   

Edit

i. Crop

To crop any part of the video:

1. In the right pane, click Crop.

2. Select an Aspect ratio: Original, Custom, Square, Landscape, or Portrait.

3. You can view the Crop output (width and height) based on the selected ratio.

4. Click the Delete () icon to delete the applied crop.

5. Click Apply to save changes.

   Once cropped, only the cropped part will be visible when the video is saved.

j. Trim:

To trim any part of the video:

1. In the right pane, click Trim.

2. Click Add now to add a new trim to the interactive demo.

   If trims already exist, click Add new to add another trim.

3. Set the From and To timings.

   Click Apply and click Done.

k. Music:

To add music to the Interactive demo

1. Turn on the Enable background music toggle to add background music to the interactive demo.

2. Click Choose from Galary to upload a file.

   NOTE

   Supported audio formats: .mp3, .aac (maximum file size: 5 MB).

3. In the Presets tab, you can use preloaded music options.

4. Select any music and click Insert.

5. Once uploaded, click Replace audio to change the selected track.

6. Adjust the Volume slider to control the volume.

7. The Fade In/Fade Out option makes the music start and end smoothly during these interactions.

8. Turn on the Pause on Interaction if required. When the user adds background music, the Pause on Interaction option will temporarily pause the added music whenever the user clicks on hotspots or interacts with the video.

9. Once done, click Apply.

   

Voice

You can choose how the interactive demo is narrated:

12. Original voice: Uses the original background voice.

13. AI voice: Allows AI-generated voiceovers in multiple languages.  

    AI voiceover: To select the desired AI voiceover from multiple languages. The video script will be rendered in the Script section.

14. No voice: No voiceover will be applied.

15. Subtitles: Click Subtitles to add subtitles to the interactive demo. If the video has a voiceover, the auto-generated subtitles will appear here, and you can edit them as needed.

    Alternatively, you can manually enter your voiceover script. Enable the Display subtitles checkbox to show subtitles in the interactive demo.

16. Added elements: You can view the elements added in the interactide demo. From here, click the Edit () icon to edit the desired element. Click the Delete () icon next to the elements to delete.

17. Click Close to save changes.

    

Editing the recorded interactive demo

Once the interactive demo is added to an article, you can apply the following formatting options:

1. Align left: Aligns the interactive demo to the left.

2. Center: Aligns the interactive demo to the center.

3. Align right: Aligns the interactive demo to the right.

4. Inline left: Places the interactive demo inline on the left.

5. Inline block: Displays the interactive demo as an inline block element.

6. Inline right: Places the interactive demo inline on the right.

7. Resize: Adjusts the interactive demo dimensions.

8. Copy: Copies the interactive demo to the clipboard for reuse in another article or category within the same project.  

9. Edit: Allows further modifications, including:

   • Add elements: Blur and Spotlight

   • Edit: Crop, Trim, and Music

   • Voice: Original voice, AI voice, and No voice