Skip to content

Home

Jump to bottom
Martin Cleaver edited this page Mar 10, 2026 · 10 revisions

Livestream Page Architecture and Operations

Overview

This repository hosts the Agentics livestream landing page.

The page allows visitors to:

  • watch the livestream directly on the site
  • open the stream on YouTube
  • join a meeting (Zoom / Meet) when applicable
  • access the Agentics site and admin tools

TL;DR:

  • Run Zoom, get the meeting link, broadcast to YouTube, get the stream ID, add both to config.js
  • Commit to github pages
  • Get people to look at livestream.agentics.org

Video-person Workflow

  1. Start the Zoom

Add the meeting link to config.js 

const MEETING_URL = "https://zoom.us/j/...";

Operator Workflow

For a livestream event:

1. Create the YouTube livestream

In Zoom, use Live on YouTube image DO NOT USER agent - use your ID, one that has permissions on The Agentics Foundation brand account image 4. Pick the brand account image

  1. Decide
image

Note: You cannot use agent user image

2. Copy the video ID

Example livestream URL:

https://youtube.com/watch?v=abc123XYZ

Video ID:

abc123XYZ

3. Update config.js

Change:

const VIDEO_ID_DEFAULT = "abc123XYZ";

5. Commit and push

The livestream page will immediately update.

System Architecture

The livestream page is built around three layers.

1. Page logic

File:

index.html

This file contains:

  • layout and styling
  • YouTube embed logic
  • meeting button logic
  • brand asset loading
  • URL override handling

This file should rarely need to change.

2. Configuration layer

File:

config.js

This file contains the editable operational settings.

Example:

const BRAND_BASE_URL = "/brand";

const VIDEO_ID_DEFAULT = "jfKfPfyJRdk";

const MEETING_URL = "https://us06web.zoom.us/j/83802209294?...";

const YOUTUBE_CHANNEL_ID = "UCq_8ihSPx2E2elW6Vyx2cdg";

Operators change event settings here.

3. Brand assets

Directory:

/brand

Contains:

agentics-brand.css
favicon.ico

These files define:

  • theme colors
  • typography
  • shared UI components (agentics-card, agentics-pill, etc.)

Currently they are hosted on the livestream site, but the system is designed so they can later move to:

https://agentics.org/brand

without changing the page code.

Video Selection Logic

The page chooses the livestream using the following priority:

1. URL parameter override
2. URL hash override
3. VIDEO_ID_DEFAULT from config.js

URL parameter override

Example:

https://livestream.agentics.org?v=VIDEO_ID

Hash override

Example:

https://livestream.agentics.org#VIDEO_ID

Default video

If no override exists, the page embeds:

VIDEO_ID_DEFAULT

Why Video ID is Used Instead of Channel Livestream

YouTube supports embedding a channel's current livestream:

youtube.com/embed/live_stream?channel=CHANNEL_ID

However this approach has drawbacks.

Channel livestream limitations

  • requires the stream to be Public
  • sometimes lags before appearing
  • fails with Unlisted streams
  • unreliable before the stream starts

Because of these issues, this system embeds a specific video ID instead.

youtube.com/embed/VIDEO_ID

Advantages:

  • works with Unlisted streams
  • works before broadcast begins
  • predictable behaviour

Operators simply update the video ID per event.

Meeting Button Behaviour

The page supports Zoom or Meet sessions.

Controlled by:

MEETING_URL

If MEETING_URL is set

Button displays:

Join Meeting

and links directly to the meeting.

If MEETING_URL is empty

Button displays:

View Calendar

and links to:

https://agentics.org/community/calendar

This ensures the button is always useful.

Branding System

The page styling depends on:

agentics-brand.css

This provides variables such as:

--agentics-bg
--agentics-text
--agentics-accent
--agentics-muted
--agentics-shadow

and reusable components:

.agentics-card
.agentics-pill
.agentics-pill-accent

Keeping this in a separate file allows consistent styling across:

agentics.org
livestream.agentics.org
future microsites

Temporary Hosting Note

Brand assets are currently served from:

/brand

Later they may move to:

https://agentics.org/brand

When that happens, update only:

BRAND_BASE_URL

in config.js.

No other code changes are required.

Admin Interface (Future)

A planned improvement is an /admin page allowing operators to:

  • change the livestream video
  • set meeting links
  • update branding location

without editing code.

This could store settings using:

localStorage

or a shared configuration service.

Tips and Best Practices

Use Unlisted streams during setup

Create the livestream as Unlisted while testing.

Switch to Public when ready to go live.

Test the embed directly

If a video does not appear on the page, test:

https://www.youtube.com/embed/VIDEO_ID

If that fails, the issue is in YouTube settings.

Ensure embedding is allowed

For livestreams verify:

Allow embedding

is enabled in YouTube Studio.

Use URL override for quick tests

Instead of editing config.js:

https://livestream.agentics.org?v=VIDEO_ID

Repository Structure

livestream-pages
│
├── index.html
├── config.js
│
├── brand
│   ├── agentics-brand.css
│   └── favicon.ico
│
└── admin (future)

Future Improvements

Possible upgrades:

  • automatic detection of active livestream
  • shared configuration API
  • admin UI for operators
  • livestream "starting soon" screen
  • multiple simultaneous streams

Maintainers

Agentics Foundation

https://agentics.org/

Clone this wiki locally