Using Embed with a Self Hosted Instance

You can use the React(npm package) and Vanilla JS embeds to show Self Hosted instance's cal links as well.

React - Inline

import Cal from "@calcom/embed-react";

const MyComponent = () => (
  <Cal
    calOrigin="https://your-cal-instance"
    // Need to specify this because React SDK loads the embed snippet itself and it needs to know where to load the snippet from
    embedJsUrl="https://your-cal-instance/embed/embed.js"
    calLink="john"
  />
);

Vanilla JS

<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", {
  origin: 'https://your-cal-instance'
});
</script>

After the code is installed on the page you can use any display types as explained in setup page