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​:​//calendl​y.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.c​om/assets/​external/w​idget.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​:​//calendl​y.com/YOUR​_LINK"
data-resize="true"
style="min-width:320px;height:700px;"></div>

Usar incorporação avançada de JavaScript

Calendly.initInlineWidget({
url: 'https​:​//calendl​y.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_viewed
• calendly.event_type_viewed
• calendly.date_and_time_selected
• calendly.event_scheduled

Exemplo:

function isCalendlyEvent(e) {
return e.origin === "https​:​//calendl​y.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​:​//calendl​y.com/YOUR​_SCHEDULIN​G_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.