››

How to Add Interactive Elements?

Interactive elements are visual overlays you place on top of a step's screenshot inside the guide editor, such as Click Markers, CTAs, Blur, Images, Text, Highlights, and Popups. They appear in the standard step view and during Interactive Demo playback, and each one is scoped to the specific step you add it to.

What Are Interactive Elements?

Interactive elements are the building blocks you add to any Step-by-Step Guide step: Click, CTA, Hotspot, Blur, Image, Annotation, Highlight, and Popup. Every marker your reader sees during a standard walkthrough or an Interactive Demo playback was added from the Add Interactive Elements panel on a specific step.

Watch this video walkthrough to see it in action.

Or Continue Reading for step-by-step instructions.

Why Use It?

Interactive elements turn a plain screenshot into a guided, clickable moment for the reader.

Reader can't tell where to click next? A Click or Hotspot marker points to the exact spot.
Screenshot contains sensitive data? A Blur element hides it before the guide is published.
Step needs more context than a screenshot alone gives? Annotation, Highlight, Image, and Popup add labels, callouts, and reference material directly on the step.

Example Use Cases

A support agent adds a Blur element to hide a customer's account number in a screenshot.
A trainer adds a Hotspot to a busy dashboard, then adds an Image legend to label six unlabeled controls.
A product marketer adds a CTA button with an Open Link action to route readers to a signup page.

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.

Element	Use it when	Example
Click	You need to show readers exactly where to click on a screen.	Pointing to the "+ Add New" button on a dashboard
CTA	You want to send readers to another article, resource, or URL from inside a step.	Linking to a pricing page from a feature Walkthrough step
Blur	A screen may contain passwords, API keys, email addresses, or internal staging URLs.	Hiding a customer email address visible in a Ticket view
Highlight	One area needs to stand out without dimming the rest of the screen.	Drawing a yellow box around the field the user Fills in next
Annotation	You need to add a label, warning, or callout that isn't visible in the UI.	Adding "Do not click Save yet" above a button the reader should skip.
Image	The screenshot alone doesn't explain itself, it needs a diagram or reference on top.	Adding a numbered legend to a busy dashboard with 6 unlabeled controls
Hotspot	A specific point needs a subtle pulse animation to draw the eye — no instruction needed.	Highlighting a new feature icon that readers Routinely miss
Popup	An unlabeled UI element needs an explanation that only some readers need.	Explaining what "Agent (Beta)" does without cluttering the step description

Step-by-Step Instructions

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 — Mark a clickable area on the step

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 4: Select the Click card to add a clickable marker to the screenshot.

Step 5: Set Display Order to control the sequence when a step has more than one element.

Step 6: Type the tooltip text, for example "Start a fresh conversation from here.

Step 7: Set the tooltip's Position: top, right, bottom, left, bottom left, or bottom right.

Step 8: 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 9: Enable Zoom in Preview to zoom into the element during Interactive 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.

Note: The On Click action only applies during the Interactive Demo walkthrough — it has no effect in the standard static step view.

CTA — Add a call-to-action button

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

Step 10: Click the CTA card to add a call-to-action button to the step.

Note: Display Order, button text, Position, Visibility, and On Click work the same way as they do for a Click element.

Step 11: When On Click is set to Open Link, enter the URL to open in a new tab.

Step 12: Choose the button Style: Primary or Secondary.

Step 13: Set the button's Color and Border Radius.

Hotspot — Add a pulsing dot to draw attention

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 14: Click the Hotspot card to add a pulsing dot to an area on the step.

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

Note: Text, Position, Visibility, and On Click work the same way as they do for a Click element.

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 — Hide sensitive content from viewers

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 16: Click the Blur card to hide sensitive information on the step.

Step 17: Set the blur's Display Order, Opacity, and Type (Rectangle or Ellipse).

Image — add an image to a step.

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 18: Click the Image card to overlay an image, such as a legend diagram or reference card, on the screenshot.

Step 19: Upload the image.

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 — Add a label or note to the step

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 20: Click the Annotation card to add a text label to the step.

Step 21: Set the text Size, Color, and Alignment, and apply Bold, Italic, Underline, or a Link as needed.

Tip: Use Annotation for warnings and procedural notes that every reader must see — things like "Do not click Save until Step 4 is complete." For optional context only some readers need, use a Pop-up instead.

Highlight — Mark text or an area to stand out

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 22: Click the Highlight card to mark an area or text on the step.

Step 23: Set the highlight's Display Order, Color, and Opacity.

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

Tip: Use Highlight when the target element is surrounded by similar-looking UI and would be hard to spot without a colour cue. Combine with a Click element on the same target when you also need to show readers that it's clickable.

Popup — Show a tooltip or modal message

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 25: Click the Popup card to show a tooltip or modal message on the step.

Step 26: Set the popup's Alignment, Heading, and Description.

Step 27: Set the popup's Color, Width, and Border Radius.

Step 28: Add or edit the pop-up buttons, including a secondary button.

Tip: Popup is the right choice for unlabeled UI icons where the explanation is longer than one line — like a "Beta" badge, a settings gear, or a three-dot menu. It keeps the step clean for readers who already know what the element does.

Managing Added Element

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.

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.

Related Articles

Was this information helpful?

Thank you Your feedback helps us to continually improve our content.