How to Add Elements to Interactive Demo in ProProfs Knowledge Base?

After creating your guide, you can place interactive elements directly on each step image — click markers, callouts, blurs, highlights, and more. Each element you add will be visible and interactive when readers the Interactive Demo walkthrough.

What Are Interactive Elements?

Interactive elements are visual overlays you place on top of a step's screenshot inside the ProProfs Knowledge Base guide editor. They appear both in the standard step view and during the Interactive Demo walkthrough — so every Click marker, Blur, Annotation, and Highlight your reader sees in playback mode was added here. Each element is scoped to the specific step you're editing and can be combined on a single step.

Why Use It?

A screenshot alone doesn't always tell readers what to do next. Here's when elements make the difference:

• Your step has a small or easy-to-miss button. Add a Click marker or Hotspot to point readers exactly to the right spot.
• A screenshot shows sensitive data. Use Blur to redact passwords, API keys, or personal information before publishing.
• You need to add context that isn't on screen. Drop an Annotation or Popup to explain something the UI doesn't make obvious.

When to Use Each Element

Picking the right element matters. Using a Popup where a Click marker would do — or adding an Annotation where a Highlight is enough — clutters the step and dilutes the reader's attention.

In this article, you will learn:

1. How to Add Elements to a Step
2. How to Add Click Element
3. How to Add CTA (Call-to-Action)
4. How to Add Hotspot
5. How to Add Blur
6. How to Add Image
7. How to Add Annotation
8. How to Add Highlight
9. How to Add Pop-up
10. Manage Added Elements

How to Add Elements to a Step

Step 1: Open your Step-by-Step Guide in the ProProfs Knowledge Base editor.

Step 2: Click the step you want to add an element to.

Step 3: In the right panel, scroll to the Add Interactive Elements section and click the element you want to add.

Click

The Click element places a tooltip marker on a specific area of the step image, telling readers exactly where to click and what happens next.

Step 1: Open your Step-by-Step Guide in the editor and click the step you want to edit.

Step 2: In the right panel, scroll to Add Interactive Elements and select Click Element.

Step 3: In the Click Properties panel, enter your tooltip text in the Text field.

Step 4: Set the Position — choose from Top, Right, Bottom, Left, Bottom right, or Bottom left depending on where the tooltip should appear relative to the click target.

Step 5: Set Visibility — choose Show on hover to display the tooltip only when the reader hovers, or Always show to keep it permanently visible.

Step 6: Set the On Click action — choose what happens when a reader clicks the marker in the Interactive Demo:

• Go to Next Step — advances to the next step automatically
• Go to Another Step — jumps to a specific step number
• Open Link — opens a URL
• Do Nothing — marker is visual only

Step 7: Check Zoom in preview (focus on this click) if the click target is small or easy to miss — this zooms the view onto the marked area during demo playback.

Tip: Use Always show for critical clicks so readers don't need to hover to see the instruction. Use Show on hover for secondary or optional actions.

CTA (Call-to-Action)

The CTA element adds a clickable button on the step that links readers to another article, page, or URL.

Step 1: In the Add Interactive Elements panel, select CTA option.

Step 2: In CTA Properties, enter the Label text — this is the button text readers see.

Step 3: Select Open Link from the on-click dropdown, then enter the full URL in the URL field.

Step 4: Check Open link in new tab if you want the URL to open without taking readers away from the guide.

Step 5: Set the Style — choose Primary for a filled button or Secondary for an outlined button.

Step 6: Adjust Border Radius to control how rounded the button corners are.

Hotspot

The Hotspot element places a pulsing animation dot on a specific point of the step image — drawing attention without adding a click instruction or tooltip.

Step 1: In the Add Interactive Elements panel, select the Hotspot element.

Step 2: Drag the Hotspot dot to the target area on the step image. The pulse animation will appear at that position.

Note: Use Hotspot for new features or subtle UI elements that users routinely miss — where you want to draw the eye without telling them to click. If readers need to take action on the element, use a Click marker instead.

Blur

The Blur element redacts sensitive information in a screenshot — passwords, API keys, emails, internal URLs, or any data that should not appear in a published guide.

Step 1: In the Add Interactive Elements panel, click Blur.

Step 2: In Blur Properties, set the Display Order if you're adding multiple blur elements on the same step (controls which renders on top).

Step 3: Choose the Type — Rectangle for covering text rows, fields, or URL bars; Ellipse for covering circular or irregular areas.

Step 4: Adjust the Opacity slider to control how heavily the area is obscured. A setting of 10 (maximum) renders the area completely opaque.

Step 5: Drag the blur overlay on the step image to position it over the area you want to redact. Resize using the corner handles.

Image

The Image element overlays an uploaded image or diagram directly on top of the step screenshot. Use it to add a legend, numbered reference card, prompt formula, or comparison diagram.

Step 1: In the Add Interactive Elements panel, click Image.

Step 2: In the My uploads dialog, select a previously uploaded image or click Upload to browse your local files.

[ Screenshot: My uploads dialog with Upload button and file browser ]

Step 3: In the Size and position section, choose:

• Freeform — drag and resize the image freely. Use the Angle field or the Rotate left / Rotate right controls to adjust the rotation.
• Fit to screen — the image fills the entire step image area.

Step 4: Drag the image to the correct position on the step — away from the primary action area so it doesn't block what readers need to interact with.

Step 5: Click Apply.

Tip: The Image element works best for information that has 3 or more components — a numbered legend, a before/after comparison, or a step flow diagram. If you only need to explain one thing, an Annotation is faster to create and easier to read.

Annotation

The Annotation element adds a text label or callout directly on the step image — for context that isn't visible in the UI itself.

Step 1: In the Add Interactive Elements panel, click Annotation.

Step 2: Enter your annotation text. Keep it to one line where possible — long annotations compete with the screenshot for attention.

Step 3: Drag the annotation tag to position it close to the element it references. If the annotation refers to a button or field, position it directly above or beside that element.

Highlight

The Highlight element draws a colored box around an area of the step image — it draws attention without dimming the rest of the screen.

Step 1: In the Add Interactive Elements panel, click Highlight.

Step 2: Enter a name for the highlight in the Name field (used internally to manage multiple highlights).

Step 3: Choose a Shape — Rectangle for buttons and fields, Circle for icons and small targets.

Step 4: Select a color from the color picker. Yellow is the standard for drawing attention; red works for warnings or errors.

Step 5: Resize and reposition the highlight box over the target area using drag handles.

Popup

The Popup element shows a tooltip or modal overlay on the step — used for optional context that only some readers need and that would clutter the step description if added inline.

Step 1: In the Add Interactive Elements panel, click Popup.

Step 2: Enter the Popup title and body text.

Step 3: Set the trigger — On hover shows the popup when the reader hovers over the trigger area; Always show keeps it open.

Step 4: Position the popup trigger icon on the step image next to the element it explains.

Managing Added Elements

All elements are saved per step and will appear exactly as configured when readers view the published guide. If an element doesn't appear in preview, check that it was added to the correct step — each element is scoped to the step you were editing when you added it. Still stuck? [Contact our support team] and we'll sort it out.

• All elements you've added to a step are listed in the Added Elements panel on the right.
• To delete any element, click the trash icon next to it in the list.
• You can add multiple elements of the same type to a single step.