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

Expanded Timer

Component

A larger format timer with additional controls and information visible by default. Suitable for applications where timer manipulation is a primary function. Shows extended controls without requiring user interaction to reveal them.

Timer

00:00:00
Powered byEver Cloc

Resizable Timer

Component

Flexible timer component that can be resized by the user. Perfect for customizable interfaces where users need control over the component's size. Maintains functionality and clarity at different dimensions while allowing for personalized workspace organization.

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