iPhone
Android
Learn how to use Harvest Button and Widget to add time tracking functionality in your own application.
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 git@github.com:harvesthq/platform-integration-example.gitcd platform-integration-example
Then it should be followed by npm install to install the dependencies and npm run dev to start the development server inside of the platform-integration-example directory.
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 index.html file.
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
There’s one small drawback of the current implementation. Because this particular Todo app is a single JavaScript page, newly added todos do not immediately show the timer icon. The page has to be refreshed to make them appear. We can fix that! All we need to do is let Platform know that we’ve added a new todo dynamically. To do that, at the bottom of the addTodo function in the App.vue file, we will send a custom event to the main Platform element that listens to those events.
That’s it!
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.
If you are looking for an even quicker way to track time, you might want to give our browser extension a go. Alternatively, our desktop or mobile app might be your jam.
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!
