CODEWITHSUNDEEP
javascriptsvelte
acerblaze
acerblaze

Reputation: 21

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

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>

Upvotes: 0

Views: 474

Answers (2)

SkipDead
SkipDead

Reputation: 1

Kind of late but you will unecessarly load the app.html for nothing. If you want to keep that code into a specific component, put it inside the onMount function.

Then, svelte/ sveltekit may tell you exactly the error you have seen because of the lint. Just use // @ts-nocheck and it will work.Mine just worked perfectly by doing that.

Upvotes: 0

acerblaze
acerblaze

Reputation: 21

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.

Upvotes: 0

Related Questions