Installation — Squarespace

There are two ways to add The Everything Calendar to a Squarespace site. Use the Code Block method if you want the calendar on a specific page. Use the Code Injection method if you want the script loaded across your whole site.

---

Before you start

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

Squarespace plan requirement

Custom code requires a Business plan or higher. Personal plans do not support code injection or code blocks.

---

Method 1 — Code Block (recommended)

This is the simplest approach and keeps the embed scoped to one page.

1. In Squarespace, open the Pages panel and navigate to the page where you want the calendar
2. Click Edit to enter the page editor
3. Click the + button to add a new content block and select Code
4. Paste the following into the code block:

<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>

5. Replace YOUR_TENANT_SLUG with your Commerce7 tenant slug
6. Click Apply, then Save

Tip

If you don’t see a Code block option, check that your Squarespace plan supports custom code. The block may also be listed under More in the block picker.

---

Method 2 — Code Injection (site-wide)

Use this method if you plan to embed the calendar on multiple pages, or if you prefer to manage the script tag from one place.

1. In the Squarespace dashboard, go to Settings → Advanced → Code Injection
2. Paste the script tag into the Footer field:

<script src="https://theeverythingcalendar.transom.design/widget/widget.js" data-tenant="YOUR_TENANT_SLUG" defer></script>

3. Click Save
4. On each page where you want the calendar to appear, add a Code block containing just:

<div id="tec-calendar"></div>

---

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 Squarespace site’s URL to the Allowed Origins list (e.g. https://www.yourwinery.com).

---

Troubleshooting

The calendar isn’t showing up

• Make sure <div id="tec-calendar"></div> is on the page — the script needs this element to render into
• Check that your site URL is in Allowed Origins
• Open your browser’s developer console (F12) and look for any error messages

I see a “HTML is not allowed” message This appears when your Squarespace plan doesn’t support custom code. Upgrade to a Business plan or higher to enable code blocks and code injection.

The code block shows raw HTML instead of the calendar Make sure the block is set to HTML mode, not Display Source. Click the pencil icon on the block and toggle the mode if needed.