Embedding Cal.com instead of Calendly - instructions

App Development Integrations
1

Hi all,

I want to use Cal.com instead of Calendly for scheduling meetings. The Cal.com website has extensive background information about embedding though HTML and/or Javascript…
For some reason, i can’t get it to work, so I was hoping someone could help me fixing this issue…
I used the same workflow as for Calendly, which is:

Calendly setup

  1. Add custom code in the footer <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
  2. Add code to the Javascript tab of the page:
TB.render('component_61', function(data) {
    Calendly.initInlineWidget({
     url: 'https://calendly.com/name/name?hide_event_type_details=1&hide_gdpr_banner=1',
     parentElement: document.getElementById('calendlydiv'),
      prefill: {
            email: "UserEmail"
        },  
     utm: {}
    });
});
  1. Add a HTML element on the page containing the Div ID
    <div id="calendlydiv" class="calendly-inline-widget" style="min-width: 500px; height: 900px;" data-auto-load="false">&nbsp;</div>

Copy this an change it to Cal.com

Now I want to add the Cal.com setup (through instructions here):

  1. Add custom code They provided 2, so I add both in the header through Setting :
<script>
  Cal("ui", { styles });
</script>

and

<script>
  Cal("preload", { calLink });
</script>
  1. Add the HTML code, through inline :slight_smile:
<!-- Cal inline embed code begins -->
<div style="width:100%;height:100%;overflow:scroll" id="my-cal-inline"></div>
<script type="text/javascript">
  (function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar); return; } p(cal, ar); }; })(window, "https://app.cal.com/embed/embed.js", "init");
Cal("init",  {origin:"https://cal.com"});

  Cal("inline", {
	elementOrSelector:"#my-cal-inline",
	calLink: "roomname/15min",
	layout: "month_view"
  });

  Cal("ui", {"styles":{"branding":{"brandColor":"#000000"}},"hideEventTypeDetails":false,"layout":"month_view"});
  </script>
  <!-- Cal inline embed code ends -->

3… add the ID to the javascript tab, similar to the Calendly setup

TB.render('component3', function(data) {
    Calendly.initInlineWidget({
     url: 'https://cal.com/username/15min',
     parentElement: document.getElementById('my-cal-inline'),
      prefill: {
            quickscanid: "Quickscanid",
            email: "UserEmail"
        },  
     utm: {}
    });
});
  1. Add the HTML field:

<div id="my-cal-inline" class="my-cal-inline" style="min-width: 500px; height: 900px;" data-auto-load="false">&nbsp;</div>

Anyone can see what I am missing here?