Skip to content
District 76 Riders
Sign inJoin
Embeds

Organizer Tools & API

Your rides on your own website, and your own tools connected to D76.

Embeds

One copy-paste snippet puts upcoming rides on your own website: a crew's, an organizer's, a shop's, an area's, or toy runs. Free, no key, and it stays current on its own.

Try it

Pick a look and how many rides, copy the code, paste it into your site. The examples below are live; for your own crew, profile, shop or area, open its page and use Put this on your website. The app has the same thing as Share an embed.

Embed
Look
Code
HTML

Preview

What you can embed

  • Crew

    A public crew's upcoming rides.

    /embed/crews/<crew>/events

    Get the code: Crew page, for crew leads

  • Organizer

    The rides an organizer hosts.

    /embed/riders/<handle>/events

    Get the code: Your profile's Events tab

  • Shop

    The rides a shop hosts or backs.

    /embed/shops/<shop>/events

    Get the code: Your shop's page, for the owner

  • State or city

    Upcoming events in an area; add ?type=GROUP_RIDE, BIKE_NIGHT…

    /embed/events/in/<state>[/<city>]

    Get the code: Any area page

  • Toy runs

    Motorcycle toy runs, nationwide or in one state.

    /embed/events/toy-runs[/<state>]

    Get the code: The toy run pages

  • One event

    A single event as a card.

    /embed/events/<event>

    Get the code: Any event's page

Only what anyone can already see on D76 shows up: private crews, unlisted rides and anything a profile keeps to itself never appear in an embed.

Options

  • ?theme=light or ?theme=dark. Leave it off to match each visitor's device.
  • ?limit= how many rides, 1 to 20 (default 6).
  • ?type= on area embeds: GROUP_RIDE, BIKE_NIGHT, RALLY, CHARITY, POKER_RUN, SHOW, SWAP_MEET, RACING.

Privacy

Embeds set no cookies, run no analytics and never see who's visiting your site. Ride links open on D76 in a new tab, tagged so we can tell they came from an embed.

Sizing it yourself

The Fits itself code uses our small loader, which grows and shrinks the frame with the list. If you frame an embed without it, the embed still tells your page its height. Listen for the message and set the frame's height:

JavaScript
window.addEventListener("message", function (e) {
  if (e.origin !== "https://d76riders.com" || !e.data || e.data.type !== "d76-embed:height") return;
  document.getElementById("d76-rides").style.height = e.data.height + "px";
});