![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 16.071 12.955 L 16.071 9.651 C 16.071 8.941 15.496 8.365 14.786 8.365 L 9.643 8.365 L 9.643 5.061 C 10.897 4.737 11.714 3.532 11.551 2.247 C 11.388 0.963 10.295 0 9 0 C 7.705 0 6.612 0.963 6.449 2.247 C 6.286 3.532 7.103 4.737 8.357 5.061 L 8.357 8.365 L 3.214 8.365 C 2.504 8.365 1.929 8.941 1.929 9.651 L 1.929 12.955 C 0.675 13.279 -0.142 14.484 0.021 15.769 C 0.184 17.053 1.277 18.016 2.572 18.016 C 3.866 18.016 4.959 17.053 5.122 15.769 C 5.286 14.484 4.468 13.279 3.214 12.955 L 3.214 9.651 L 14.786 9.651 L 14.786 12.955 C 13.532 13.279 12.714 14.484 12.878 15.769 C 13.041 17.053 14.134 18.016 15.428 18.016 C 16.723 18.016 17.816 17.053 17.979 15.769 C 18.142 14.484 17.325 13.279 16.071 12.955 M 3.857 15.437 C 3.857 16.147 3.282 16.722 2.572 16.722 C 1.861 16.722 1.286 16.147 1.286 15.437 C 1.286 14.727 1.861 14.151 2.572 14.151 C 3.282 14.151 3.857 14.727 3.857 15.437 M 7.714 2.58 C 7.714 1.87 8.29 1.294 9 1.294 C 9.71 1.294 10.286 1.87 10.286 2.58 C 10.286 3.29 9.71 3.865 9 3.865 C 8.29 3.865 7.714 3.29 7.714 2.58 M 15.428 16.722 C 14.718 16.722 14.143 16.147 14.143 15.437 C 14.143 14.727 14.718 14.151 15.428 14.151 C 16.139 14.151 16.714 14.727 16.714 15.437 C 16.714 16.147 16.139 16.722 15.428 16.722" fill="rgb(0, 0, 0)" height="18.016311920580208px" id="GKXyVanMq" stroke-dasharray="0" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="0.5" stroke="rgb(0, 0, 0)" transform="translate(3 3)" width="18px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="t2lXByE48-2031533640-linear-gradient" x1="0.49751243781094523" x2="0.5024875621890548" y1="0" y2="1"><stop offset="0" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(227, 224, 244)"/></linearGradient><linearGradient id="CBS1bzkxF-2031533640-linear-gradient" x1="0.49751243781094523" x2="0.5024875621890548" y1="0" y2="1"><stop offset="0" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(227, 224, 244)"/></linearGradient><linearGradient id="Jd7AK81w9-2031533640-linear-gradient" x1="0.49751243781094523" x2="0.5024875621890548" y1="0" y2="1"><stop offset="0" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(227, 224, 244)"/></linearGradient></defs><g d="M 0 16 L 0 0 L 16 0 L 16 16 Z M 9.167 5.167 C 9.167 4.891 8.943 4.667 8.667 4.667 C 8.391 4.667 8.167 4.891 8.167 5.167 C 8.167 6.784 7.809 7.834 7.155 8.488 C 6.501 9.143 5.451 9.5 3.833 9.5 C 3.557 9.5 3.333 9.724 3.333 10 C 3.333 10.276 3.557 10.5 3.833 10.5 C 5.451 10.5 6.501 10.857 7.155 11.512 C 7.809 12.166 8.167 13.216 8.167 14.833 C 8.167 15.109 8.391 15.333 8.667 15.333 C 8.943 15.333 9.167 15.109 9.167 14.833 C 9.167 13.216 9.524 12.166 10.178 11.512 C 10.832 10.857 11.883 10.5 13.5 10.5 C 13.776 10.5 14 10.276 14 10 C 14 9.724 13.776 9.5 13.5 9.5 C 11.883 9.5 10.832 9.143 10.178 8.488 C 9.524 7.834 9.167 6.784 9.167 5.167 Z M 4 3.667 C 4 3.483 3.851 3.333 3.667 3.333 C 3.483 3.333 3.333 3.483 3.333 3.667 C 3.333 4.32 3.189 4.715 2.952 4.952 C 2.715 5.189 2.32 5.333 1.667 5.333 C 1.483 5.333 1.333 5.483 1.333 5.667 C 1.333 5.851 1.483 6 1.667 6 C 2.32 6 2.715 6.145 2.952 6.382 C 3.189 6.618 3.333 7.013 3.333 7.667 C 3.333 7.851 3.483 8 3.667 8 C 3.851 8 4 7.851 4 7.667 C 4 7.013 4.145 6.618 4.382 6.382 C 4.618 6.145 5.013 6 5.667 6 C 5.851 6 6 5.851 6 5.667 C 6 5.483 5.851 5.333 5.667 5.333 C 5.013 5.333 4.618 5.189 4.382 4.952 C 4.145 4.715 4 4.32 4 3.667 Z M 7.333 1 C 7.333 0.816 7.184 0.667 7 0.667 C 6.816 0.667 6.667 0.816 6.667 1 C 6.667 1.422 6.573 1.65 6.445 1.778 C 6.317 1.906 6.089 2 5.667 2 C 5.483 2 5.333 2.149 5.333 2.333 C 5.333 2.517 5.483 2.667 5.667 2.667 C 6.089 2.667 6.317 2.761 6.445 2.889 C 6.573 3.016 6.667 3.244 6.667 3.667 C 6.667 3.851 6.816 4 7 4 C 7.184 4 7.333 3.851 7.333 3.667 C 7.333 3.244 7.427 3.016 7.555 2.889 C 7.683 2.761 7.911 2.667 8.333 2.667 C 8.517 2.667 8.667 2.517 8.667 2.333 C 8.667 2.149 8.517 2 8.333 2 C 7.911 2 7.683 1.906 7.555 1.778 C 7.427 1.65 7.333 1.422 7.333 1 Z" fill="transparent" height="16px" id="aoZYv33vR" width="16px"><path d="M 0 16 L 0 0 L 16 0 L 16 16 Z" fill="transparent" height="16px" id="Z2uGmhW9f" width="16px"/><g d="M 7.833 4.5 C 7.833 4.224 7.609 4 7.333 4 C 7.057 4 6.833 4.224 6.833 4.5 C 6.833 6.117 6.476 7.168 5.822 7.822 C 5.168 8.476 4.117 8.833 2.5 8.833 C 2.224 8.833 2 9.057 2 9.333 C 2 9.61 2.224 9.833 2.5 9.833 C 4.117 9.833 5.168 10.191 5.822 10.845 C 6.476 11.499 6.833 12.549 6.833 14.167 C 6.833 14.443 7.057 14.667 7.333 14.667 C 7.609 14.667 7.833 14.443 7.833 14.167 C 7.833 12.549 8.191 11.499 8.845 10.845 C 9.499 10.191 10.549 9.833 12.167 9.833 C 12.443 9.833 12.667 9.61 12.667 9.333 C 12.667 9.057 12.443 8.833 12.167 8.833 C 10.549 8.833 9.499 8.476 8.845 7.822 C 8.191 7.168 7.833 6.117 7.833 4.5 Z M 2.667 3 C 2.667 2.816 2.517 2.667 2.333 2.667 C 2.149 2.667 2 2.816 2 3 C 2 3.654 1.855 4.048 1.618 4.285 C 1.382 4.522 0.987 4.667 0.333 4.667 C 0.149 4.667 0 4.816 0 5 C 0 5.184 0.149 5.333 0.333 5.333 C 0.987 5.333 1.382 5.478 1.618 5.715 C 1.855 5.952 2 6.346 2 7 C 2 7.184 2.149 7.333 2.333 7.333 C 2.517 7.333 2.667 7.184 2.667 7 C 2.667 6.346 2.811 5.952 3.048 5.715 C 3.285 5.478 3.68 5.333 4.333 5.333 C 4.517 5.333 4.667 5.184 4.667 5 C 4.667 4.816 4.517 4.667 4.333 4.667 C 3.68 4.667 3.285 4.522 3.048 4.285 C 2.811 4.048 2.667 3.654 2.667 3 Z M 6 0.333 C 6 0.149 5.851 0 5.667 0 C 5.483 0 5.333 0.149 5.333 0.333 C 5.333 0.756 5.239 0.984 5.112 1.112 C 4.984 1.239 4.756 1.333 4.333 1.333 C 4.149 1.333 4 1.483 4 1.667 C 4 1.851 4.149 2 4.333 2 C 4.756 2 4.984 2.094 5.112 2.222 C 5.239 2.35 5.333 2.578 5.333 3 C 5.333 3.184 5.483 3.333 5.667 3.333 C 5.851 3.333 6 3.184 6 3 C 6 2.578 6.094 2.35 6.222 2.222 C 6.35 2.094 6.578 2 7 2 C 7.184 2 7.333 1.851 7.333 1.667 C 7.333 1.483 7.184 1.333 7 1.333 C 6.578 1.333 6.35 1.239 6.222 1.112 C 6.094 0.984 6 0.756 6 0.333 Z" fill="transparent" height="14.66671286102295px" id="ae6ccdFme" transform="translate(1.333 0.667)" width="12.66663px"><path d="M 5.833 0.5 C 5.833 0.224 5.609 0 5.333 0 C 5.057 0 4.833 0.224 4.833 0.5 C 4.833 2.117 4.476 3.168 3.822 3.822 C 3.168 4.476 2.117 4.833 0.5 4.833 C 0.224 4.833 0 5.057 0 5.333 C 0 5.61 0.224 5.833 0.5 5.833 C 2.117 5.833 3.168 6.191 3.822 6.845 C 4.476 7.499 4.833 8.549 4.833 10.167 C 4.833 10.443 5.057 10.667 5.333 10.667 C 5.609 10.667 5.833 10.443 5.833 10.167 C 5.833 8.549 6.191 7.499 6.845 6.845 C 7.499 6.191 8.549 5.833 10.167 5.833 C 10.443 5.833 10.667 5.61 10.667 5.333 C 10.667 5.057 10.443 4.833 10.167 4.833 C 8.549 4.833 7.499 4.476 6.845 3.822 C 6.191 3.168 5.833 2.117 5.833 0.5 Z" fill="url(%23t2lXByE48-2031533640-linear-gradient)" height="10.66671px" id="t2lXByE48" transform="translate(2 4)" width="10.66663px"/><path d="M 2.667 0.333 C 2.667 0.149 2.517 0 2.333 0 C 2.149 0 2 0.149 2 0.333 C 2 0.987 1.855 1.382 1.618 1.618 C 1.382 1.855 0.987 2 0.333 2 C 0.149 2 0 2.149 0 2.333 C 0 2.517 0.149 2.667 0.333 2.667 C 0.987 2.667 1.382 2.811 1.618 3.048 C 1.855 3.285 2 3.68 2 4.333 C 2 4.517 2.149 4.667 2.333 4.667 C 2.517 4.667 2.667 4.517 2.667 4.333 C 2.667 3.68 2.811 3.285 3.048 3.048 C 3.285 2.811 3.68 2.667 4.333 2.667 C 4.517 2.667 4.667 2.517 4.667 2.333 C 4.667 2.149 4.517 2 4.333 2 C 3.68 2 3.285 1.855 3.048 1.618 C 2.811 1.382 2.667 0.987 2.667 0.333 Z" fill="url(%23CBS1bzkxF-2031533640-linear-gradient)" height="4.66667px" id="CBS1bzkxF" transform="translate(0 2.667)" width="4.66667px"/><path d="M 2 0.333 C 2 0.149 1.851 0 1.667 0 C 1.483 0 1.333 0.149 1.333 0.333 C 1.333 0.756 1.239 0.984 1.112 1.112 C 0.984 1.239 0.756 1.333 0.333 1.333 C 0.149 1.333 0 1.483 0 1.667 C 0 1.851 0.149 2 0.333 2 C 0.756 2 0.984 2.094 1.112 2.222 C 1.239 2.35 1.333 2.578 1.333 3 C 1.333 3.184 1.483 3.333 1.667 3.333 C 1.851 3.333 2 3.184 2 3 C 2 2.578 2.094 2.35 2.222 2.222 C 2.35 2.094 2.578 2 3 2 C 3.184 2 3.333 1.851 3.333 1.667 C 3.333 1.483 3.184 1.333 3 1.333 C 2.578 1.333 2.35 1.239 2.222 1.112 C 2.094 0.984 2 0.756 2 0.333 Z" fill="url(%23Jd7AK81w9-2031533640-linear-gradient)" height="3.333333px" id="Jd7AK81w9" transform="translate(4 0)" width="3.3333399999999997px"/></g></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 2 8 C 0.895 8 0 7.105 0 6 L 0 2 C 0 0.895 0.895 0 2 0 L 6 0 C 7.105 0 8 0.895 8 2 L 8 6 C 8 7.105 7.105 8 6 8 Z M 4 8 L 4 12 C 4 13.105 4.895 14 6 14 L 10 14 M 12 18 C 10.895 18 10 17.105 10 16 L 10 12 C 10 10.895 10.895 10 12 10 L 16 10 C 17.105 10 18 10.895 18 12 L 18 16 C 18 17.105 17.105 18 16 18 Z" fill="transparent" height="18px" id="Ioh1JC5rr" transform="translate(3 3)" width="18px"><path d="M 2 8 C 0.895 8 0 7.105 0 6 L 0 2 C 0 0.895 0.895 0 2 0 L 6 0 C 7.105 0 8 0.895 8 2 L 8 6 C 8 7.105 7.105 8 6 8 Z" fill="transparent" height="8px" id="ZrCrI93dV" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(0, 0, 0)" width="8px"/><path d="M 0 0 L 0 4 C 0 5.105 0.895 6 2 6 L 6 6" fill="transparent" height="6px" id="emltWYAiE" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(0, 0, 0)" transform="translate(4 8)" width="6px"/><path d="M 2 8 C 0.895 8 0 7.105 0 6 L 0 2 C 0 0.895 0.895 0 2 0 L 6 0 C 7.105 0 8 0.895 8 2 L 8 6 C 8 7.105 7.105 8 6 8 Z" fill="transparent" height="8px" id="WpBecYDfi" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(0, 0, 0)" transform="translate(10 10)" width="8px"/></g></svg>)
01
Crie o tipo do seu evento
Configure o seu evento no Cal.com com as suas definições e disponibilidade preferidas.
02
Escolha o tipo de embedding
Escolha um formato (inline, pop-up, botão ou email) e copie o código gerado.
03
Ajuste o seu embed e publique
Adicione o código ao seu site ou aplicativo. O seu agendador estará ao vivo instantaneamente!
01
Incorporar inline
Exiba o calendário de reservas diretamente no layout da sua página. Esta é a opção mais popular e fluida para agendamento em tempo real no seu site.
02
Botão pop-up flutuante
Utilize um botão persistente que ativa um modal de agendamento. Aumenta a conversão sem disruptar o design da sua página web.
03
Pop-up através do clique no elemento
Vincule o incorporado a um elemento personalizado, como um botão ou imagem. Controle exatamente como e quando os utilizadores iniciam o processo de reserva.
03
Incluir email
Adicione links de reserva personalizados em campanhas de e-mail que abram um formulário de reserva pré-preenchido. Ideal para abordagens e seguimentos.
1
// Estilizar átomos com Javascript
2
3
const aparência = {
4
tema : Personalizado ,
5
variáveis : {
6
fontFamily : ' Comic sans ' ,
7
corPrimária : ' #101010 ' ,
8
corFundo : ' #ffffff ' ,
9
corTexto : ' #374151 ' ,
10
borderRadius : ' 6px ' ,
11
spacingUnit : ' 8px ' ,
12
}
13
} ;
14
const átomos = cal.atoms ( { clientSecret , aparência } ) ;
15
01
Aumente as conversões do site com agendamento incorporado
Mantenha os utilizadores no seu site e reduza o abandono das reservas. As integrações do Cal.com oferecem uma forma mais rápida e intuitiva de converter visitantes em reuniões.
02
Combine a sua marca com formatos de incorporação personalizáveis
Utilize embeds inline, pop-ups ou botões para se alinhar com o layout e a marca do seu site. Personalize cores e estilos para criar uma experiência contínua.
03
Configuração rápida e controlo total
Gere o seu código de incorporação, cole-o no seu site e fique online. Você controla todo o fluxo de reservas desde o início até a confirmação, sem enviar os utilizadores para fora.
Gerador de snippets de embed dinâmicos
Gere código adaptado à sua configuração do Cal.com, incluindo suporte para equipas, ambientes auto-hospedados e encaminhamento avançado.
Vários formatos de embed
Escolha entre visualizações em linha, botões ou modais, dependendo de como deseja ativar o fluxo de reserva.
Adicionar ou limitar os horários disponíveis
Mostre apenas faixas de tempo específicas em uma incorporação com base no contexto ou no tipo de usuário. Controle a disponibilidade sem alterar as configurações principais do seu evento.
Preencher previamente os campos do formulário de reservas
Utilize parâmetros de consulta para preencher automaticamente o nome, email ou campos personalizados para uma experiência de reserva mais rápida e personalizada.
Acompanhe os parâmetros UTM em incorporações
O Embed captura a origem UTM, o meio, a campanha e outros valores para que possa atribuir reservas aos canais corretos.
Otimizado para dispositivos móveis desde o princípio
Cada embed é responsivo e funciona em diferentes tamanhos de ecrã. Nenhuma configuração adicional é necessária para utilizadores móveis.
O que é o Cal.com embed?
Cal.com Embed permite integrar um widget de agendamento totalmente funcional diretamente no seu website ou aplicação, permitindo que os utilizadores marquem compromissos sem sair do seu site. Pode incorporar o widget como um calendário em linha, um botão flutuante pop-up, um pop-up acionado por um clique num elemento específico, ou um link nos seus e-mails. Esta integração sem interrupções melhora a experiência do utilizador e aumenta as taxas de conversão de reservas, mantendo os visitantes envolvidos na sua página.
Como posso incorporar Cal.com no meu site?
Incorporar o Cal.com no seu site é simples. Primeiro, crie o seu tipo de evento e configure as suas definições e disponibilidade no painel de controle do Cal.com. Depois que o seu evento estiver configurado, vá para o Gerador de Fragmentos de Incorporação no seu painel de controle, selecione o formato de incorporação preferido (em linha, botão flutuante, pop-up ativado por clique, ou incorporação por email), e copie o código gerado. Em seguida, cole o código diretamente no seu HTML, CMS, ou framework frontend. O seu widget de reservas estará ativo e pronto para uso imediatamente, totalmente sincronizado com a sua conta do Cal.com.
Posso acompanhar campanhas de marketing com reservas integradas?
Você pode adicionar manualmente parâmetros de rastreamento UTM às URLs incorporadas. Isso permite que você rastreie a fonte, o meio, a campanha e outros parâmetros-chave quando os usuários interagem com o widget de reserva. Ao passar parâmetros UTM via o link, você pode atribuir reservas a esforços de marketing, campanhas ou fontes de tráfego específicas.
Posso preencher previamente as informações do utilizador no formulário de reserva?
Sim, você pode pré-preencher campos no formulário de reserva usando parâmetros de consulta de URL. Isso significa que você pode preencher automaticamente campos como o nome do usuário, e-mail ou quaisquer campos personalizados que você tenha configurado. Por exemplo, você pode enviar um link de reserva personalizado em um e-mail que já tenha o nome e o e-mail do usuário pré-preenchidos. Isso torna o processo de reserva mais rápido e mais fácil de usar, reduzindo a fricção e melhorando as taxas de conversão. Saiba mais sobre o pré-preenchimento de formulários em nossa documentação.
Quais formatos de embed são suportados?
Cal.com suporta quatro formatos principais de integração para atender a diversas necessidades:
Incorporação Inline: Exiba o calendário diretamente dentro do layout da sua página para uma interação perfeita com o usuário.
Botão Flutuante Pop-up: Adicione um botão persistente que aciona o modal de agendamento sem interromper o layout da página.
Pop-up através de Clique no Elemento: Acione o modal de agendamento a partir de qualquer elemento personalizado, como um botão ou imagem.
Incorporação por Email: Inclua um link de formulário de agendamento pré-preenchido dentro de seus emails para um agendamento fácil e personalizado.
Cada formato é projetado para oferecer flexibilidade na forma como você exibe e interage com o seu sistema de agendamento, dependendo do design do seu website e do fluxo do usuário.
Posso controlar quais horários aparecem em uma incorporação?
Sim, pode personalizar totalmente a interface do utilizador do agendador usando o Cal.com’s booker atom. O booker atom é um componente modular e de código aberto que permite construir e estilizar o seu próprio fluxo de agendamento. Pode ajustar o layout, substituir campos de formulário ou redesenhar completamente a experiência de agendamento para corresponder à aparência e sensação da sua marca. Ao utilizar átomos de agendador individuais como DatePicker, TimeSelector, e ContactForm, pode ter controlo detalhado sobre cada elemento do processo de agendamento. Isto oferece-lhe a flexibilidade de criar uma experiência personalizada e com marca dentro da sua aplicação ou website. Para mais detalhes, visite a nossa documentação do booker atom.
A integração funciona com o Cal.com auto-hospedado?
Sim, o recurso de incorporação funciona tanto com as configurações em nuvem quanto com as autogeridas do Cal.com. Quer esteja a usar a versão hospedada do Cal.com ou a implementá-lo na sua própria infraestrutura, a funcionalidade de incorporação permanece totalmente operacional. A geração de trechos é dinamicamente adaptada com base na sua configuração, e pode configurá-la para funcionar perfeitamente no seu ambiente autogerido.
Incorpore um widget de agendamento online no seu site instantaneamente com Cal.com
Comece a incorporar a agenda no seu site hoje. Sem plugins ou redirecionamentos. Apenas reservas limpas, rápidas e com alta conversão.
