Skip to main content

Event Card Widget

The Event Card Embed renders a single event summary card within an iframe. It is scoped to a specific event and presents key metadata such as the event title, date, venue, and primary call-to-action.

This embed is designed for highlighting or promoting a single event within editorial content, landing pages, or partner websites.

Use cases

  • Featured event sections
  • Blog posts or announcement pages
  • Campaign or partner microsites

Key characteristics

  • Single-event scope
  • Compact, card-based layout
  • Links to the full event page on CloudJoi
  • No custom styling or layout overrides

HTML​

<script>
    (function () {
        const iframeUrl = 'https://www.cloudjoi.com/shows/<EVENT_SLUG_HERE>/widget?type=event';
        const iframeId = (Math.random() + 1).toString(36).substring(7);
        document.write('<iframe id="cj-iframe-'+iframeId+'"src="'+iframeUrl+'#'+iframeId+'" style="width: 100%; border: none;"></iframe>')
        window.addEventListener('message', (event) => {
            const eventData = JSON.parse(event.data);
            if(eventData?.context !== "iframe.resize") {
                return;
            }
            const iframeId = (new URL(eventData.src)).hash.replace('#', '');
            if (document.getElementById('cj-iframe-'+iframeId)) {
                document.getElementById('cj-iframe-'+iframeId).style.height = eventData.height;
            }
        })
    })();
</script>

React​

Component​

import React, {useRef, useEffect} from 'react';

export default function CloudJoiEmbed({url}: {url: string}) {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    function onMessage(event: MessageEvent) {
      const data = event?.type === "message" && typeof event?.data === "string" ? JSON.parse(event?.data) : null;
      if (data?.context !== "iframe.resize") return;

      if (iframeRef.current) {
        iframeRef.current.style.height = data.height+'px';
      }
    }

    window.addEventListener("message", onMessage);
    return () => window.removeEventListener("message", onMessage);
  }, []);

  return (
    <iframe
      ref={iframeRef}
      src={url}
      style={{ width: "100%", border: "none" }}
    />
  );
}

Usage​

 <CloudJoiEmbed url="https://www.cloudjoi.com/shows/adventure-taiwan/widget?type=event" />

Sample​