Image

The Image element allows you to overlay an additional image onto any step in a Step-by-Step Guide or at any timestamp in interactive demos and videos. This is useful for inserting supplementary visuals such as annotations or branded assets directly onto a step without re-recording.

How to Add an Image Element

Adding image to a Step-by-Step Guide

1. Navigate to Add elements in the right pane.
2. Click Image. If one or more image elements have already been added, click Add new to insert another.
3. Enable the Hide other elements toggle to temporarily hide all other elements on the current step while configuring the image. Other elements are hidden temporarily and are not deleted.
4. To upload an image, click Image. Select from the available predefined image assets.

5. Click Insert to add the selected image.
6. Under Size and position, choose a placement mode:
   • Freeform - Adjust size and position freely. Enter an exact value in the Angle field or use Rotate left or Rotate right to adjust manually.
   • Fit to screen - The image fills the step's image area by default.
7. Alternatively, drag the edges of the image to resize it.
8. Click the Reset to original size and position icon above the image to return to the original size and position in one click.
9. Click the rotate icon and drag to rotate the image.
10. Use Lock aspect ratio to maintain proportions and prevent the image from appearing stretched or distorted. Lock proportions before resizing to ensure the image scales uniformly.
11. Click Apply to save the image element.

Adding image to a Video / Interactive Demo

1. Navigate to Add elements in the right pane.
2. Click Image. If an image already exists, click Add new.
3. Enable Hide other elements to hide every other element while you configure the image.
4. Set the timestamp using the Time field or drag the video slider.
5. To upload an image, click Select image. Select from the available predefined image assets.

6. Click Insert to add the selected image.
7. Under Size and position, choose a placement mode:
   • Freeform - Adjust size and position freely. Enter an exact value in the Angle field or use Rotate left or Rotate right to adjust manually.
   • Fit to screen - The image fills the step's image area.
8. Alternatively, drag the edges of the image to resize it.
9. Click the Reset to original size and position icon above the image to return to the original size and position in one click.
10. To rotate, click the rotate icon and drag.
11. Use Lock aspect ratio to maintain proportions and prevent the image from appearing stretched or distorted.
12. Under Behaviour, configure how the image is displayed:
    • Stay for - Visible for a set duration.
    • Next button - Visible until the user clicks Next.
    • CTA - Tied to a call-to-action.
    • Show until - The image is displayed until a specified time is reached.
13. To add voice narration, turn on the AI voice over toggle.
    • Select the desired voice and enter the content in the text field.
    • Click the Play button next to the content to preview it in the selected voice.
14. Click Apply to save the image element.

Managing image elements

All images added appear in the Image panel, with a thumbnail preview and name.

• Add another image - Click Add new at the top of the panel.
• Edit an image - Click any image in the list to edit it. Modify as needed, then click Apply to save or Cancel to go back. Use the Delete icon to remove it.
• Delete an image - Hover over an image, click the three-dot menu, and select Delete.

Best practices

• Lock proportions before resizing - In Freeform mode, enabling aspect ratio lock prevents distortion.
• Use the Angle field for exact alignment - When an overlay needs to sit at a specific angle, such as a diagonal banner or rotated badge, enter the value directly instead of rotating manually.
• Reserve Fit to screen for background replacements - For most overlay use cases, Freeform offers more control. Fit to screen works best only when replacing the full step background.
• Keep overlays relevant to the step - Unrelated or excessive visuals can distract viewers and reduce clarity.
• Preview before publishing - After applying, check positioning and sizing to confirm the image appears as intended for end users.