Setup Product Demos
Setting up a plugin/theme sandbox demo can be really painful. Lot of folks try with WP multi-site or struggle setting up demos using in-house bash scripts, resulting in a frustrated experience for both - you and your users. Not to mention, you miss out on important usage insights too.
Well, InstaWP has solved this problem. Our WordPress product authors like GravityForms and WP Job Manager are already using our solution for demonstrating their products. And there are hundreds of more such examples.
Read this tutorial to figure out how to setup a product demo with InstaWP on your own.
Note: If you are not using InstaWP, sign up with our WordPress sandbox tool using this link.
Once you are signed in to the InstaWP dashboard, click on the Add New button.
Now, you will see a modal/popup on your screen.
To deliver good product demonstration experience, make sure to change Server Location as per your target audience's geography. Keep it closest to them.
You can add a site label to identify it with ease, and make other changes, as required.
Hit Create Site when you are ready, and InstaWP will auto-install it for you.
Use the Magic Login link to open this site's admin panel.
If everything went well, you will see your WordPress site's admin dashboard already.
You have your demo site installed. Now, you need to prepare it for your prospects, so think accordingly.
A few things you can do at this stage are:
Install your plugin/theme and its dependencies (e.g., adding essential plugins and modifying essential settings).
Install a theme on your site and set up a landing page for your demo users.
Add some demo content, may be create a sample page.
Add a message on Dashboard on how to use your demo. (You can use a plugin like this or this OR custom code inside the theme files).
Update the fields on Settings > General page.
Note: We currently support the following tested plugins and themes, which will work. Other plugins and themes can also be integrated, though they are not tested. ⚙️Plugins: WooCommerce, Bricks Builder & Elementor. ⚙️Themes (Customizer Settings): Astra, Hello Elementor, Twenty Twenty-Four, Twenty Twenty-Three, Twenty Twenty-Two, Twenty Twenty-One & Twenty Twenty.
All done? Great. Let's move to the next step.
A template is a snapshot of an active InstaWP website. It is possible to re-use this template and create more identical sites from it. You need to create a Shared Template for product demos, because you would like to make it public.
When you mark a template as "Shared" template, it is possible for you to share it with a link to anyone around the internet, for them to create an copy of your saved site.
The link will look something like this:
"https://app.instawp.com/launch?t=extendifydemo"
You can share this link to your potential customers, effectively creating a product sandbox / demo for your plugin, theme or SaaS business.
From the Staging page, click Save as Template icon adjacent to your site.
Add a name to your template, provide some description, and mark your template as Shared without fail.
Remember, these details will be visible to your users (and search engines) when they land on the demo page. So, keep them precise, crisp, and engaging.
Make sure that your template has a unique name.
You can also mark this template as Instant Template to improve its load speed.
An Instant Template is added to InstaWP's warm-up pool to load it superfast for your users. However, it will work as a regular shared template before it's actually becomes a part of our pool.
Save this template.
To copy the link to this shared template, from the Templates page, click on "Copy link" (written next to your template's name).
This link can be used on your landing pages, in your emails, and everywhere throughout your product promotion campaign.
You can customize the look and feel of your template landing page. From the Templates page, scroll down to your shared template, and click on the Edit button.
Now, you will find various options to help you control and customize your product demos more efficiently.
Modify the name, description, and other essential settings from here. For more infromation, refer to the Edit Setup document.
This section will let you customize your product demo to suit your brand needs. Logo, email template, privacy policy, custom CSS, and brand colors can be selected here. For more information, refer to the Edit Branding document.
Want to add one or more images related to your product on your product demo landing page? Do it here.
Full explanation of these template options can be found here. However, here are few notable ones:
Site Lifetime - Demo sites will be auto deleted after this.
Collect Email - Switch this off, if you want people to just try your product without an email address.
Auto Login - Automatically login to wp-admin panel, instead of showing credentials to users.
Email Provider - Use your preferred email provider (integrated with your InstaWP account) to send emails so that you can track your campaigns better.
You can also specify your demo users site cloning and file modification rights.
Alright! at this point your “Product Demo” is all set and you can pass the template link to your users and post it on your website.
The template landing page should look something like this:
And when the user will click on the Launch Demo button, the next screen will be:
Upon clicking Proceed, your prospect will be able to find demo account details and use the Magic Logic link to directly enter the product demo. (If the auto-login is enabled, user will directly see the WordPress admin dashboard.
Next, if you have set a redirect URL (linking to a page in dashboard/frontend), your prospect will reach that page. Otherwise, the WordPress admin panel of this demo setup will open up.
Did we miss anything in this WordPress product demo creation tutorial? Use the live chat option to ask us right now.
InstaWP provides flexible URL parameters to customize the launch of your WordPress site. Here's a breakdown and examples of how to use these URLs.
If your plugin page loads like this - /wp-admin/pluginpage.php, you can set the redir value accordingly.
https://app.instawp.io/launch?t=template-name&d=v2&redir=/wp-admin/pluginpage.php
If your plugin supports values in the URL, such as WooCommerce loading order information with wp-admin/post.php?post=15403&action=edit, you can use the post_cmd_var option.
Key: post
Value: 15403 (order ID)
To direct the user to an order edit page after launching the demo, use:
https://app.instawp.io/launch?t=woodmart&d=v2&redir=/wp-admin/post.php&post_cmd_var[post]=15403
If your plugin supports multiple values in the URL, such as a post edit page with additional parameters like wp-admin/post.php?post=12345&action=edit&meta_key=meta_value, you can use the post_cmd_var option to pass multiple key-value pairs.
Key1: post
Value1: 12345 (post ID)
Key2: meta_key
Value2: meta_value
To direct the user to a post-edit page with additional parameters after launching the demo, use:
https://app.instawp.io/launch?t=advanced-template&d=v2&redir=/wp-admin/post.php&post_cmd_var[post]=12345&post_cmd_var[meta_key]=meta_value
If your custom settings page loads like: /wp-admin/options-general.php?page=custom-settings, you can set the redir value accordingly.
URL Example:
https://app.instawp.io/launch?t=custom-template&d=v2&redir=/wp-admin/options-general.php?page=custom-settings
How can I get the emails of users via the shared template?
You can download a CSV OR connect to a CRM software using Webhooks. This is available only for paid members.
What are Advance Options?
Advance options allow you to customize the look and feel of the template landing page. This is available in the Professional plan and above.
What is an Instant Template?
You may notice that the demo instances are taking 5-60 seconds to create, Instant Template changes that. New instances will be launched, well, instantly!
Is there a limit of how many sites can be created by shared templates? And does this limit eat up my “Active Sites” limit?
We have same limit for this, which comes under “Active Sites” or "Staging Sites". When users create sites from your shared template, it does eat up your "Active Sites" limit.
What if I make changes to the site, can I sync changes to the template?
Yes, you can sync your changes. We have made a simple "sync" icon under each template, you can also choose to auto sync changes based on a schedule (available in paid plans).
💡 Did you know - Once you've created and customised your shared template, you can monetize it by sharing it publicly on the internet with anyone and start making money from it. Learn how to monetize a template.
Well, InstaWP has solved this problem. Our WordPress product authors like GravityForms and WP Job Manager are already using our solution for demonstrating their products. And there are hundreds of more such examples.
Read this tutorial to figure out how to setup a product demo with InstaWP on your own.
How to Setup a Product Demo using InstaWP?
Note: If you are not using InstaWP, sign up with our WordPress sandbox tool using this link.
Step 1 - Create a New Site
Once you are signed in to the InstaWP dashboard, click on the Add New button.
Now, you will see a modal/popup on your screen.
To deliver good product demonstration experience, make sure to change Server Location as per your target audience's geography. Keep it closest to them.
You can add a site label to identify it with ease, and make other changes, as required.
Hit Create Site when you are ready, and InstaWP will auto-install it for you.
Use the Magic Login link to open this site's admin panel.
If everything went well, you will see your WordPress site's admin dashboard already.
Step 2 - Setting up the Product Demo
You have your demo site installed. Now, you need to prepare it for your prospects, so think accordingly.
A few things you can do at this stage are:
Install your plugin/theme and its dependencies (e.g., adding essential plugins and modifying essential settings).
Install a theme on your site and set up a landing page for your demo users.
Add some demo content, may be create a sample page.
Add a message on Dashboard on how to use your demo. (You can use a plugin like this or this OR custom code inside the theme files).
Update the fields on Settings > General page.
Note: We currently support the following tested plugins and themes, which will work. Other plugins and themes can also be integrated, though they are not tested. ⚙️Plugins: WooCommerce, Bricks Builder & Elementor. ⚙️Themes (Customizer Settings): Astra, Hello Elementor, Twenty Twenty-Four, Twenty Twenty-Three, Twenty Twenty-Two, Twenty Twenty-One & Twenty Twenty.
All done? Great. Let's move to the next step.
Step 3 - Save your Site as a Shared Template
A template is a snapshot of an active InstaWP website. It is possible to re-use this template and create more identical sites from it. You need to create a Shared Template for product demos, because you would like to make it public.
When you mark a template as "Shared" template, it is possible for you to share it with a link to anyone around the internet, for them to create an copy of your saved site.
The link will look something like this:
"https://app.instawp.com/launch?t=extendifydemo"
You can share this link to your potential customers, effectively creating a product sandbox / demo for your plugin, theme or SaaS business.
From the Staging page, click Save as Template icon adjacent to your site.
Add a name to your template, provide some description, and mark your template as Shared without fail.
Remember, these details will be visible to your users (and search engines) when they land on the demo page. So, keep them precise, crisp, and engaging.
Make sure that your template has a unique name.
You can also mark this template as Instant Template to improve its load speed.
An Instant Template is added to InstaWP's warm-up pool to load it superfast for your users. However, it will work as a regular shared template before it's actually becomes a part of our pool.
Save this template.
To copy the link to this shared template, from the Templates page, click on "Copy link" (written next to your template's name).
This link can be used on your landing pages, in your emails, and everywhere throughout your product promotion campaign.
Step 4 - Customize Template
You can customize the look and feel of your template landing page. From the Templates page, scroll down to your shared template, and click on the Edit button.
Now, you will find various options to help you control and customize your product demos more efficiently.
Setup
Modify the name, description, and other essential settings from here. For more infromation, refer to the Edit Setup document.
Branding
This section will let you customize your product demo to suit your brand needs. Logo, email template, privacy policy, custom CSS, and brand colors can be selected here. For more information, refer to the Edit Branding document.
Gallery
Want to add one or more images related to your product on your product demo landing page? Do it here.
Advanced Options
Full explanation of these template options can be found here. However, here are few notable ones:
Site Lifetime - Demo sites will be auto deleted after this.
Collect Email - Switch this off, if you want people to just try your product without an email address.
Auto Login - Automatically login to wp-admin panel, instead of showing credentials to users.
Email Provider - Use your preferred email provider (integrated with your InstaWP account) to send emails so that you can track your campaigns better.
You can also specify your demo users site cloning and file modification rights.
Alright! at this point your “Product Demo” is all set and you can pass the template link to your users and post it on your website.
The template landing page should look something like this:
And when the user will click on the Launch Demo button, the next screen will be:
Upon clicking Proceed, your prospect will be able to find demo account details and use the Magic Logic link to directly enter the product demo. (If the auto-login is enabled, user will directly see the WordPress admin dashboard.
Next, if you have set a redirect URL (linking to a page in dashboard/frontend), your prospect will reach that page. Otherwise, the WordPress admin panel of this demo setup will open up.
Did we miss anything in this WordPress product demo creation tutorial? Use the live chat option to ask us right now.
URL parameters
InstaWP provides flexible URL parameters to customize the launch of your WordPress site. Here's a breakdown and examples of how to use these URLs.
| Components of URL | URL & Parameters | Description |
|---|---|---|
| Base URL | https://app.instawp.io/launch?t=your-template | Fixed part of the URL that initiates the launch process on InstaWP. |
| Moving parts (attached to the URL for customization) | &d=v2 | The parameter specifies the version of the launch process. |
| &redir=/wp-admin/edit.php | Specifies a redirect path within the WordPress admin area. | |
| &post_cmd_var[key1]=value1&post_cmd_var[key2]=value2 | Passes additional key-value pairs that can be processed by the application. |
Example 1: Redirecting to a Plugin Page
If your plugin page loads like this - /wp-admin/pluginpage.php, you can set the redir value accordingly.
https://app.instawp.io/launch?t=template-name&d=v2&redir=/wp-admin/pluginpage.php
Example 2: Redirecting to an Order Edit Page in WooCommerce
If your plugin supports values in the URL, such as WooCommerce loading order information with wp-admin/post.php?post=15403&action=edit, you can use the post_cmd_var option.
Key: post
Value: 15403 (order ID)
To direct the user to an order edit page after launching the demo, use:
https://app.instawp.io/launch?t=woodmart&d=v2&redir=/wp-admin/post.php&post_cmd_var[post]=15403
Example 3: Redirecting to a Post Edit Page with Multiple Parameters
If your plugin supports multiple values in the URL, such as a post edit page with additional parameters like wp-admin/post.php?post=12345&action=edit&meta_key=meta_value, you can use the post_cmd_var option to pass multiple key-value pairs.
Key1: post
Value1: 12345 (post ID)
Key2: meta_key
Value2: meta_value
To direct the user to a post-edit page with additional parameters after launching the demo, use:
https://app.instawp.io/launch?t=advanced-template&d=v2&redir=/wp-admin/post.php&post_cmd_var[post]=12345&post_cmd_var[meta_key]=meta_value
Example 4: Redirecting to a Custom Settings Page
If your custom settings page loads like: /wp-admin/options-general.php?page=custom-settings, you can set the redir value accordingly.
URL Example:
https://app.instawp.io/launch?t=custom-template&d=v2&redir=/wp-admin/options-general.php?page=custom-settings
FAQs
How can I get the emails of users via the shared template?
You can download a CSV OR connect to a CRM software using Webhooks. This is available only for paid members.
What are Advance Options?
Advance options allow you to customize the look and feel of the template landing page. This is available in the Professional plan and above.
What is an Instant Template?
You may notice that the demo instances are taking 5-60 seconds to create, Instant Template changes that. New instances will be launched, well, instantly!
Is there a limit of how many sites can be created by shared templates? And does this limit eat up my “Active Sites” limit?
We have same limit for this, which comes under “Active Sites” or "Staging Sites". When users create sites from your shared template, it does eat up your "Active Sites" limit.
What if I make changes to the site, can I sync changes to the template?
Yes, you can sync your changes. We have made a simple "sync" icon under each template, you can also choose to auto sync changes based on a schedule (available in paid plans).
💡 Did you know - Once you've created and customised your shared template, you can monetize it by sharing it publicly on the internet with anyone and start making money from it. Learn how to monetize a template.
Updated on: 18/07/2024
Thank you!