Offering a demo version of a product, such as a theme or plugin, is one of the simplest ways you can convince a customer to purchase a product. Your product page, testimonials, and video demonstrations can only do so much. Some customers want to actually feel what it’s like to use a product they’re interested in. A demo is the perfect way to offer this, and a demo builder plugin is one of the simplest ways to offer it inside of WordPress.
A demo builder plugin is something every WordPress developer, specifically those who offer their own themes and plugins, needs in their toolkit. It lets you install your product in the backend of a WordPress installation and add whatever content you need to make it look as though you’re using it on a well-established site.
You can then hand it over to potential customers to let them try it out by giving them access to the demo installation in hopes that the trial will be enough to give them that extra nudge they need to complete a purchase. This is what MotoPress wants to help you accomplish with the Demo Builder.
Demo Builder Plugin Overview
The Demo Builder plugin by MotoPress lets you create a sandbox demo version of a WordPress product inside the backend of WordPress. It works like this. You install your product in the backend of WordPress and configure it in the way you want potential customers to see it. You then configure your settings to dictate which features customers have access to.
After that, you can embed an email opt-in form wherever you would like to advertise your demo, such as the landing page for your product. When a customer requests a demo, they’ll receive an email with the username and password for it. You can even convert these users into email subscribers using the built-in MailChimp integration MotoPress has included with this plugin.
1. Preparing for Installation
Demo Builder requires the use of a multisite setup in WordPress. You must enable WordPress multisite in your WordPress installation before you attempt to install this plugin.
Begin by setting up a server with the host of your choice and installing WordPress, or simply use your main site to create a network so you can create a separate site within the network to install your demo on.
How to Enable WordPress Multisite
Add this line of code to your wp-config.php file, beneath WP_DEBUG and above the “That’s all, stop editing! Happy blogging.” comment.
Save the file, and upload it to your WordPress installation to overwrite the current wp-config.php file.
Log into your WordPress dashboard, hover over Tools, and select the newly added Network Setup option.
Enter a name for your demo network, and enter your email address. Click Install to install WordPress multisite.
Follow the on-screen instructions in the next step. The first is to copy and paste the code in the first box and paste it beneath the WP_ALLOW_MULTISITE line of code in your wp-config.php file.
The second is to copy the second bit of code and replace it with the code in your .htaccess file.
Once you paste both lines of code into your wp-config.php and .htaccess files, you can re-upload both files to your WordPress installation. Click the Log In button at the bottom of the Create a Network page in WordPress to log back in once you’re done.
2. Installing Demo Builder
Now that WordPress multisite is enabled in your installation, you can hover over My Sites, hover over Network Admin, and select Plugins.
Click Add New, click Upload Plugin, select the ZIP folder for the Demo Builder plugin, and click Install Now.
Click Network Activate to activate the plugin.
3. Adding Demo Content to Your Installation
After you activate the plugin, open the dashboard of the site you want to present your demo on, and upload your product. Add any other content potential customers need to get a true taste of what it’s like to use your product.
For example, Sliced Invoices, the maker of a plugin that lets you send invoices inside the backend of WordPress, added a dozen quotes and invoices to their demo to give users a pretty good understanding of what their plugin looks like when a few invoices and quotes have been created.
You cannot install themes and plugins to individual sites in a multisite network. If you want to upload a plugin, hover over My Sites, hover over Network Admin, select Plugins, and upload your plugin just as we did with the Demo Builder plugin.
Once you install the plugin, you need to activate it on an individual site rather than Network Activate it. To do this, hover over My Sites, hover over the site you want to install your demo on, and select Dashboard. Now, you can head to the Plugins area and activate your plugin.
There are a few additional steps you need to take to add a theme to an individual site in a multisite network. Upload your theme in the same way you uploaded the plugin. Hover over My Sites, hover over Network Admin, and select Sites.
Click Edit on the site you want to enable your theme on.
Switch over to the Themes tab, and click Enable on the theme you want to enable for that site.
To activate the theme, all you need to do is go to My Sites > Network Admin > Sites > Dashboard for the site you want to install the theme on > Appearances > Themes.
4. Restricting Access to Demo Users
Hover over Network Admin, and select Dashboard. Hover over Demo in the admin panel to the left, and select Restrictions.
This is where you can select which parts of the WordPress admin demo users have access to. If your plugin or theme adds an extra menu item(s) to the admin panel, you’ll find it on this page.
Tick the box of any menu item/section you want demo users to have access to, and click Save to save your changes.
5. Configuring Your Settings
Like the Restrictions settings, you should access the Settings page for this plugin from the Network Admin dashboard.
The first tab is the General tab.
The most important settings in this tab are the Sandbox User Role and Sandbox Life Time settings. The Sandbox User Role lets you control which user role a demo user has when they log into your demo site.
The Sandbox Life Time setting lets you control how long a user has access to their demo once it has been created. This helps you save on server costs as all data created by a sandbox user is deleted once their time is up.
The Notifications tab is where you can configure the settings for the email users receive when they request a demo and the email you receive when a user creates one.
Configure your settings and email in the way you want them to appear, and click over to the Admin Notification section to configure those settings as well.
You can also tick the box at the top of the Admin Notification settings page to opt-out of receiving a notification when a user creates a sandbox.
If you want to send yourself a test email for either setting, scroll to the bottom of the page, enter your email address, and click Send.
The toolbar is a header you can place at the top of the frontend of your demo site to display a horizontal list of responsive options, additional products and a call-to-action button. Here’s an example of this toolbar, which you can view in MotoPress’ demo.
Tick the box at the top of the page to enable the toolbar.
If you want to add a product(s) to your toolbar, enter its ID, and give it a label.
Enter the URL to the product page for your product, and upload an image of it for the thumbnail. Enter the text you would like displayed on the button for your product, and enter a destination for the button.
Click Add Product to add a product to the toolbar, then scroll down to the bottom of the page and click Save to save your changes. You can add more than one product.
You can also upload a logo, as MotoPress did for their toolbar, enter alternate text and a URL for your button when a user does not select a product, and choose a theme.
Click Save to save your changes.
If you want to add demo users as email subscribers, open the MailChimp tab in the Settings section, tick the box to enable the setting, and enter your MailChimp username and API key.
Click Save to integrate the demo builder with your MailChimp account to select lists and use the opt-in confirmation setting.
If you do not use MailChimp, you can always use a service like Zapier to integrate MailChimp with your email marketing service provider. Zaps like these add new MailChimp subscribers to your list automatically. Alternatively, you can export any MailChimp subscribers you acquire through your demo and import them into your actual email list.
6. Adding a Sign-Up Form to Your Demo Website
The next step is to open the dashboard of the site you installed your demo product on and create a new page to host the sign-up form for it. If you need help, check out our tips on designing a well-optimized landing page in this article.
When your page is designed the way you want it, click the Demo Builder icon in the editor.
You can choose between a typical form or pop-up form. Place your cursor where you want to add the form, and choose your form. The settings menu for each form will appear as lightboxes.
Configure your settings how you want them to appear. Here’s what the Demo Form looks like by default using WordPress’ default theme.
The Demo Pop-Up appears as a button.
The email form appears as a pop-up when a user clicks on the button.
You can also add these forms as widgets to any widget area your theme contains.
7. Adding Custom Content
You can use the Is Sandbox and Is Not Sandbox modules to add different content to your page based on whether or not a user has created a sandbox. If you use the Is Sandbox setting, any content you create with it will only appear on the page if the user is inside a sandbox they have created.
If you want certain content to appear only when a user has not created a sandbox, use the Is Not Sandbox setting.
8. Monitoring Sandboxes
When a user submits their email address using the form you set up, they’ll receive the email you set up on the Notifications settings page. Navigate to Demo > Sandboxes to monitor the sandboxes your users have created.
Here’s what this screen looks like after a few sandboxes have been created.
You can delete or view sandboxes from this screen. You can view your entire demo’s activity by the day by navigating to Demo > Statistics.
Here’s what this screen looks like when a number of different sandboxes have been created.
Tools for Developers
MotoPress offers a long list of tools developers may find useful beginning on page 17 of this plugin’s documentation. It includes a list of actions for the Demo Builder…
…as well as a list of filters.
The Demo Builder plugin is available at CodeCanyon at a very reasonable price of $21, as of October 2016. Six months of premium support and future updates are included with this price. You can extend support for an additional 12 months for $6.38, as is typical with products from the Envato Market.
Final Thoughts on the Demo Builder Plugin
The Demo Builder provides an incredibly easy way for WordPress developers to showcase their products to customers. While many demos only allow you to view the frontend or backend of a product, this plugin allows users to view both.
It’s also easy to maintain due to the fact that usernames and passwords are sent to users automatically, and the clean-up process is as hands-off as it gets after you adjust the duration time per sandbox.
Check out MotoPress’ demo of this plugin if you’d like to try it out yourself.