Add a live events calendar to your website so visitors can browse and register for your upcoming collection events. The calendar is hosted by Circular.eco and embedded on your site using a standard HTML iframe.

Quick Start

Copy and paste this code into your website’s HTML, replacing YOUR_CUSTOMER_ID with your organization’s Customer ID:

<iframe
  src="<https://calendar.circular.eco/?customer_id=YOUR_CUSTOMER_ID>"
  width="100%"
  height="800"
  frameborder="0"
  title="Upcoming collection events"
  style="border: none; max-width: 100%;"
  loading="lazy">
</iframe>

That’s it — your calendar will display all active collection events for your organization, sorted by date.

Getting Your Customer ID

Your Customer ID is assigned when your Circular.eco account is created. To find it:

  1. Log in to your Circular.eco Admin Dashboard
  2. Contact your Circular.eco account representative if you don’t have it on hand

Coming soon: The Customer ID and a ready-to-copy embed code will be available directly in your Admin Dashboard under Account Settings.

Configuration Options

URL Parameters

Parameter Required Description
customer_id Yes Your organization’s unique identifier. Determines which events are displayed.

Iframe Attributes

These are standard HTML iframe attributes — adjust them to fit your page layout:

Attribute Recommended Value Description
width 100% Width of the calendar. Use 100% for responsive layouts or a fixed pixel value (e.g., 800).
height 600 – 900 Height in pixels. 800 works well for most layouts. Taller values reduce scrolling within the iframe.
title "Upcoming collection events" Accessibility label for screen readers.
loading lazy Defers loading until the iframe is near the viewport, improving page speed.
style border: none; Removes the default iframe border.