Embed Basics

Embedding your calendar on a website takes just one line of HTML.

The embed code

Your embed code is one script tag:

<script src="https://embed.already.events/s/your-view-slug.js"></script>

Paste it where the calendar should appear. The script adds the calendar to the page, matches your site's colors and font (see Matching your site), and makes the calendar taller when its content needs more room.

You can get this code from the Embed page for any view in the dashboard. It comes pre-configured with your chosen theme and settings.

The iframe alternative

If you want fixed sizing, or you want the calendar to keep its own background, use an iframe instead:

<iframe
  src="https://embed.already.events/v/your-view-slug"
  style="width: 100%; height: 600px; border: none; color-scheme: light;"
  allow="web-share; clipboard-write"
  title="Event Calendar"
></iframe>

Keep color-scheme: light in the style. Without it, a browser can paint an opaque box behind the calendar when your site uses a dark color scheme. This is confirmed in Chrome; behavior in Safari and Firefox is unverified.

Where it works

The embed code works on any platform that supports custom HTML:

• WordPress — Custom HTML block
• Squarespace — Code block
• Wix — HTML embed component
• Webflow — Embed element
• Static HTML sites — paste directly into your page
• React, Vue, etc. — use the iframe in a component

Sizing tips

• Script tag: set data-width (default 100%) and data-height (default 600px) on the tag for the initial size, for example <script src="..." data-height="800px"></script>. The calendar grows past that height when its content gets taller, so you do not need to guess. It never shrinks below the initial height.
• iframe width: 100% makes the calendar fill its container. You can wrap it in a <div> with a max-width if you want to constrain it.
• iframe height: 600px is a good starting point. Month view benefits from more height (700 to 800px). List view works well at 500px. The calendar scrolls internally.
• The calendar is fully responsive. It adapts to the available width automatically, switching to mobile-friendly layouts below 768px.

Matching your site

The script tag embed matches the page it is on. When the page loads, the script reads the styles around it: the text color, the color of the first visible link, the background, the font family and size, and whether the page reads as light or dark. The calendar then draws on your page's background with no box of its own, uses your text color and your link color as its accent, follows your light or dark scheme, and uses your font. Its cards, its month, week and day views, its event detail view, its view tabs and its subscribe menu are painted solid, in a faint tint of your text color over your background, so they stay readable where your page puts a photo or a gradient behind the calendar; the page still shows between them. Over a photo, a gradient, or a background the script cannot read, that solid color is near-white or near-black, whichever your text reads on. A page background that is itself translucent leaves the panels as the faint tint, since no single solid color matches it. The calendar's header, its filter and past-events controls, and its "no events" message are not painted, so they sit on your page in your text color; and a past event's card is shown at half opacity, so your page shows through it. If your site loads its font from Google Fonts or Bunny Fonts, with a stylesheet <link> or with an @font-face rule, the calendar loads the same one. A font served from anywhere else falls back to the next font in your stack.

Matching applies only while the view has no palette, color, font, font weight or shadow value saved. Choosing any of them in the dashboard turns matching off and the calendar uses exactly the theme you set. A view that has never saved a palette, color or font has no custom theme, so it matches its host site with nothing to change in the dashboard. Layout and size settings work either way.

A page whose text color is in a modern color space such as oklch() does not match, because the script reads colors only in rgb() and rgba() form. When the calendar sits on a photo, a gradient, or a background color the script cannot read, its header and view tabs do not stick while the calendar scrolls, because no single color can sit over that background unnoticed. The same holds on a dark page that paints no background color of its own, because the script cannot read the browser's dark default, and on a page whose background behind the calendar is too close to its text color to be the one the text sits on, which usually means the page paints its background on a separate layer. Setting data-sticky to true or false on the script tag overrides this.

The iframe embed cannot read your page, so it keeps the calendar's own background. To make an iframe embed blend in, set a theme; see Making the calendar match your site.

Allowed domains

A view lists the sites allowed to embed it. The first site that embeds a view is added to the list automatically. After that, the calendar does not load on any other site until you add it. To embed the same view on a second site, open the view in the dashboard and add the site under Embedding, in the Embed domains setting. Enter a domain such as example.com, or *.example.com to allow its subdomains. The wildcard does not match example.com itself, so add both when you need both. A view can list up to 20 domains.