Skip to main content

Voiceover

Preface supports per-step audio narration. You can write a script and generate it using AI, or upload your own MP3. Voiceover plays automatically when a viewer reaches each step.

Screenshot placeholder

A screenshot of the voiceover editor panel on the right-hand side will go here.

ElevenLabs API key required​

AI voiceover generation is powered by ElevenLabs. To use it, you need an ElevenLabs account and API key — this is separate from your Preface subscription and is billed directly by ElevenLabs.

To set up your API key:

  1. Create an account at elevenlabs.io if you don't have one
  2. Go to elevenlabs.io/app/api/api-keys and generate a key
  3. In Preface, go to Settings → Integrations and paste your key into the ElevenLabs field

Once saved, the Generate Audio button in the voiceover editor will become active.

note

Uploading your own MP3 does not require an ElevenLabs account.

Writing a script​

In the right-hand panel of the editor, you'll find the Voiceover section. Type your narration for the current step in the script field.

A good voiceover script:

  • Is written as you'd speak it, not as you'd write it
  • Is concise — aim for 10–20 seconds per step
  • Tells the viewer what to notice, not just what they can already see

Saving a script​

The script editor has two action buttons:

  • Save — persists the current script text without generating audio. Useful when you want to save your work and come back to generate later. Disabled until you make a change.
  • Generate Audio — saves the script and immediately generates audio from it. Enabled when there is no audio yet, or when the script has been edited since the last generation.

Generating audio with AI​

Once you've written your script, click Generate Audio. Preface saves your script and uses AI voice synthesis to convert it into a natural-sounding narration.

Screenshot placeholder

A screenshot showing the Generate Audio button and the audio player after generation will go here.

Generation takes a few seconds. Once complete, an audio player appears so you can preview the result before your viewers hear it.

tip

If the generated voice doesn't sound quite right, try adjusting your script. Shorter sentences with clear punctuation tend to produce the best results. You can regenerate as many times as you like.

Uploading a custom MP3​

Prefer your own voice or a professional recording? Click Upload MP3 to upload any MP3 file. This replaces any existing generated audio for that step.

Accepted formats: MP3, MP4 audio, OGG, WAV, WebM.

Removing audio​

Click Remove audio beneath the audio player to delete the voiceover for that step. Viewers will not hear anything on steps without audio.

Highlight markers​

Highlight markers let you draw the viewer's attention to a specific area of the screenshot in sync with the voiceover. As the audio plays, coloured rectangles pulse into view at the times you specify.

Adding a highlight​

Click inside the script textarea to focus it, then click Highlight in the Add annotation bar that appears below. This opens the highlight picker:

  1. Click and drag over the area of the screenshot you want to highlight
  2. Choose a colour from the palette
  3. Click Insert — a marker tag is inserted into your script at the current cursor position

The marker looks like this in your script:

[HIGHLIGHT:x,y,width,height,color]

You don't need to edit this manually — the picker handles it for you.

How it works​

When the audio plays and reaches the timestamp where the highlight tag appears, the coloured rectangle fades in over that area of the screenshot. This draws the viewer's eye without interrupting the narration.

Screenshot placeholder

A screenshot showing a highlight marker active during playback will go here.

Previewing a highlight​

While editing your script, click anywhere inside a [HIGHLIGHT:...] tag to see a live preview of the rectangle overlaid on the step image. The preview clears when you move the cursor outside the tag.

note

Highlight markers only work with AI-generated audio. If you've uploaded a custom MP3, the timing information needed to sync highlights is not available.

Clearing a highlight​

To remove an active highlight mid-narration, insert a bare [HIGHLIGHT] tag (no parameters) at the point in the script where it should disappear:

...and here you can see the export options. [HIGHLIGHT:120,340,200,40,blue] Click Export to download your report. [HIGHLIGHT] The file will appear in your downloads folder.

When playback reaches the bare [HIGHLIGHT], the rectangle fades out.

Tooltip markers​

Tooltip markers display a small text callout over a specific point on the screenshot, synced to the audio. Use them to label UI elements or add short contextual notes without needing a full highlight box.

Adding a tooltip​

Click inside the script textarea to focus it, then click Tooltip in the Add annotation bar. This opens the tooltip picker:

  1. Click anywhere on the screenshot to position the tooltip anchor
  2. Type the tooltip text in the field below the image — line breaks are supported and will be preserved
  3. Click Insert — a marker tag is inserted into your script at the current cursor position

You can re-click the image to reposition before inserting. A live preview of the tooltip bubble appears on the image as you type.

Syntax​

The tag inserted into your script looks like this:

[TOOLTIP:x,y,label text]
  • x, y — pixel coordinates on the screenshot (top-left origin)
  • label text — the text shown in the tooltip; may contain commas; use \n for line breaks

Example:

Click the Settings icon [TOOLTIP:840,52,Settings icon] to open the configuration panel.

When the audio reaches that point, a small dark pill appears at the specified coordinates with the label text.

Clearing a tooltip​

Insert a bare [TOOLTIP] tag to remove the active tooltip:

Click the Settings icon [TOOLTIP:840,52,Settings icon] to open the panel. [TOOLTIP] From here you can manage your account.

Previewing a tooltip​

While editing your script, click anywhere inside a [TOOLTIP:...] tag to see a live preview of the tooltip at the specified coordinates on the step image.

note

Like highlight markers, tooltips only work with AI-generated audio. Timing information is not available for uploaded MP3s.

Auto-advance​

When Auto advance is enabled, the demo moves to the next step automatically 3 seconds after the audio finishes — without the viewer needing to click.

Toggle the Auto advance switch in the voiceover panel (visible when audio is present on the step).

This is ideal for:

  • Fully automated demo flows
  • Embedded demos where you want zero interaction required

UI click simulation​

If you want to simulate a click interaction as part of the auto-advance, you can set a UI click position. This shows an animated mouse cursor moving to a point on the screenshot and making a click, as if a real user is interacting with the product.

Screenshot placeholder

A screenshot or GIF showing the cursor animation and click effect will go here.

To set a UI click:

  1. Enable Auto advance on a step with audio
  2. Click Set UI click
  3. In the picker, click the exact spot on the screenshot where the click should occur
  4. Click Confirm position

Timing during playback:

  • The cursor appears and moves to the target position
  • At 2 seconds after audio ends, the click animation and sound play
  • At 3 seconds, the demo advances to the next step

The cursor position is remembered from step to step. On consecutive steps with UI clicks, the cursor travels from the previous click position to the new one, creating a realistic sense of a user navigating through your product.

Click Edit UI click to reposition, or Clear to remove it.