Como criar um botão personalizado para abrir o Calendly

Adicione um botão personalizado que abre o Calendly em uma janela pop-up usando HTML e JavaScript—sem necessidade de iframe. Guia completo de configuração e estilo incluídos.

Antes de começar

Para criar um botão que abre o Calendly em uma janela pop-up, você precisa:

• Inclua o script de incorporação e o CSS do Calendly em sua página
• Adicione um botão ou outro elemento clicável ao seu HTML
• Use uma função onclick em JavaScript para iniciar o agendador

Etapa 1 – Adicionar CSS e JavaScript do Calendly

Adicione o seguinte código ao HTML do seu site, de preferência logo antes da tag de fechamento </head> ou na parte superior do corpo:

<!-- Incorporar script e estilos do Calendly --><link href="https​:​//calendl​y.com/asse​ts/externa​l/widget.c​ss" rel="stylesheet"><script src="https​:​//calendl​y.com/asse​ts/externa​l/widget.j​s" type="text/javascript"></script>

Esses recursos são necessários para que o pop-up funcione.

Etapa 2 – Adicione seu botão

Crie um botão ou link em seu HTML. No atributo onclick, chame a função pop-up do Calendly e inclua seu link de agendamento.

Exemplo:

<button onclick="Calendly.initPopupWidget({ url: 'https​:​//calendl​y.com/YOUR​_SCHEDULIN​G_LINK' }); return false;">  Agendar um horário para se reunir</button>

Substitua YOUR_SCHEDULING_LINK pelo URL completo da sua página de agendamento ou tipo de evento.

Você pode usar qualquer elemento clicável — links, ícones ou divs — desde que inclua a mesma função onclick.

Opcional – Personalizar o comportamento do popup

O pop-up aparece no centro da tela com uma sobreposição. Você também pode passar parâmetros como dados pré-preenchidos do convidado ou tags UTM se estiver usando a incorporação avançada. Na maioria dos casos, o exemplo acima é suficiente.

Estilize seu botão

Você pode estilizar seu botão com CSS. Aqui está um exemplo:

<style>  .calendly-button {    background-color: #0069ff;    cor: branco;    border: none;    padding: 12px 24px;    font-size: 16px;    border-radius: 6px;    cursor: pointer;  }  .calendly-button:hover {    background-color: #0052cc;  }</style><button class="calendly-button" onclick="Calendly.initPopupWidget({ url: 'https​:​//calendl​y.com/YOUR​_SCHEDULIN​G_LINK' }); return false;">  Agende sua consulta</button>

Atualize as cores, espaçamento, fontes e outros estilos para combinar com seu site.

Dicas de solução de problemas

• Certifique-se de que o script do Calendly e o arquivo CSS estejam incluídos
• Certifique-se de que seu botão use return false; para evitar que a página seja atualizada
• Se o pop-up não aparecer, verifique se há erros no console do navegador
• Evite várias chamadas do Calendly.initPopupWidget na mesma página, a menos que seja necessário