React / Next.js recipe

Load Eventyvo embeds from a React or Next.js app.

Client component

Embeds need the DOM and a script tag — use a client component:

"use client";

import { useEffect } from "react";

export function EventyvoEventCard({ slug }: { slug: string }) {
  useEffect(() => {
    const id = "eventyvo-embed-js";
    if (!document.getElementById(id)) {
      const s = document.createElement("script");
      s.id = id;
      s.async = true;
      s.src = "https://docs.eventyvo.com/embed/v1/eventyvo-embed.js";
      document.body.appendChild(s);
    }
  }, []);

  return (
    <div
      data-eventyvo="event-card"
      data-event-slug={slug}
      data-theme="light"
    />
  );
}

Remounting: if the slug changes client-side, clear and remount the node or reload the page so the loader re-runs. The stock loader mounts once on DOMContentLoaded.

iframe alternative (no script)

export function EventyvoAgendaIframe({ slug }: { slug: string }) {
  return (
    <iframe
      src={`https://docs.eventyvo.com/embed/agenda/${encodeURIComponent(slug)}?theme=light`}
      style={{ width: "100%", height: 480, border: 0 }}
      loading="lazy"
      title="Agenda"
    />
  );
}

Server Connect calls

Call https://api.eventyvo.com only from Route Handlers / Server Actions / your API, with X-API-KEY from env. Never pass the key to the browser.