Incorporação avançada do Calendly para desenvolvedores
Controle como o Calendly funciona em seu site. Use a incorporação avançada de JavaScript para personalizar como e quando o Calendly aparece. Você pode pré-preencher as informações do convidado, rastrear eventos, ocultar detalhes e muito mais.
Configurar a incorporação com JavaScript
Adicione o Calendly a um elemento específico na sua página:
Calendly.initInlineWidget({url: 'https://calendly.com/YOUR_LINK',parentElement: document.getElementById('calendly-embed')});Configuração necessária:
1. Inclua o script do Calendly em seu HTML:
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>2. Adicione um elemento de contêiner para a incorporação:
<div id="calendly-embed" style="min-width:320px;height:700px;"></div>Inclua o parentElement para controlar onde a incorporação aparece. Sem ele, o Calendly será carregado na parte inferior da sua página da web.
Pré-preencher respostas de agendamento
Saiba mais sobre o pré-preenchimento de respostas de reserva.
Redimensionar automaticamente a incorporação do Calendly
Por padrão, o incorporado tem uma altura fixa. Se o conteúdo for mais longo, ele pode rolar dentro do widget. Você pode ajustar a altura automaticamente.
Use a incorporação padrão
<div class="calendly-inline-widget"data-url="https://calendly.com/YOUR_LINK"data-resize="true"style="min-width:320px;height:700px;"></div>Usar incorporação avançada de JavaScript
Calendly.initInlineWidget({url: 'https://calendly.com/YOUR_LINK',parentElement: document.getElementById('calendly-embed'),resize: true});Importante:
- Use apenas uma incorporação com redimensionamento automático por página para evitar problemas de layout.
- Evite listas suspensas em formulários de agendamento ou encaminhamento ao usar redimensionamento automático.
Ocultar informações de perfil ou o banner de cookies
Saiba como personalizar sua incorporação para ocultar informações de perfil ou o banner de cookies.
Acompanhe ações com postMessage
O Calendly envia eventos quando alguém interage com a incorporação. Você pode monitorar esses para acionar ações ou rastrear comportamentos.
Eventos enviados:
calendly.profile_page_viewedcalendly.event_type_viewedcalendly.date_and_time_selectedcalendly.event_scheduled
Exemplo:
function isCalendlyEvent(e) {return e.origin === "https://calendly.com" && e.data.event?.startsWith("calendly.");}window.addEventListener("message", function(e) {if (isCalendlyEvent(e)) {console.log("Calendly Event:", e.data.event);console.log("Detalhes do evento:", e.data.payload);}});O Calendly usa window.postMessage() para enviar esses eventos para a janela principal.
Use um iframe (método alternativo)
O Calendly é carregado em um iframe por padrão. Se preferir, você pode incorporar o Calendly usando um código iframe direto:
<iframe src="https://calendly.com/YOUR_SCHEDULING_LINK"style="width: 100%; min-width: 320px; height: 700px;" frameborder="0"></iframe>Observação: Iframes não suportam redimensionamento automático ou rastreamento de eventos via postMessage.