EmbedACal
← Back to docs

Embed guide

Add a live calendar to any website in under 60 seconds.

Quick start

Paste the embed snippet from your dashboard into your HTML where you want the calendar to appear. You can find the snippet under Feeds → Widget → Get embed code.

HTML
<script src="https://embedacal.com/widget/v2/embedacal.js" defer></script>
<embedacal-widget feed-id="ks78qwyw..."></embedacal-widget>

The feed-id is automatically set in the snippet from your dashboard. Theme, default view, and events per page are all configured in the widget settings panel — no need to set them in the HTML.

Embed modes

Single feed

Display events from one calendar feed (this is the default when you copy the embed code):

HTML
<embedacal-widget feed-id="ks78qwyw..."></embedacal-widget>

All feeds (combined)

Show events from all your feeds merged together:

HTML
<embedacal-widget org="my-org"></embedacal-widget>

Custom feed (Pro)

Display a filtered subset of events:

HTML
<embedacal-widget org="my-org" custom="downtown-events"></embedacal-widget>

React

JSX
// Add the script tag to your _app.tsx or layout
<Script src="https://embedacal.com/widget/v2/embedacal.js" strategy="lazyOnload" />

// Use the web component anywhere
<embedacal-widget feed-id="ks78qwyw..." />

// TypeScript: declare the custom element
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'embedacal-widget': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
          'feed-id'?: string;
          org?: string;
          custom?: string;
          'base-url'?: string;
        },
        HTMLElement
      >;
    }
  }
}

WordPress

Add a Custom HTML block to any page or post:

HTML
<script src="https://embedacal.com/widget/v2/embedacal.js" defer></script>
<embedacal-widget feed-id="ks78qwyw..."></embedacal-widget>

Attributes

AttributeTypeDescription
feed-idstringFeed ID for single-feed mode (from your dashboard)
orgstringOrg slug for combined or custom feed mode
customstringCustom feed slug (requires org)
base-urlstringAPI base URL (auto-detected from script src)
disable-stylesbooleanStrip all default CSS for full custom styling

Note: Theme, default view, and events per page are configured in the dashboard widget settings and no longer need to be set as HTML attributes.