![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 1.882 24 C 0.843 24 0 23.157 0 22.118 L 0 1.882 C 0 0.843 0.843 0 1.882 0 L 22.118 0 C 23.157 0 24 0.843 24 1.882 L 24 22.118 C 24 23.157 23.157 24 22.118 24 Z M 7.892 15.992 C 5.674 15.992 4 14.264 4 12.132 C 4 9.988 5.589 8.25 7.892 8.25 C 9.107 8.25 9.951 8.624 10.623 9.423 L 9.566 10.34 C 9.118 9.871 8.564 9.636 7.892 9.636 C 6.452 9.636 5.547 10.767 5.547 12.132 C 5.547 13.496 6.452 14.606 7.924 14.606 C 8.649 14.606 9.193 14.361 9.63 13.88 L 10.718 14.808 C 10.153 15.49 9.193 15.992 7.892 15.992 Z M 13.24 15.922 C 11.715 15.922 10.5 14.632 10.5 13.032 C 10.5 11.433 11.715 10.122 13.24 10.122 C 14.2 10.122 14.701 10.516 15 11.113 L 15 10.239 L 16.428 10.239 L 16.428 15.784 L 15.031 15.784 L 15.031 14.877 C 14.733 15.507 14.231 15.922 13.24 15.922 Z M 11.939 13.023 C 11.939 13.865 12.557 14.622 13.475 14.622 C 14.424 14.622 15.031 13.897 15.031 13.033 C 15.031 12.169 14.424 11.423 13.475 11.423 C 12.557 11.423 11.939 12.159 11.939 13.022 Z M 17.284 15.784 L 17.284 8 L 18.724 8 L 18.724 15.784 L 17.284 15.784 Z" fill="transparent" height="24px" id="ZMViDDkUi" width="24px"><path d="M 1.882 24 C 0.843 24 0 23.157 0 22.118 L 0 1.882 C 0 0.843 0.843 0 1.882 0 L 22.118 0 C 23.157 0 24 0.843 24 1.882 L 24 22.118 C 24 23.157 23.157 24 22.118 24 Z" fill="rgb(36, 36, 36)" height="24px" id="WCm44spAV" width="24px"/><path d="M 3.892 7.742 C 1.674 7.742 0 6.014 0 3.882 C 0 1.738 1.589 0 3.892 0 C 5.107 0 5.951 0.374 6.623 1.173 L 5.566 2.09 C 5.118 1.621 4.564 1.386 3.892 1.386 C 2.452 1.386 1.547 2.517 1.547 3.882 C 1.547 5.246 2.452 6.356 3.924 6.356 C 4.649 6.356 5.193 6.111 5.63 5.63 L 6.718 6.558 C 6.153 7.24 5.193 7.742 3.892 7.742 Z" fill="rgb(255, 255, 255)" height="7.741500000000002px" id="XEPpGD7l5" transform="translate(4 8.25)" width="6.717999999999989px"/><path d="M 2.74 7.922 C 1.215 7.922 0 6.632 0 5.032 C 0 3.433 1.215 2.122 2.74 2.122 C 3.7 2.122 4.201 2.516 4.5 3.113 L 4.5 2.239 L 5.928 2.239 L 5.928 7.784 L 4.531 7.784 L 4.531 6.877 C 4.233 7.507 3.731 7.922 2.74 7.922 Z M 1.439 5.023 C 1.439 5.865 2.057 6.622 2.975 6.622 C 3.924 6.622 4.531 5.897 4.531 5.033 C 4.531 4.169 3.924 3.423 2.975 3.423 C 2.057 3.423 1.439 4.159 1.439 5.022 Z M 6.784 7.784 L 6.784 0 L 8.224 0 L 8.224 7.784 L 6.784 7.784 Z" fill="rgb(255, 255, 255)" height="7.9224997406005855px" id="lGDJupIUR" transform="translate(10.5 8)" width="8.223500194549558px"/></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.
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.
