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://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" 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://calendly.com/YOUR_SCHEDULING_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://calendly.com/YOUR_SCHEDULING_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