Where do I find the event id?

Open the event on R3dLabs, choose Admin, then View URLs. The Website embed snippet there already has the id filled in. The id is the long code with dashes, not the event's short link.

Should I use an event id or team-next?

Use the id on a page about one night, such as an announcement post. Use team-next on a page that should always be current, such as your home page. team-next shows a live event first, then the next listed upcoming one.

What happens after a pinned event ends?

It stays, with an Ended badge. A cancelled event says Cancelled. team-next moves on to the next event by itself.

Can visitors claim a slot from my site?

Claim Slot and Claim Reserved open that slot on r3dlabs.com in a new tab. The visitor signs in and claims it there, so reservation codes never touch your page.

Can I hide the Powered by line?

Not on this embed. You can turn off every other block with a data-show attribute set to false.

It works on page load but not in my single-page app.

This script fills divs that are on the page when it loads. For a div you add later, call window.R3dEventDetails.mount(el) or window.R3dEventDetails.scan(container).

One event, fully lined up

Pin an event by its id, or pass team-next with a team slug and the widget shows the live event, or the next upcoming one. The lineup uses the viewer's local time and opens a claim link for empty slots.

What the event details embed shows

Image and status: The event image, or its background image or video, with Upcoming, In Progress, Ended, or Cancelled on top. With no image, it draws the event's initials.
Team, title, and time: The team name, the event title, then the start time in the visitor's timezone, the duration, the category, and whether registration is public or invite only.
Short summary: The event's short summary, under the title. It is on unless data-show-short-summary is false. The full description stays off unless data-show-full-description is true.
Hosts and slot count: Each host's photo and name, then how many slots are filled and a View event link to r3dlabs.com.
Flyers: Every flyer page, side by side, in a row that scrolls sideways. Clicking one opens it full screen.
Lineup: Every slot and break, grouped by day in the visitor's timezone. Each day shows how many slots are still open.

How to add the event details embed

Choose what the embed should follow. For one event, open it on R3dLabs, choose Admin, then View URLs, and copy the Website embed snippet. It already has the event id in it. For whatever the team has next, use team-next with your team slug instead.
Pick the description. Every snippet shows the short summary and hides the full description: data-show-short-summary="true" and data-show-full-description="false". Flip either value to change it.
Paste the div where the event should appear. Any page builder that accepts custom HTML works, including WordPress, Squarespace, Wix, Webflow, Carrd, and plain HTML.
Paste the script tag once on the page, usually right after the div or before the closing body tag.
Publish. The widget loads the event every time the page opens, so edits, new flyers, and claimed slots show up without touching your site.

Load https://r3dlabs.com/embed/event-details/event-details.js once.

One event, by id

<div
  data-r3d-event-details="EVENT-UUID"
  data-theme="dark"
  data-image="large"
  data-show-short-summary="true"
  data-show-full-description="false"
></div>
<script async src="https://r3dlabs.com/embed/event-details/event-details.js"></script>

Whatever the team has next

<div
  data-r3d-event-details="team-next"
  data-r3d-team="your-team-slug"
  data-theme="dark"
  data-image="small"
  data-show-short-summary="true"
  data-show-full-description="false"
></div>
<script async src="https://r3dlabs.com/embed/event-details/event-details.js"></script>

team-next shows a live event first, then the next listed upcoming one. When the team has neither, the widget says: No upcoming events found.

Reading the lineup

Day header: Click to collapse or expand that day. Days open from today until at least 12 slots show. A green pill counts open slots. Full means none are left.
Live and past: The slot on air now has a red border and says In Progress. Slots that already ended fade back.
Broadcasting: When the person who claimed a slot is live on Twitch, their photo gets a red ring and a live badge, the same mark used on the event page.
Verified members: Blue name, check mark, a blue ring on the photo, and a slow light sweep across the row.
Unregistered names: Someone a captain added who has no R3dLabs account. The name is gray, the photo is grayscale, and there is no profile link.
Reserved and open: Reserved rows are yellow with Claim Reserved. Open rows say Claim Slot. Both open that slot on r3dlabs.com, where the claim happens.
Breaks: Gaps of five minutes or more between slots show as a break with a coffee cup and how long it lasts.

Event details embed options

data-r3d-event-details (Yes): Event id or team-next. An event UUID pins that event. team-next shows the team's live event, or the next upcoming one.
data-r3d-team (With team-next): Team slug. Required when data-r3d-event-details is team-next.
data-image (No): large | small. Large is a banner above the title. Small sits the image beside the title, date, and summary.
data-theme (No): dark | light. Defaults to dark. Any other value, or leaving it off, stays dark.
data-api (No): API origin. Leave this off on a public site. It defaults to https://api.r3dlabs.com.
data-show-* (No): true | false. Each block is visible unless the attribute is false. data-show-short-summary is the short summary. data-show-full-description stays hidden unless it is true.

Blocks you can hide

data-show-image: Event image or initials. Off moves the status badge above the title.
data-show-status: Upcoming, In Progress, Ended, or Cancelled badge
data-show-team: Team name
data-show-title: Event title
data-show-time: Start time, timezone, and duration
data-show-category: Category
data-show-registration: Public or invite-only
data-show-short-summary: Short summary under the title. On unless set to false.
data-show-full-description: Full description. Off unless set to true.
data-show-hosts: Hosts
data-show-slot-count: Filled slot count
data-show-link: View event link
data-show-flyers: Flyer thumbnails
data-show-lineup: Lineup

Set an attribute to false to hide that block. Anything else, including leaving it off, keeps the block visible. data-show-full-description is the exception: the full description stays hidden unless it is true. data-show-short-summary controls the short summary on its own. Powered by R3dLabs always stays. Event rules are never shown.

Show the full description

<div
  data-r3d-event-details="EVENT-UUID"
  data-show-short-summary="true"
  data-show-full-description="true"
></div>
<script async src="https://r3dlabs.com/embed/event-details/event-details.js"></script>

Event card for a sidebar or post

<div
  data-r3d-event-details="EVENT-UUID"
  data-image="small"
  data-show-short-summary="true"
  data-show-full-description="false"
  data-show-hosts="false"
  data-show-flyers="false"
  data-show-lineup="false"
></div>
<script async src="https://r3dlabs.com/embed/event-details/event-details.js"></script>

Just the lineup

<div
  data-r3d-event-details="EVENT-UUID"
  data-show-image="false"
  data-show-status="false"
  data-show-short-summary="false"
  data-show-full-description="false"
  data-show-hosts="false"
  data-show-flyers="false"
></div>
<script async src="https://r3dlabs.com/embed/event-details/event-details.js"></script>

Light theme

<div
  data-r3d-event-details="team-next"
  data-r3d-team="your-team-slug"
  data-theme="light"
  data-image="small"
  data-show-short-summary="true"
  data-show-full-description="false"
></div>
<script async src="https://r3dlabs.com/embed/event-details/event-details.js"></script>

Use it with the team events embed

<!-- The live or next event, in full -->
<div
  data-r3d-event-details="team-next"
  data-r3d-team="night-owls"
  data-show-short-summary="true"
  data-show-full-description="false"
></div>

<!-- Everything after it, as cards -->
<div data-r3d-team-events="night-owls" data-limit="6"></div>

<script async src="https://r3dlabs.com/embed/event-details/event-details.js"></script>
<script async src="https://r3dlabs.com/embed/team-events/team-events.js"></script>

Single-page apps

The script fills divs that are on the page when it loads. Mount ones you add later with window.R3dEventDetails.

// The script fills divs that exist when it loads.
// For a div you add later, mount it yourself:
const el = document.querySelector("#tonight");
window.R3dEventDetails.mount(el);

// Or fill every new data-r3d-event-details inside a container
window.R3dEventDetails.scan(document.querySelector("#event-page"));

All browser embeds or the team events embed.

Frequently asked questions

Where do I find the event id?: Open the event on R3dLabs, choose Admin, then View URLs. The Website embed snippet there already has the id filled in. The id is the long code with dashes, not the event's short link.
Should I use an event id or team-next?: Use the id on a page about one night, such as an announcement post. Use team-next on a page that should always be current, such as your home page. team-next shows a live event first, then the next listed upcoming one.
What happens after a pinned event ends?: It stays, with an Ended badge. A cancelled event says Cancelled. team-next moves on to the next event by itself.
Can visitors claim a slot from my site?: Claim Slot and Claim Reserved open that slot on r3dlabs.com in a new tab. The visitor signs in and claims it there, so reservation codes never touch your page.
Can I hide the Powered by line?: Not on this embed. You can turn off every other block with a data-show attribute set to false.
It works on page load but not in my single-page app.: This script fills divs that are on the page when it loads. For a div you add later, call window.R3dEventDetails.mount(el) or window.R3dEventDetails.scan(container).