Interactive demos

Some people would rather click through a product than watch it. An interactive demo is your take as a series of steps: a picture of the screen, a pulsing hotspot where the click happened, and a tip that says what's going on. Viewers click the hotspot (or Next) to move on, go back when they like, and never wait for a video to load.

It's made from the take you already recorded, with the same edits and blurs. Changing a step never changes the video.

#Make one

Open the editor's Demo tab and click Make Interactive Demo (you need at least one recorded scene). Before you do, the tab says how many steps it will make.

DemoTake makes a step for:

Parts you cut out, events you removed and scenes you left out have no steps.

Tips come from what the take already says: the caption on screen, else the voiceover, else a sentence about the click, else the scene's description. Write your captions or voiceover first for the best tips.

#Edit the steps

The Steps list shows every step with its picture, number, kind and tip. Click one to select it: the preview jumps to its picture, and the Step group opens above the list.

• Text: what the tip says. Type your own. To go back to the text it came from, click the button under it, named after that text: Use the Caption, Use the Voiceover, Use the Click Text or Use the Scene Description.
• Moves on: On click (the viewer clicks the hotspot; On Next when there's no hotspot) or By itself. A step that moves by itself stays for After seconds; 0 means as long as its voiceover, else 3 seconds.
• Tip: where the tip sits, Automatic, Above, Below, Left or Right.
• Hotspot: drag it on the preview to move it, and drag its corner to resize it. Or type Left, Top, Width and Height in percent. No Hotspot shows a Next button instead, Add Hotspot brings one back, and Reset Hotspot goes back to the click's own.
• Use Playhead Frame: move the playhead within the step's scene and use that frame as the step's picture. Reset Frame goes back.

Right-click a step to Move Up, Move Down, Merge with Next Step or Delete Step. A dot marks steps you edited, and a timer marks steps that move on by themselves.

If a camera zoom hides the hotspot at a step's moment, that step's picture is shown without the zoom, and the step says so.

#Options

• Scene titles adds a title step at the start of each scene, with its description. Turn it off for a shorter demo.
• Voiceover plays each step's part of the voiceover. It starts muted; viewers turn the sound on.

The ⋯ menu next to the step count has Refresh from Take (add steps for new clicks and keep your edits), Restore Deleted Steps, Rebuild from Take… (start over from the take; your step edits are lost, so it asks first) and Remove Interactive Demo. All of them can be undone.

#Preview it

Under Preview and Share, click Preview. DemoTake exports the demo and plays it in a window, exactly as viewers will see it. Open in Browser opens the same files in your browser.

Viewers can:

• click the hotspot, or Next, to move on, and Back to go back;
• use the arrow keys, or swipe on a phone or tablet;
• Pause a step that moves on by itself;
• turn the voiceover on with Sound off / Sound on;
• pick a language, when the take has more than one;
• Restart at any time, or Replay from the end screen.

#Export it as a website

Click Export in Preview and Share, or choose the Interactive Demo tile in the Export sheet. DemoTake writes the demo into the take's exports as a folder and a ZIP of it:

• open index.html in any browser. It works offline and needs no server;
• the folder holds the player, a picture per step (1920 and 960 pixels wide), the voiceover clips and a manifest.json;
• put the folder on any web host, or send the ZIP.

The export is checked before it's marked ready: every picture is there and every hotspot is inside its picture.

A take with languages puts every language in the same demo, with a language switch for viewers.

#Share it as a link

Click Share Link… in Preview and Share. DemoTake uploads the latest export (or makes one first) to DemoTake Cloud, and the Share sheet makes a link, like a video share link: public, with an access code, or for people you invite, with an expiry and an option to let viewers download the ZIP.

To put the demo on your site, in your docs or in Notion, open the link's ⋯ menu and choose Copy Embed Code. The demo plays in an <iframe> that resizes to the page.

On a subscription you can also add a call to action at the end or after a step, and see how far viewers get, step by step. See Embeds, calls to action and analytics.

Share links need a DemoTake Cloud account on Local or any subscription. Exporting the website doesn't.

#What the pictures show

Step pictures are drawn from the edited video only:

• every blur is in them, exactly as in your exports. The unblurred recording is never used;
• typing you masked never shows. A password step says "Enter your password." instead of what was typed;
• captions are left out of the pictures, because the tip says the same thing.

#In DemoTake Web

The web editor has the same Demo tab: make the demo, edit steps and hotspots, then Preview, Download ZIP or Share Link…, which makes a public link and gives you Copy Embed Code. Make the link private or invite-only afterwards from the take's Share menu.

#For agents

• interactive_build makes the demo. Run it again to add steps for new clicks; your edits stay. reset: true starts over.
• interactive_get lists the steps with their text, hotspot and where the text came from, in any of the take's languages.
• translate_take with kinds: ["interactive"] translates the tips you wrote and the ones that describe a click.
• interactive_update edits a step (text, hotspot, advance, placement) or several (delete, merge, order, restore).
• interactive_export writes the offline website; languages: ["all"] includes every language.
• interactive_share uploads it and returns the link and an embed code. share_update adds a call to action, and share_analytics reports how far viewers got.

{ "tool": "interactive_update", "arguments": { "take_id": "take_…", "step_id": "ist_…", "text": "Click New Project to start", "placement": "bottom" } }

From the terminal:

demotake export take_01j… --format interactive --languages source,de
demotake share take_01j… --interactive --visibility code --expires 14

See demotake export and demotake share.

#Next

• Embeds, calls to action and analytics
• Share links
• Voiceover and subtitles
• Your demo in other languages