Docs · Guide

Add the demo button to your site.

Copy one script tag from your portal and paste it before the closing body tag on your site. It adds a Get a live demo button that opens your demo over the page. It works on your own domains and on other websites you list. You can also use your own button, or share the link.

Open your portal Start free

Copy your snippet

1Sign in to your portal and find Put it on your site. It appears once you go live.
2Press Copy snippet. Your snippet has your own link name in data-demo.

<script src="https://app.demopage.io/embed.js" data-demo="your-link" async></script>

The Put it on your site step in the portal: the script tag with a Copy snippet button, the options, and a field for other websites.

Paste it into your site

Put the snippet just before </body>, on every page that should show the button. Most site builders have one field for code that goes on every page.

Webflow: Site settings, then Custom code, then Footer code. Paste it, press Save changes, and publish the site. Custom code doesn't run in the Designer or in preview.
WordPress: with a plugin that adds code to every page, such as WPCode, open Code Snippets, then Header & Footer, and paste it under Footer. Or add it to your theme's footer.
HubSpot: Settings (the gear), then Content, then Pages. Choose your domain, or Default settings for all domains, paste it into Site footer HTML, and press Save.
Your own code: paste it before </body> in your page template or layout.

The button opens your demo over the page. Visitors stay on your site.

Where the button works

On your website's domain and its subdomains. Other sites can't frame your demo.
To show it on another site, such as a blog on a different domain or a webflow.io staging site, add that site under Other websites and press Save websites.

Use your own button

Add data-button="none" to the script, then add data-demopage-open to any link or button on your page.

data-label changes the button text, for example data-label="Book a demo".
data-color sets its color, for example data-color="#2563eb".
data-position="left" moves it to the bottom left.
data-language="es" opens the demo in Spanish, for a site in that language. Visitors can still pick another language.

<script src="https://app.demopage.io/embed.js" data-demo="your-link" data-button="none" async></script>
<a href="#" data-demopage-open>See a live demo</a>

Languages

Live demos, chat, and answers work in 17 languages, each with its own voice: English, Spanish, French, German, Italian, Portuguese, Russian, Chinese, Japanese, Korean, Hindi, Bengali, Gujarati, Kannada, Punjabi, Telugu, Urdu.

The demo starts in the visitor's browser language, and they can switch from the Language menu at the top. To choose one for them, add data-language to the script, or ?lang= to your link, like app.demopage.io/d/your-link?lang=de. Recordings keep the language they were made in.

Or share the link

Every demo also has its own page: app.demopage.io/d/your-link. Use it in emails, ads, and posts, where you can't add a script.

Check that it works

1Open your site in a private window and press the button. The demo opens over the page.
2In your portal, Results counts Saw the button and Opened the demo.

The trial runs 5 live demos a day. After that, visitors watch the recording.