Versnel Calendly integratie

Versnel Calendly integratie

Calendly is geweldige software voor online afspraken plannen! Calendly integreert met je werkagenda en laat anderen direct afspraken met je inplannen. Veel van mijn klanten gebruiken Calendly en het werkt behoorlijk goed!

Laatst beoordeeld door Arjen Karel in maart 2026

Calendly integreren met je website

Er zijn in principe 3 manieren om Calendly in je website te integreren. Of via een iframe, via een klikbare link of via een knop. Het proces is eenvoudig: klik op de insluitcode, selecteer de code om te kopiëren en plak deze vervolgens in je website. Klaar, je hebt nu Calendly op je pagina ingesloten. Maar het is niet allemaal rozengeur en maneschijn, want je hebt mogelijk ook je website vertraagd.

Hoe vertraagt Calendly je Core Web Vitals?

Bij een inline insluiting voegt Calendly een iframe toe aan je site. Als dit correct wordt gedaan, zullen de paint metrics (Largest Contentful Paint en First Contentful Paint) niet al te veel beïnvloed worden door Calendly als een iframe in te sluiten. Het iframe zal de Interaction to Next Paint enigszins beïnvloeden, maar voor de meeste use cases zal dit acceptabel zijn.

Het "probleem" met de Core Web Vitals treedt op wanneer je Calendly toevoegt via een Popup widget of een Popup text. De code die aan je wordt gepresenteerd, laat je een stylesheet (https://assets.calendly.com/assets/external/widget.css) en een script (https://assets.calendly.com/assets/external/widget.js) toevoegen aan je 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 -->

Het resultaat is een aanzienlijke vertraging van 370ms, veroorzaakt door het Calendly stylesheet. DebugBear's audit van Calendly onthulde dat de widget CSS 464KB groot is, grotendeels door ingesloten Base64 fonts. Dit gebeurt omdat stylesheets in de head van de pagina standaard render-blocking zijn. Dat is logisch, want zonder de stijlen weet de browser niet hoe de uiteindelijke HTML eruit moet zien. Daarom is het zo belangrijk om geoptimaliseerde stylesheets te hebben wanneer je aan de Core Web Vitals werkt.

Het async script zal ook concurreren om vroege resources, maar aangezien dat script asynchroon is, is de vertraging die het veroorzaakt veel kleiner dan de vertraging veroorzaakt door het stylesheet.

De oplossing

De oplossing ligt in het "non-render-blocking maken van Calendly" en als bonus "de timing verbeteren". Er is een makkelijke en een iets moeilijkere (en betere) manier om dit te doen. Laten we beginnen!

De makkelijke oplossing

De makkelijkste manier zou zijn om het stylesheet simpelweg non-render-blocking te maken door middel van de "preload truc". Kijk maar naar de wijzigingen die ik heb aangebracht in de code in het vet. Het stylesheet wordt nu gepreload (en gepreloade resources worden parallel gedownload). Wanneer het stylesheet is geladen, wordt de preload link getransformeerd in een stylesheet link, wat effectief een stylesheet injecteert die niet render-blocking is!

<!-- 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 -->

De betere oplossing

Hoewel de makkelijke oplossing je paint metrics zeker zal verbeteren, vind ik de Calendly timing nog steeds niet ideaal. Niemand in de geschiedenis van het internet heeft zich er ooit aan geërgerd dat we niet binnen de eerste 100ms van pageload een afspraak konden plannen. Ik geef er de voorkeur aan prioriteit te geven aan de belangrijkere elementen van de pagina, zoals het LCP element en kritieke scripts die bijvoorbeeld menu-interactie afhandelen. Dit is hetzelfde facade patroon dat ik gebruik voor chat widgets.

Dus laten we die kennis gebruiken en beginnen met het laden van zowel het script als de style wanneer de pagina HTML is geparseerd. Dit event heet DOMContentLoaded. Wanneer dit event wordt uitgezonden, gebruiken we dat moment om de style en het script asynchroon te laden. Wanneer zowel de style als het script zijn geladen, creëren we een klikbare link (in de callback functie) die de popup toont wanneer op die link wordt geklikt. Cool toch? Voor meer van dit soort technieken, zie 16 methods to defer JavaScript.

De code gebruikt ook scheduler.yield() om te yielden naar de main thread voordat de popup wordt geopend. Dit houdt de interactie responsief en voorkomt het blokkeren van de browser terwijl Calendly initialiseert.

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

Bekijk de demo hier door op de onderstaande link te klikken (en mocht je een audit nodig hebben, maak dan gerust een afspraak)

Book a Demo