Time Tracking Integration with
Builder.io

Integrate Cloc's Time Tracking components into your Builder.io projects with our visual drag-and-drop components.

Try Cloc on Builder.ioView Builder.io Docs

Quick Start

1. Connect to Builder.io

Follow these steps to connect your Builder.io account:

  • Log in to your Builder.io account
  • Go to 'Account Settings' → 'API Keys'
  • Copy your public API key
  • Paste your API key in the Cloc Visual Builder input field
  • Click 'Save API Key' to connect

2. Create Your Content

Start building your content in Builder.io:

  • In Builder.io, create a new page
  • Set the URL to match your desired path (e.g., /builder/home)
  • Design your page using the visual editor
  • Important: Click 'Publish' when ready

3. View Your Content

Preview and test your content:

  • Input your content page URL in the input field
  • Your published content will appear in the preview panel
  • Changes may take a few moments to reflect
  • Preview your page across different device sizes

Pro tip: Always remember to publish your content in Builder.io after making changes. Unpublished changes won't appear in the preview.

Available Components

Timer Components

Modern Timer

  • Advanced countdown with progress tracking
  • Customizable appearance
  • Progress visualization

Basic Timer

  • Simple countdown display
  • Clean, minimal design

Progress Circle

  • Visual time tracking
  • Customizable colors and size

Analytics Charts

  • Time tracking visualizations
  • Performance metrics

Using the Visual Editor

Adding Components

  • Open Builder.io editor
  • Find Cloc components in the left sidebar
  • Drag and drop components into your layout
  • Configure settings in the right panel

Customizing Components

  • Adjust timer settings
  • Change colors and styles
  • Set progress indicators
  • Configure analytics displays

Advanced Integration

If you need to embed Builder.io content in your code, you have two methods:

Method 1: Dynamic Content (Recommended for Regular Updates)

This method allows content updates through Builder.io without code changes:

Install required packages:

npm install @cloc/atoms @builder.io/react @builder.io/sdk

Initialize in your application:

import { Builder } from '@builder.io/react';
Builder.init('YOUR_API_KEY');


// In your page component
const MyPage = () => {
  const content = await builder.get('page', {
    // Use URL path
    userAttributes: {
      urlPath: '/your-page'
    }
    // OR use custom identifier
    query: {
      'data.pageId': 'homepage'
    }
  }).toPromise();


  return <BuilderComponent content={content} />;
};

Method 2: Generated Code (Best for Static Content)

Use this when you want code that you'll maintain directly:

  • Export the code from Builder.io

Integrate into your project:

import { ClocProvider } from '@cloc/atoms';


export default function App() {
  return (
    <ClocProvider>
      {/* Your exported Builder.io components */}
    </ClocProvider>
  );
}
  • Customize and maintain in your codebase

Examples

Explore different timer variants available in Builder.io. Each component is fully customizable through the Builder.io interface.

Default Timer

Component

A clean, minimal timer component with a modern design. Perfect for applications requiring a straightforward countdown display without additional visual elements. Supports basic timer functionality with start, pause, and reset controls.

00:00:00

Border Timer

Component

Enhanced visibility with a subtle border outline. Ideal for interfaces where the timer needs to stand out from the background while maintaining a professional appearance. The border helps define the component's boundaries clearly.

00:00:00

Expandable Timer

Component

A timer with the ability to expand and show additional controls and information. Suitable for applications where timer manipulation is a primary function. Users can expand/collapse the form with project/task selectors.

00:00:00

Ready to Build with Builder.io?

Start creating custom time tracking interfaces with Builder.io's visual editor and Cloc's components.

Try Cloc on Builder.io