Getting potential customers to purchase your app can be frustrating. It’s hard to know if an app is right for you just by reading a description. And users may not be willing to leave Weebly to visit your site to find out more.

Fortunately, Weebly lets you create a demo site to display your app in action. And even better, this site opens in a takeover screen on top of your app’s detail page, so users don’t have to go anywhere! They simply click the Live Demo button and your demo site launches in a takeover.

Here’s how the Price Chart app’s detail page might display with the Live Demo button.

Live Demo button on the Price Chart App Details page
Live Demo button on the Price Chart App Details page

And here’s how the demo site displays in the takeover.

Demo site for the Price Chart
Demo site for the Price Chart

Demo sites are optional. If you don’t create one, then the Live Demo button won’t display. But because this is the best way for your customers to get to know your app, we encourage everyone to create a demo site.

Demo Site Design Considerations

Your demo site is a place to make your app shine! It should immediately provide potential customers with a real sense of how the app works, so it needs to be more than just your app on a page.

Follow these design considerations to make the most of your demo site:

  • Your app is automatically installed to the demo site when you create it. Drop multiple instances of the app onto the page to showcase how changing the app’s settings affects the app. Try to capture the most likely configurations your customers will use.
  • Most apps should keep the site to one page. Because it’s displayed in a takeover, the demo site site is not be easily navigable. That said, some apps (like those for multi-languages) may require more than one. And don’t link to any other sites.
  • Consider using sections to highlight different areas of functionality for your app. But keep it simple. Customers won’t want to scroll and scroll and scroll to get info. Assume they have limited time to make their decision.
  • Include a “Call to Action” that invites the user to install your app. If you offer a free trial, make sure to let your customer know that.
  • You can include basic usage instructions to demonstrate how to use the most important aspects of your app, but a full instructional video should be part of a tutorial, not this demo.

Create Your Demo Site

To create your demo app, go to your app’s management page in the Dev Admin portal and click Create Demo Site.

Link to create a demo site for your app
Link to create a demo site for your app

A new site opens in the Weebly editor (this site is associated to your developer account, and so you can access it in the same way you access your developer test site). The name of your site by default is name of your app + Demo Site, for example, My App Demo Site. You can change this by clicking the Settings tab in the editor. If your app is an element, it’s installed and available from the Installed Apps section of the element tray on the left. Use it and other Weebly elements to create your demo page. Visit help.weebly.com for topics on creating a Weebly site.

Default page for a demo site in the Weebly editor
Default page for a demo site in the Weebly editor

​If your app is a back end app and/or a snippet, then it is automatically installed as well. Use the demo to show how and where your app appears on a published site.

When you’re done building your site, click Publish. Once published, the Live Demo button displays on your app’s page in the App Center. Unpublishing your site (by visiting the Settings tab) will remove the Live Demo button.

To view your demo site, on your app’s management page, click View in App Center. You’ll see the app’s listing. Click the Live Demo button to view the demo site exactly as your customers will view it.

Remove the Demo Site and Live Demo Button

​If you decide you don’t want to use your demo site once published, you can deactivate the Live Demo button in the App Center by unpublishing your site. Go to the Settings tab and at the bottom of the General Settings page, click Unpublish.


Help make these docs better!