How to Setup a Demo Site For a Potential Client

Now that you have a list of potential clients you’d like to contact, the next thing to do is setup a demo of what their site could look like if they worked with you.

The purpose of a demo is to peek their interest just enough to start the conversation of potentially working together. It’s also meant to demonstrate the value that you could potentially provide to them. It’s not meant to be a final say of what their site will look like.

You don’t want to waste too much time, energy, or money on setting up a demo. Because, you never know if a potential client will like it or not.

As we mentioned before, you should be using WordPress to setup your client sites. One of the biggest benefits of using WordPress is that there is a massive marketplace for professionally designed WordPress themes.

Most of these themes do cost money, but we’ll show you how to demo them without having to pay for them.

These marketplaces already have live demos setup so that you can see what the theme would look like.

You can leverage these same demos to use for your clients. That’s the purpose of these demos. WordPress theme designers and developers want you to land clients using their themes. That’s how they get paid.

If a client likes the demo, then you can purchase the theme and offset the cost to your client  in their initial setup fee. That way, you don’t have to pay for it until your client pays you.

When you think about it, you’ve just partnered with professional designers and developers from around the world to deliver a high-quality product to your clients. That’s what we call leverage!

Alright, the first step is to find the URL of the demo you want to use. This can vary between which theme company you’re looking at.

We’ll show you how to find the live demo URL for StudioPress and ThemeForest. These are the two places where our agencies get most of the themes they use. The same principals should apply even if you’re looking at a different theme company or marketplace.

StudioPress Live Demo URL

Head over to StudioPress and in the top right navigation, click Shop for Themes.

Next, hover over any theme and click See Details and Pricing.

Once that loads, click Live Demo in the left sidebar. It’s this live demo that you want to use on your site.

To find the URL that you want to use, right-click on the middle of the page and click Inspect or Inspect Element. If you’re using Safari, you might need to enable your developer tools in order to see the Inspect Element option.

To do that, go to Safari > Preferences. Then, click the Advanced tab. On the bottom, click the checkbox to enable the Show Develop menu in menu bar  option. Now, if you right-click in the middle of the page, you should see the Inspect Element option.

Once the developer console opens, scroll up until you see the first iframe element. On that iframe element, you will see the live demo URL that you want use.

Double-click the URL to select it and then copy it. To copy the URL, you can press ctrl or cmd + c. Or, you can right-click the selected text and click Copy.

Here’s a video recap:


ThemeForest Live Demo URL

Head over to ThemeForest. In the search bar, type in real estate wordpress. You can also search for a type of theme you’re looking for, like yoga or business.

You should then be taken to a list of WordPress themes. Hover over the image of any theme and click Live Preview.

A new tab should open with a demo of the theme. On the new tab, you should see a dark navbar at the top.

Depending on the theme, you’ll either see an X or Remove Frame link in the top right corner. This link will remove the top navbar, which is what we want to do. Go ahead and click the X or Remove Frame link.

Now, you should just see the demo without the top navbar. Some themes will ask you to select a demo, while others will just take you right to the live demo.

Once you’re viewing the live demo, you are on the URL you want to use. So copy the current URL that’s in your browser’s address bar.

Here’s a video recap:


Adding the Demo URL To Your Site

Head over to your agency site and login to the admin area. Once you’re logged in, click the Pages link in the left sidebar navigation.

If you used our Agency Setup than we’ve already added a few demos for you. In the list of pages, you should see a page that says Demo or Demos. You should also see child pages under the demo page.

Hover over the Real Estate demo page and click the Duplicate This link. The duplicated page will say Draft next to the title. Hover over the duplicated page and click Edit.

Here, you’ll want to change the title to the name of the company you’ll be sending this demo to. You’ll also want to update the URL slug.

In the content editor, you’ll want to make sure that you are viewing the Text tab. Once you’re on the Text tab, you should see an iframe element. Replace the URL that you see with the URL that you had copied from StudioPress or ThemeForest.

Once that’s done, click the Publish button in the right sidebar. After the page is saved, click the View Page in the admin navbar at the top.

That’s it, you’ve successfully added a live demo to your site that you can now show to potential clients.

Here’s a video recap of adding a ThemeForest demo to your digital agency:

Here’s a video recap of adding a StudioPress demo to your digital agency:


Potential gotcha

There is one potential gotcha. If you’re hosting with Truhost, we automatically secure your site. However, if the live demo URL you’re using is not secure (meaning it does not use https://), then you’ll need to use the non-secure URL of your agency site.

So, if your agency site uses https://youragency.com and the live demo URL uses http://livedemo.com, then the demo will not load. You’ll need to use http://youragency.com for the demo to load.



Leave a Comment