Cal.com vanilla javascript embed doesn't work with Svelte

Question

I want to embed cal.com on a website build with SvelteKit, but I can't make it work with vanilla javascript instruction from the official documentation.

I followed official documentation for vanilla javascript. I've tried version for Next.js, and It worked flawless, but for some reason I can't make it done in svelte.

Last line Cal("init") throws error "Cannot find name 'Cal'." And on a server I'm getting "500 Internal Error"

<script>
  (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://cal.com/embed.js", "init");
    Cal("init")
  </script>

Answer 1

So I figured it out by myself, that I was trying to paste this script in +page.svelte file. To make it work You need to put it in the head tag in the app.html file.