Skip to content
Transom Transom C7 Calendar

Installation — Standard HTML

Use this guide if your site is built with plain HTML files, or if you have direct access to edit the HTML of your pages.

Step 1 — Get your embed code

Follow steps 1–2 of the general installation guide to install the app and find your tenant slug.

Step 2 — Add the code to your page

Open the HTML file for the page where you want the calendar to appear. Add the script tag and the div:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="preconnect" href="https://theeverythingcalendar.transom.design">
  <script src="https://theeverythingcalendar.transom.design/widget/widget.js" data-tenant="YOUR_TENANT_SLUG" defer></script>
</head>
<body>


  <!-- Place this div wherever you want the calendar to appear -->
  <div id="tec-calendar"></div>


</body>
</html>

Replace YOUR_TENANT_SLUG with your Commerce7 tenant slug.

Step 3 — Add your site to Allowed Origins

In The Everything Calendar app in your Commerce7 dashboard, go to the Access tab and add your site’s URL to the Allowed Origins list (e.g. https://www.yourwinery.com).

Done

Save the file and open the page in a browser. The calendar will render inside the <div id="tec-calendar"> element.