Acelere a integração do Calendly

Acelere a integração do Calendly

O Calendly é um incrível software de agendamento de consultas online! O Calendly se integra ao seu calendário de trabalho e permite que outras pessoas agendem compromissos com você diretamente. Muitos dos meus clientes usam o Calendly e ele funciona muito bem!

Última revisão por Arjen Karel em março de 2026

Integrando o Calendly ao seu site

Existem basicamente 3 maneiras de integrar o Calendly ao seu site. Seja via iframe, via um link clicável ou via um botão. O processo é simples, basta clicar no código de incorporação, selecionar o código para copiar e, em seguida, colar esse código no seu site. Pronto, você agora incorporou o Calendly na sua página. Mas nem tudo são flores, porque você também pode ter deixado seu site mais lento.

Como o Calendly está tornando seu Core Web Vitals lento?

Na incorporação inline, o Calendly adiciona um iframe ao seu site. Se feito corretamente, as métricas de pintura (Largest Contentful Paint e First Contentful Paint) não serão muito afetadas pela integração do Calendly como um iframe. O iframe afetará o Interaction to Next Paint levemente, mas para a maioria dos casos de uso, será aceitável.

O "problema" com o Core Web Vitals ocorre quando você adiciona o Calendly por meio de um Widget de popup ou um Texto de popup. O código que é apresentado a você fará com que você adicione uma folha de estilos (https://assets.calendly.com/assets/external/widget.css) e um script (https://assets.calendly.com/assets/external/widget.js) ao seu site.

<!-- Calendly badge widget begin -->
<link
 href="https://assets.calendly.com/assets/external/widget.css"
 rel="stylesheet">
<script
  src="https://assets.calendly.com/assets/external/widget.js"
  type="text/javascript"
  async>
</script>
<a href="#"
   onclick="Calendly.initPopupWidget(
      {url: 'https://calendly.com/corewebvitals/pre-audit-meet'});
   return false;">
   Schedule time with me
</a>
<!-- Calendly badge widget end -->

O resultado é um enorme atraso de 370ms causado pela folha de estilos do Calendly. A auditoria do Calendly feita pelo DebugBear descobriu que o CSS do widget tem 464KB, em grande parte devido a fontes Base64 incorporadas. Isso acontece porque as folhas de estilo no head da página são render blocking por padrão. Isso faz sentido porque, sem os estilos, o navegador não saberá como o HTML final deve ser. É por isso que é tão importante ter folhas de estilo otimizadas ao trabalhar no Core Web Vitals.

O script assíncrono também competirá por recursos iniciais, mas como esse script é assíncrono, o atraso que ele causa é muito menor que o atraso causado pela folha de estilos.

A solução

A solução está em "tornar o Calendly não render-blocking" e, como bônus, "melhorar o timing". Há uma maneira fácil e uma maneira um pouco mais difícil (e melhor) de fazer isso. Vamos começar!

A correção fácil

A maneira mais fácil seria simplesmente tornar a folha de estilos não render-blocking usando o "truque do preload". Basta observar as alterações que fiz no código em negrito. A folha de estilos agora usa preload (e recursos em preload são baixados em paralelo). Então, quando a folha de estilos é carregada, o link de preload é transformado em um link de folha de estilos, o que efetivamente injeta uma folha de estilos que não é render blocking!

<!-- Calendly badge widget begin -->
<link
 href="https://assets.calendly.com/assets/external/widget.css"

>
<script
  src="https://assets.calendly.com/assets/external/widget.js"
  type="text/javascript"
  async>
</script>
<a href="#"
   onclick="Calendly.initPopupWidget(
      {url: 'https://calendly.com/corewebvitals/pre-audit-meet'});
   return false;">
   Schedule time with me
</a>
<!-- Calendly badge widget end -->

A correção melhor

Embora a correção fácil definitivamente melhore suas métricas de pintura, eu ainda não gosto do timing do Calendly. Ninguém na história da internet jamais se incomodou por não conseguirmos agendar uma consulta nos primeiros 100ms de carregamento da página. Eu prefiro priorizar os elementos mais importantes da página, como o elemento LCP e os scripts críticos que, por exemplo, lidam com a interação do menu. Este é o mesmo padrão facade que eu uso para widgets de chat.

Então, vamos pegar esse conhecimento e começar a carregar tanto o script quanto o estilo quando o HTML da página for analisado. Este evento é chamado DOMContentLoaded. Quando este evento é transmitido, usamos esse tempo para carregar o estilo e o script de forma assíncrona. Quando tanto o estilo quanto o script são carregados, criamos um link clicável (na função de callback) que mostra o popup quando esse link é clicado. Legal, né? Para mais técnicas como essa, veja 16 métodos para adiar o carregamento de JavaScript.

O código também usa scheduler.yield() para fazer o yield para a thread principal antes de abrir o popup. Isso mantém a interação responsiva e evita bloquear o navegador enquanto o Calendly é inicializado.

document.addEventListener('DOMContentLoaded', function () {

    var stylesheetPromise = new Promise(function (resolve, reject) {
        var stylesheet = document.createElement('link');
        stylesheet.rel = 'stylesheet';
        stylesheet.href = 'https://assets.calendly.com/assets/external/widget.css';
        stylesheet.onload = resolve;
        stylesheet.onerror = reject;
        document.head.appendChild(stylesheet);
    });

    var scriptPromise = new Promise(function (resolve, reject) {
        var script = document.createElement('script');
        script.src = 'https://assets.calendly.com/assets/external/widget.js';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });

    async function yieldToMainThread() {
        if ('scheduler' in window && 'yield' in window.scheduler) {
          return await window.scheduler.yield();
        }
        return new Promise((resolve) => {
          setTimeout(resolve, 0);
        });
      }

    Promise.all([stylesheetPromise, scriptPromise])
        .then(function () {
            const clickEl = document.getElementById('demo');
            clickEl.innerHTML = '<a>Book a Demo</a>';
            document.getElementById('demo').addEventListener('click', async function () {
                this.innerHTML = 'Loading...';
                await yieldToMainThread();
                Calendly.initPopupWidget({ url: 'https://calendly.com/corewebvitals/pre-audit-meet' }); return false;
            });
        })
        .catch(function (error) {
            console.error('Error loading resources:', error);
        });
});

Demo

Confira a demo aqui clicando no link abaixo (e se você precisar de uma auditoria, sinta-se à vontade para agendar um compromisso)

Book a Demo