TurtleScene
Clickable demos

Share and embed a clickable demo

Publish a clickable demo, copy its link or embed code, open it on a chosen step or language, and export it as a video, GIF or PDF.

A clickable demo is private until you share it. Sharing gives it a public page you can send as a link, and an embed you can place on your website, help centre or docs. You can also export it as a video, GIF or PDF for places that can't run an interactive demo.

  1. Open the demo in the editor.
  2. In the top bar, click Share. This publishes the demo: it becomes reachable by link and its status changes from Draft to Published.
  3. On the Link tab, click the copy button next to Public link.

The link looks like https://turtlescene.xyz/d/your-workspace/your-demo. The share page shows your demo's title and description above the player.

Tip

Add your logo and a button such as "Book a demo" to the top of the share page under Personalize › Branding › Share page logo and Share page button.

  1. Click Personalize in the toolbar and open the Share tab.
  2. Turn off Public link enabled.

The share link and every embed of the demo stop working until you turn it back on or click Share again.

The same tab has Show progress bar and Arrow keys move between steps, which let viewers use the keyboard to move through the demo.

Embed the demo on a website

  1. Click Share and open the Embed tab.
  2. Copy one of the two snippets:
    • iframe (fixed height): full width, 600 pixels high.
    • Responsive 16:9 wrapper: keeps a 16:9 shape at any width.
  3. Paste it into your page's HTML.

The embed address uses /embed/ instead of /d/. You can add these options to the end of it, after ? or &:

Option What it does
autoplay=1 or autoplay=0 Turns autoplay on or off, overriding the demo's own setting.
loop=1 Starts again after the last step.
controls=0 Hides the player controls and progress bar.
start=2 Opens on a given step. Steps count from 0, so start=2 is the third step.
theme=dark Uses a dark background.
speed=1.5 Plays autoplay faster or slower.
hideEndScreen=1 Skips the end screen.
lang=es Shows a translated version (see below).
  1. Click Share and open the Deep link tab.
  2. Choose the step under Start at step.
  3. Copy the Deep link.

You can write tokens such as {{name}} or {{company}} in step titles, tooltips, chapter titles and the end call to action. The link then fills them in.

  1. Add a token to your text in the editor, for example "Welcome, {{name}}".
  2. Click Share and open the Personalize tab.
  3. Enter the key (name) and the value (Acme). Click + Add token for more.
  4. Copy the Personalized link.

The values travel in the link itself, for example ?name=Acme, so anyone with the link sees them. A token without a value shows as blank.

Share a translated version

You can add translated versions of the on-screen text: tooltips, step titles, chapter names, the call to action and lead form labels. A clickable demo has no narration to translate, and the screenshots keep your product's own language.

  1. Click Personalize in the toolbar and open the Languages tab.
  2. Pick a language from Add a language… and click Translate.
  3. When it shows Ready, add ?lang= and the language code to the share link or embed address, for example ?lang=es for Spanish.

The page doesn't show a language menu, so send each audience the link for its language. If a language isn't ready, viewers see the original.

Plan

Translated versions are available on Starter and up. Each language uses one AI recording from your monthly allowance, and redoing a language uses one more. See Translated versions.

Remove the TurtleScene badge

On Free, shared demos show a small Made with TurtleScene badge in the corner of the player and Powered by TurtleScene on the end screen. From Starter up you can hide the badge or replace it:

  1. Click Personalize in the toolbar and open the Branding tab.
  2. Under Watermark CTA, choose Hidden to remove the badge, or Custom to replace it with your own Text and URL.
Plan

Hiding or changing the badge is available on Starter and up. If a workspace moves back to Free, its demos show the default badge again.

Export as a video, GIF or PDF

  1. In the top bar, click the download icon, or click ⋯ › Export video….
  2. Choose the Resolution, Frame rate and Format (MP4, WebM, GIF or PDF).
  3. Optionally pick a Device frame (Browser, MacBook, iPhone, iPad), turn on Include controls, and set Intro pause, Outro pause, Padding and Background.
  4. Click Export video (or Export GIF or Export PDF). The dialog closes and progress shows in the bottom-right corner.
  5. When Export ready appears, click Download.

The video plays through the steps on its own. The PDF lists every step with its screenshot, title and tooltip. You can export a demo that isn't public, and exports skip the password and lead form.

Plan

Exports go up to 720p on Free, 1080p on Starter, and 4K on Studio and Team. Higher resolutions show (upgrade) in the list.

Use your own domain

On Studio and up, you can serve your demos from a subdomain of your own, such as demos.yourcompany.com. Set it up under Personalize › Integrations › Custom domain. See Custom domains.

Previous
Using the editor
Next
Lead capture & passwords
Still stuck? We answer every message.
Get helpcontact@turtletechsai.com