You can use the React(npm package) and Vanilla JS embeds to show Self Hosted instance's cal links as well.
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"
/>
);
<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
Was this page helpful?