Modo de manutenção

Cal.com Atoms estão em modo de manutenção

As integrações existentes continuam recebendo correções e novas versões npm, mas não haverá novos Atoms. Está criando agendamento dentro do seu próprio produto, para seus próprios usuários? Agora isso é coss.com Scheduling. Está criando em cima da sua própria conta Cal.com? Use API v2.

Ver coss.com Scheduling

appearance.tsLive preview

1// Style Atoms with Javascript23const appearance = {4  theme: Custom,5  variables: {6    fontFamily: 'Comic sans',7    colorPrimary: '#101010',8    colorBackground: '#ffffff',9    colorText: '#374151',10    borderRadius: '6px',11    spacingUnit: '8px',12  }13};14const atoms = cal.atoms({ clientSecret, appearance });15

Cédric van Ravesteijn

Why Cal.com is better than Calendly

Ready to see why Cal.com outshines Calendly? Spoiler alert: it's not even close!

15m30m45m1h

Cal Video

Europe/Amsterdam

May 2025

SUNMONTUEWEDTHUFRISAT12345678910111213141516171819202122232425262728293031

Com a confiança de empresas que crescem rápido no mundo todo

Componentes personalizáveis para qualquer fluxo de agendamento

Atoms são componentes React para cada parte do agendamento: conectar calendários, definir Disponibilidade, criar Links de agendamento e receber Reservas.

Ver coss.com Scheduling

@calcom/atoms

1import { Connect } from "@calcom/atoms";23export default function Connect() {4  return (5    <>6      <Connect.GoogleCalendar isMultiCalendar={true} />7      <Connect.OutlookCalendar isMultiCalendar={true} />8      <Connect.AppleCalendar isMultiCalendar={true} />9    </>10  )11}

Integrações existentes

Como os Atoms funcionam

Para equipes que já usam Atoms: um fluxo de agendamento totalmente em conformidade em poucas linhas de código.

Ver coss.com Scheduling

Integrar

Por enquanto, os Cal Atoms podem ser usados com react.js. Depois de instalados, você pode usar os componentes na sua aplicação client-side.

1import { CalProvider, Booker } from "@calcom/atoms";23export default function App() {4  return (5    <CalProvider accessToken="30AadwEContactSalesToGetAKey42069">6      <Booker username="jane-doe" eventSlug="weekly-sync" />7    </CalProvider>8  );9}

Personalizar

Cada Atom pode ser totalmente configurado para combinar com sua marca.

Primary color

Text color

Background

FFFFFF E6E7E4

Text color

242424 FFFFFF

Coletar

Depois que seu Atom for integrado e estilizado, você pode começar a aceitar Reservas!

This event is scheduled

We emailed you and the other attendees a calendar invitation with all the details.

WhatDesign WorkshopWhenFriday, 16 June 2022
9:00 am – 10:00 am (Europe/Dublin)

Seguro, em conformidade e totalmente personalizável

Os Cal Atoms foram criados para simplificar o processo de criar fluxos de agendamento em conformidade. Eles são flexíveis, seguros e totalmente em conformidade com HIPAA etc.

Ver coss.com Scheduling

Totalmente em conformidade e seguro

Os Cal Atoms estão totalmente em conformidade com padrões como HIPAA, SOC 2 e GDPR.

Infinitamente personalizável

Escolha os Atoms de que você precisa e adapte-os ao visual do seu site com estilização no nível de CSS.

Integração fácil

O Cal Atoms simplifica o processo de integração, permitindo que desenvolvedores adicionem recursos avançados de agendamento em horas, não semanas.

Vários componentes

Seja para coletar informações de Participantes ou dados de pagamento, existe um Atom para isso.

Confiável e escalável

Os Cal Atoms são construídos sobre a base de agendamento extremamente sólida da Cal.com. Já agendamos milhões de Reservas até hoje.

Suporte a tradução

Ofereça suporte a vários idiomas passando um objeto de traduções para qualquer Atom do Cal Atoms.

Configurável desde a base

Configure erros, breakpoints e estados de carregamento usando uma API simples.

Amigável para desenvolvedores

A Cal.com foi criada por desenvolvedores, para desenvolvedores. Nossa documentação completa e recursos para desenvolvedores tornam a integração muito fácil.