DropInAddOns - Events Widget

A lightweight, embeddable events list for any site or GHL page. No dependencies.

Quick Start

1. Paste this snippet where you want the list to appear:

<script defer src="https://app.dropinaddons.com/widgets/events.js?v=1.1.1">
</script>
<events-widget
  site-key="REPLACE_WITH_YOUR_SITE_KEY"
  title="Upcoming Events"
  limit="5"
  theme="auto">
</events-widget>

2. Don’t have a site key yet? Register here

We’ll show it on the next screen and email it to you.

Widget Attributes

Attribute	Type	Default	Notes
`site-key`	string (required)	—	Unique key for your site.
`title`	string	“Upcoming Events”	Heading above the list (hidden if hide-header present).
`limit`	number	5	Max number of events to render.
`theme`	string	`auto`	`auto` \| `light` \| `dark`.
`hide-header`	boolean	false	Set to `true` to hide the header.

Styling & font

The widget exposes a font variable so it can match your brand:

<script defer src="https://app.dropinaddons.com/widgets/events.js?v=1.1.1">
</script>
<events-widget
  site-key="REPLACE_WITH_YOUR_SITE_KEY"
  style="--dia-font-family: 'Inter', ui-sans-serif, system-ui"
  title="Upcoming Events"
  limit="5"
  theme="auto">
</events-widget>

The modal uses the same font—no extra CSS needed.

Features

Clean list with keyboard support (Enter/Space to open, Esc to close).
Event details in a modal.
One-click “Add to Calendar”: Google, Outlook, Apple, plus .ics download.
Graceful empty/error states.

Timezones & dates (important)

Event times are formatted in the viewer’s local timezone.
If your backend sometimes sends date-only values (e.g., YYYY-MM-DD), the widget treats them as all-day UTC to avoid off-by-one weekday issues.
For precise times, send ISO 8601 timestamps with an explicit offset (e.g., 2025-09-30T09:30:00-05:00) or Z.

Hosting / CDN Tips

Serve events.js with Cache-Control: public, max-age=31536000, immutable.
Pin version in docs: ?v=1.1.1 (update on release).
API endpoints respond with no-store to avoid stale data.

Troubleshooting

"We couldn't load events right now."

Confirm your site-key.
Ensure the page can fetch https://app.dropinaddons.com.
Check browser console for network/CORS errors.

Nothing renders?

Make sure the custom element tag is closed properly:
<events-widget site-key="..." limit="5"></events-widget>
Check for ad/script blockers that may be intercepting fetch.

Sample Empty State

If there are no upcoming events, the widget renders a friendly “No upcoming events” placeholder.

Accessibility

Modal has focus trapping; buttons have accessible labels; color contrast meets WCAG AA in default themes.