Volunteer Calendar Embed

Volunteer Calendar Embed

Overview

Organizations can embed their public volunteer calendar on external websites with an iframe hosted from https://volunteer.alignmint.app.

The embed renderer is separate from the full public volunteer calendar page:

• src/features/volunteers/components/public/PublicVolunteerCalendarEmbed.tsx
• src/features/volunteers/components/public/PublicVolunteerLoader.tsx
• src/lib/volunteerPublicUrls.ts
• src/lib/embedThemeOptions.ts

URL Format

https://volunteer.alignmint.app/volunteer/{org-key-or-prefix}/{org-slug}?embed=true

Example:

https://volunteer.alignmint.app/volunteer/abc123/hope-center?embed=true

Generated Embed Code

The Volunteer Scheduler "Share Calendar" dialog generates an iframe like:

<iframe
  src="https://volunteer.alignmint.app/volunteer/abc123/hope-center?embed=true"
  width="100%"
  height="900"
  frameborder="0"
  scrolling="no"
  style="border: none; max-width: 720px; overflow: hidden;"
  title="Volunteer calendar for Hope Center"
></iframe>

It also includes a postMessage resize script that listens for:

alignmint-volunteer-calendar-resize

Theme Options

All color values are hex codes without the leading #.

• primary — button and accent color
• bg — page background color
• fg — text color
• cardBg — card surface color
• btnText — button text color
• maxWidth — max card width in pixels
• logoSize — sm, md, or lg

Example:

https://volunteer.alignmint.app/volunteer/abc123/hope-center?embed=true&primary=0066cc&bg=f5f5f5&fg=333333&maxWidth=800&logoSize=lg

Behavior

• The embed hides the standalone page footer and route chrome.
• The embed supports search and category filtering inside the iframe.
• Event cards link to the public volunteer event page and preserve embed=true.
• The iframe posts its height to the parent window whenever the content changes.

Security Notes

• vercel.json explicitly allows framing for the volunteer.alignmint.app host.
• index.html frame-busting allows /volunteer/* routes only when ?embed=true is present.
• All other app routes remain protected by X-Frame-Options: DENY and frame-ancestors 'self'.

Synced from IFMmvp-Frontend documentation: pages/people/11-VOLUNTEER-CALENDAR-EMBED.md