Links & Embeds

Create share links and embed demos on your website with iframe, script tag, or React component.

Every published demo gets a shareable link. You can also embed demos directly into your website, landing pages, or documentation.

To create a share link:

Open the demo and click Share.
Copy the generated link.
Optionally, customize the URL slug under Share > Link Settings.

Share links follow the format https://app.demoship.com/d/<your-slug>. You can change the slug at any time -- old links redirect automatically.

Embedding demos

iframe embed

The simplest embedding method. Paste this into any HTML page:

<iframe
  src="https://app.demoship.com/embed/<demo-id>"
  width="100%"
  height="600"
  frameborder="0"
  allow="fullscreen"
></iframe>

Script tag embed

For responsive sizing and analytics integration, use the script embed:

<div id="demoship-embed" data-demo-id="<demo-id>"></div>
<script src="https://cdn.demoship.com/embed.js"></script>

The script tag automatically adjusts the embed height and reports engagement events to your analytics integrations.

React component

Install the Demoship React SDK:

npm install @demoship/react

Then use the component:

import { DemoEmbed } from '@demoship/react';

export function ProductDemo() {
  return (
    <DemoEmbed
      demoId="<demo-id>"
      height={600}
      onComplete={(data) => console.log('Demo completed', data)}
    />
  );
}

The React component supports event callbacks for onStart, onStepChange, and onComplete.

Customizing embeds

In Share > Embed Settings, configure:

Auto-play -- Start the demo immediately on page load
Show controls -- Display or hide navigation controls
Brand bar -- Show or hide the Demoship branding (Pro and above)
Starting step -- Deep-link to a specific step in the demo

Note: Embeds inherit the demo's access settings. If the demo is password-protected, embedded viewers will see a password prompt.