Why doesn't an event show up?

The feed only includes listed events that are scheduled or live. Drafts, finished, cancelled, and unlisted events are left out, and the list is capped by data-limit.

How many columns will it use?

It follows the visitor's screen width: one column on phones, two from 560px, and three from 900px. Columns follow the screen, not the box the widget sits in, so give it a full-width spot rather than a narrow sidebar.

Can I change the colors?

Pick dark or light with data-theme. The widget uses R3dLabs red for badges, buttons, and the slot bar so it reads as part of the raid train.

Does it slow my page down?

The script loads async and is small. It makes one request for the feed and lazy-loads event images.

Where do the links go?

Each card opens that event on r3dlabs.com in a new tab. The header and View team button open the team page.

Your team's events, on your site

A list of the team's upcoming listed events. Each card shows the image or initials, whether it is live or starting soon, the local start time, duration, and how full the lineup is.

Include the team events embed

Load https://r3dlabs.com/embed/team-events/team-events.js once. The script fills every element with data-r3d-team-events.

Open your team on R3dLabs and choose Team settings, then Website. Pick how many events to show and a theme, then copy the snippet. You can also write it by hand with the team slug from your team page URL.
Paste the div where the schedule 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 team's upcoming listed events, in the visitor's own timezone, every time the page opens.

<div
  data-r3d-team-events="your-team-slug"
  data-limit="6"
  data-theme="dark"
></div>
<script async src="https://r3dlabs.com/embed/team-events/team-events.js"></script>

What each event card shows

Team header: The team logo, name, and a View team button that opens the team page on R3dLabs.
Event image: The event image, or its background image or video. With neither, the card draws the event's initials over a red glow.
Status badge: In Progress when the event is live. Otherwise Starts in Xm, Starts in Xh, Tomorrow, or the date.
Title, category, and time: The start time is in the visitor's timezone, with the total duration beside it.
Short description: Up to two lines of the event's short description.
Slot fill: Claimed and total slots, with a progress bar. Invite-only events say so here.

Team events embed options

data-r3d-team-events (Yes): Team slug. The team's public slug, including a leading hyphen when the slug has one.
data-limit (No): 1–12. How many upcoming events to show. Defaults to 6.
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-hide-branding (No): true. Hides the Powered by R3dLabs line on this widget only.

Light theme, three events, no footer

<div
  data-r3d-team-events="your-team-slug"
  data-limit="3"
  data-theme="light"
  data-hide-branding="true"
></div>
<script async src="https://r3dlabs.com/embed/team-events/team-events.js"></script>

Several teams on one page

<h2>Night Owls</h2>
<div data-r3d-team-events="night-owls" data-limit="3"></div>

<h2>Friends of the show</h2>
<div data-r3d-team-events="-team-le-petit-train-des-dj" data-limit="3"></div>

<!-- Load the script once, after every mount -->
<script async src="https://r3dlabs.com/embed/team-events/team-events.js"></script>

Mounting from JavaScript

// Mount a node you added after the page loaded
const el = document.querySelector("#team-schedule");
window.R3dTeamEvents.mount(el);

// Or rescan a container for new data-r3d-team-events nodes
window.R3dTeamEvents.scan(document.querySelector("#sidebar"));

When the team has nothing listed and upcoming, the widget says: No upcoming events right now.

Frequently asked questions

Why doesn't an event show up?: The feed only includes listed events that are scheduled or live. Drafts, finished, cancelled, and unlisted events are left out, and the list is capped by data-limit.
How many columns will it use?: It follows the visitor's screen width: one column on phones, two from 560px, and three from 900px. Columns follow the screen, not the box the widget sits in, so give it a full-width spot rather than a narrow sidebar.
Can I change the colors?: Pick dark or light with data-theme. The widget uses R3dLabs red for badges, buttons, and the slot bar so it reads as part of the raid train.
Does it slow my page down?: The script loads async and is small. It makes one request for the feed and lazy-loads event images.
Where do the links go?: Each card opens that event on r3dlabs.com in a new tab. The header and View team button open the team page.

All browser embeds or the event details embed.