Cal.com Platform offers customizable UI components powered by the battle-tested Cal.com infrastructure for seamless integration of scheduling into your app. With fully customizable atomic UI components, versatile APIs, and libraries, you can control every facet of the booking experience. Cal Atoms provides a secure, compliant, and fully customizable solution for building scheduling workflows, with various use cases and plug-and-play components. The platform offers a Javascript UI and React components SDK, platform-focused API endpoints, support add-ons, whitelabeling support, and is suitable for embedding in various industries.
Seamlessly integrate scheduling into your app with customizable UI components powered by the battle-tested Cal.com infrastructure.
The atoms
Customizable components for any scheduling workflow
Use our developer suite of atomic UI components to connect to various calendars, set availabilities, collect guest information and schedule appointments.
Fully customizable
Control every facet of the experience
Our versatile APIs and libraries let you combine the simplicity of pre-built components with the freedom of custom UIs. If you like Stripe elements, you will love Cal.com Atoms.
1234567891011121314151617181920
// style with css classNames (i.e. tailwindcss) const YourPage = () => ( <Booker eventSlug="30min" customClassNames={{ bookerContainer: datePickerCustomClassNames: datePickerDatesActive: availableTimeSlotsCustomClassNames: availableTimeSlotsHeaderContainer: availableTimes: }} />);
Get started
Get started with Cal Atoms
Start integrating a fully compliant scheduling workflow with only a few lines of code.
1
Integrate
For now Cal Atoms can be used with react.js. Once installed, you can use the components in your client-side application.
1
2
3
4
5
6
7
8
9
10
import { CalProvider, Booker } from "@calcom/atoms";export default function App() { return ( <CalProvider accessToken="30AadwEContactSalesToGetAKey42069"> <Booker username="jane-doe" eventSlug="weekly-sync" /> </CalProvider> );}
2
Customize
Each Atom can be fully configured to match your brand.
Primary color
Radius
Background
FFFFFFE6E7E4
Text color
171717FFFFFF
3
Collect
Once your Atom has been integrated and styled, you can start accepting bookings!
Feature & Benefits
Secure, compliant and fully customizable
Cal atoms were designed to simplify the process of building compliant scheduling workflows. They're flexible, secure and fully compliant under HIPAA, etc.
Use cases
The power of customizability without the pain of self-hosting
Cal Atoms can fit an almost unlimited number of use cases. Below are just some of the most common.
Plug & play components
We'll focus on timezone problems, so you can focus on building the parts of your business that deliver value to your customers.
Platform
$99/month*
50 bookings/month
(*) taxes and overages may apply.
Build your pixel-perfect booking experience. Seamlessly integrate scheduling into your app with customizable UI components.
- Javascript UI and React components SDK
- Platform-focused API Endpoints
- Basic and Advanced paid support add-ons
- Full Whitelabeling support
- Perfect for embedding in: Telehealth platforms, Sales tools, Hiring marketplaces, Startups, Coaching marketplaces, etc.