Time tracking is at the heart of Harvest. That’s what we do best. In this short tutorial, I’d like to show you how, using a Harvest account with the easy integration of our Button and Widget, you can add time-tracking capability to your own web application.
The only prerequisites are:
- A Harvest account (including the free one)
- You can create one using our sign-up form
- Node.js 16 for the demo application
In order to add the time tracking functionality to your application, we will have to perform these three steps:
- Add the Button and Widget bundle to your application
- Configure the bundle with the basics of your application
- Add the Timer element next to your chosen item
As an example, we will be using a simple Todo application. By the time you finish all three steps, you will be able to track time for every Todo entry.
Let’s get started!
Clone the app
The easiest way for you to start and follow this tutorial is to clone the repository. The steps below are provided for you to see the end result for this demo application on your own computer.
Getting the demo app can be achieved with:
git clone email@example.com:harvesthq/platform-integration-example.git
Then it should be followed by
npm install to install the dependencies and
npm run dev to start the development server inside of the
We should be able to see a message telling us that the local development server is available at http://127.0.0.1:5173. Opening that URL should show us the app. I have added three todo items for illustration purposes. I recommend adding some, too!
Let’s implement the needed changes to get our time tracking going.
Step 1: Adding the Platform bundle
In order to use time tracking, we need to add the required code that injects the time tracking functionality into our own app. The Platform bundle provides this, and we’re going to add it just before the ending of the head tag in the
Step 2: Configuring the Platform bundle
Including the Platform bundle is not sufficient to get the integration working. What is missing is some basic information so that it can be initialized correctly.
For that, we will tell Platform the name of our integration and where the items we track time to are located as a URL.
Step 3: Adding the timer element on screen
The final step is to add the timer element, called the Harvest Button. When clicked, the button will open the popup which will let us start the timer. Let’s add it after the todo’s title.
Refreshing the page should reveal the extra timer buttons next to the todo items.
When the timer button is clicked, the Harvest Button popup appears. It can be used to pick the project and task, add notes, and start the timer.
Bonus point: Dynamic update
addTodo function in the
App.vue file, we will send a custom event to the main Platform element that listens to those events.
In this post, we have learned how using Harvest Button allows us to quickly add time tracking capabilities to our own web applications. The same approach is used in other integrations, such as Asana, Basecamp, Jira or Trello.
There’s also our Harvest Widget that can be used to embed the timer form directly into websites, but we will leave the implementation of it as an exercise for you!