Keeping a close eye on your clients’ websites is an important task for any digital agency. One of the easiest ways to do this is with a custom website dashboard that displays the most critical and actionable information about the sites you manage.

Below we will show you how you can get started on your very own custom website dashboard in just 5 minutes. Once you see how easy it is, we hope you’ll expand on it in ways that make sense for your organization.

Before you begin

To proceed with this tutorial, you will need a few things in place first:

1. A Watchful API key. You can generate this in the Settings > API Key area once you are logged into your account.
2. At least one site in your Watchful dashboard.
3. A server or local development environment running PHP, MySQL, and a web server like Apache or Nginx.
   1. Note: We do NOT recommend that the server/environment be publicly accessible.
4. A code editor or development IDE.

Step 1 — Download the custom website dashboard starter pack

The dashboard starter pack is a single PHP file (api-site-overview.php) that contains everything you need to build a custom website dashboard.

api-site-overview.php can be downloaded from GitHub.

Step 2 — Update API Key and upload file

1. Open api-site-overview.php in your editor/IDE.
2. Locate line 12 and replace YOUR_API_KEY_HERE with your actual API key.
3. Save the file and upload or move it to the web root of your server/development environment.

Step 3 — View your dashboard

Out of the box, the custom website dashboard has three views: grid, list, and table. Load api-site-overview.php in a browser and use the selector at the top right to preview each view.

Here is a preview of each one:

• 

• 

• 

Step 4 — Making changes

Watchful records a lot of data about each of the sites in your account. Using the API, you can choose the specific information you want to show in your custom website dashboard.

In this example we will add the site URL.

1. Visit the Watchful API documentation and click Sites > Get Sites. This will reveal all of the parameters for getting information about your sites.
2. As shown below, access_url returns the URL of the website.
3. Add the following line to api-site-overview.php to display the site URLs:
   <?php echo $site->access_url; ?>
   Note: Be sure this line appears after the foreach ($sitesdata as $site): statement on line 156.
4. Save the change and refresh api-site-overview.php in your browser.

Repeat this process for any other information as desired.

Getting creative with the Watchful API

Watchful users are very creative with our API. For example, Sue Grady at Connecting Point Computer Centers uses the API to generate site activity reports. These reports are then sent as customized emails to each client.

Matt Schwartz from Inspry uses the Watchful API exclusively and instead of the dashboard here at watchful.net. As Matt describes on the Hot Air podcast, they built a custom client portal with the Watchful API. The portal integrates site data from Watchful with marketing and project management information from other services.

Adrian Rodriguez integrated Watchful with monthly invoices generated by the online service Zoho!

We’d love to hear your ideas on using the Watchful API. Feel free to post them in the comments below along with any examples you may be already using or working on.