Skip to main content

Event Listing Widget

The Event List Embed displays a dynamic listing of events rendered inside an iframe. Events are fetched and filtered based on predefined query parameters.

Currently, filtering is limited to organisation-based filters using the organisation slug. This embed is intended for simple event listings where full customisation or advanced filtering is not required.

Use cases

  • Organisation homepage event listings
  • “What’s On” or events index pages

Key characteristics

  • Organisation-level filtering only
  • No client-side filter controls
  • Styling and layout are fixed

HTML​

<script>
    (function () {
        const iframeUrl = 'https://www.cloudjoi.com/widget?organisations.slug=<ORGANISATION_SLUG_HERE>';
        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/widget?organisations.slug=cloudjoi" />

Sample​