Cal.com
Cal.com is a scheduling platform that allows businesses and individuals to create booking pages where customers can select available times and schedule meetings or appointments.
Key features include:
- Customisable booking pages for meetings and appointments
- Calendar availability management
- Automated meeting scheduling links
- Embeddable booking widgets for websites
- Integration with external calendars and tools
Cal.com integrates with ShopWired by providing embeddable widget code that can be added to your theme or website pages so customers can book appointments directly through your website.
Account creation
Account creation
Create an account on the Cal.com website at Cal.com.
After creating your account you can configure your availability and create one or more event types for customers to book. Once an event type is created, Cal.com provides embed code that can be used to add booking widgets to your website.
Theme installation
Theme installation
To install the Cal.com floating booking button on every page of your website, Cal.com provides an embed code which is added to your theme so the booking button can display across the entire site.
The embed code will be similar to the example shown below.
<!-- Cal floating-popup embed code begins -->
<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 || [];
if(typeof namespace === "string"){
cal.ns[namespace] = cal.ns[namespace] || api;
p(cal.ns[namespace], ar);
} else p(cal, ar);
return;
}
p(cal, ar);
};
})(window, "https://app.cal.com/embed/embed.js", "init");
Cal("init", "30min", {origin:"https://app.cal.com"});
Cal.ns["30min"]("floatingButton", {"calLink":"your-cal-link/30min"});
</script>
<!-- Cal floating-popup embed code ends -->
The code shown above is provided as an example only. You must copy the exact code provided in your own Cal.com account, as the code and any ID values will be unique to your website.
- Navigate to Website > Themes
- Select the
code editoroption for the theme you want to edit - Open the
master.twigfile - Add the embed code just before the closing
</head>tag - Select Save changes
After adding the code, a booking button will appear in the bottom right corner of every page of your website. When a customer selects the button, the booking widget will open so they can schedule a meeting or appointment.
Adding a Cal.com booking widget to website pages
Adding a Cal.com booking widget to website pages
Cal.com also provides embed code that allows you to display a booking calendar directly inside a webpage.
The embed code will be similar to the example below.
<!-- Cal inline embed code begins -->
<div style="width:100%;height:600px;overflow:auto" 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 || [];
if(typeof namespace === "string"){
cal.ns[namespace] = cal.ns[namespace] || api;
p(cal.ns[namespace], ar);
} else p(cal, ar);
return;
}
p(cal, ar);
};
})(window, "https://app.cal.com/embed/embed.js", "init");
Cal("init", "30min", {origin:"https://app.cal.com"});
Cal.ns["30min"]("inline", {
elementOrSelector:"#my-cal-inline",
calLink: "your-cal-link/30min"
});
</script>
<!-- Cal inline embed code ends -->
The code shown above is provided as an example only. You must copy the exact code provided in your own Cal.com account.
- Navigate to Website > Themes
- Select
customise your theme - Select
add a new section - Select the
custom HTMLsection type - Paste the embed code into the Custom HTML setting
- Position the section where you want the calendar to appear on the page
Recommendations
Recommendations
- Use the floating booking button when you want booking access available from every page of your website
- Use inline booking widgets on dedicated booking or contact pages
- Test booking widgets on a draft theme before publishing to your live theme
- Keep a record of the booking widgets installed and the pages where they appear
