Event Timings Widget

The Event Timings Embed displays a structured list of an event’s scheduled showtimes along with their corresponding purchase links and real-time sales status.

Each timing entry reflects its current availability state, including:

• Coming Soon
• On Sale
• Sold Out
• Sales Ended
• Postponed
• Cancelled

This embed is intended for event detail pages where users need to select a specific date or time before purchasing.

Use cases

• Event detail pages on external websites
• Ticket selection flows
• Schedule-driven performances or exhibitions

Key characteristics

• Event-specific timing and session listing
• Real-time sales status indicators
• Direct buy links per session

HTML

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

Sample