Installation

Adding The Everything Calendar to your website requires two short snippets of HTML and one setting in your Commerce7 dashboard. The whole process takes about five minutes.

For platform-specific instructions, see:

Step 1 — Install the app

Install the The Everything Calendar app from the Commerce7 App Store. This connects your C7 account to the calendar service and gives you access to the settings dashboard.

Step 2 — Find your tenant slug

Your tenant slug is your Commerce7 store identifier. You can find it in your C7 dashboard URL — it’s the part after admin.commerce7.com/.

For example, if your URL is admin.commerce7.com/sunrise-winery, your slug is sunrise-winery.

Step 3 — Add the embed code

Paste these two lines into your website where you’d like the calendar to appear. Replace YOUR_TENANT_SLUG with the slug from step 2.

<link rel="preconnect" href="https://theeverythingcalendar.transom.design">
<script src="https://theeverythingcalendar.transom.design/widget/widget.js" data-tenant="YOUR_TENANT_SLUG" defer></script>
<div id="tec-calendar"></div>

The <link> and <script> tags should go in the <head> of your page. Place <div id="tec-calendar"></div> exactly where you want the calendar to appear on the page.

The defer attribute tells the browser to download the script in the background without blocking the rest of the page from loading. The preconnect hint pre-establishes the connection to the calendar server, shaving time off the first request.

Step 4 — Add your site to Allowed Origins

Open The Everything Calendar app inside your Commerce7 dashboard, go to the Access tab, and add your website’s full URL to the Allowed Origins list.

For example: https://www.sunrise-winery.com

That’s it

Once the embed code is on your page and your URL is in Allowed Origins, the calendar will appear automatically. Head to the Styling & Customization guide to configure colors, fonts, and layout.