Skip to main content

Grid URL Parameters

The /embed/grid endpoint renders an EventsGrid component that displays places or events in a filterable grid layout.

Base URL

/embed/grid?slug=<boundary-slug>

Required Parameters

ParameterTypeDescription
slug OR boundarystringLocation boundary slug (e.g., "austin", "sf", "denver")
liststringAlternative: List slug that provides configuration from Lists API

Note: Either slug/boundary OR list must be provided. When using list, if the list has an associated organization, that organization's boundary will be used automatically.


Content & Data Parameters

ParameterTypeDefaultDescription
typestring"places"Content type: "places" or "events"
vibesstring-Comma-separated vibe filters (e.g., "chill,artsy")
categoriesstring-Comma-separated category filters
tagsstring-Comma-separated tag filters
editorial_categoriesstring-Editorial category filters (always applied server-side)
dist / radiusnumber-Radius in meters for proximity search
search / searchTermstring-Initial search term
hideNoImageItemsbooleanfalseHide items without images
ordering / sortstring"-score_combined"Sort order for results (see below)

Sort Order (ordering / sort)

Controls how places are sorted in the grid.

ValueDescription
nameAlphabetical by place name (A-Z)
-score_combinedDefault. By relevance/popularity score (highest first)
-vibe_countBy number of vibes (most vibes first)

Filter Behavior Parameters

ParameterTypeDefaultDescription
strictFilterbooleanfalseWhen true, taxonomy filters are applied server-side (AND logic). When false, filters are client-side (OR logic).
filterBehaviorstring"trapped"Only applies when strictFilter=true. Controls how users can navigate taxonomy filters:

Filter Behavior Options:

  • "trapped" - User is locked within the passed taxonomy values and their children
  • "selected" - Passed filter values are pre-selected, but user can deselect and explore other options
  • "open" - All taxonomies shown, passed values are not pre-selected

Grid Display Parameters

ParameterTypeDefaultDescription
gridColumnsnumber3Number of columns in the grid
shownAtStartnumber100Number of items shown initially (before "Load More")

Filter UI Parameters

ParameterTypeDefaultDescription
showSearchFilterbooleantrueShow the search input
showVibeFilterbooleantrueShow the vibes filter
showCategoryFilterbooleanautoShow the category filter (auto-enabled for places)
showTagFilterbooleantrueShow the tags filter
showItemCountOnFiltersbooleantrueShow item counts on filter chips
filterViewModestring"horizontal"Filter layout: "horizontal" or "tabbed"
filterSelectionModestring"auto"Selection mode: "single", "multiple", or "auto"
multiSelectTaxonomiesarray[]Taxonomy slugs that allow multi-select (e.g., ["vibes","tags"])
taxonomySortOrderstring"count"Sort order for taxonomy chips (see below)

Taxonomy Sort Order (taxonomySortOrder)

Controls how filter chips are sorted. Default is count (most items first).

Format: "taxonomy:order,taxonomy:order"

Values:

ValueDescription
countDefault. Sort by item count (most items first), then alphabetically
alphaAlphabetical sorting (theme order → color → A-Z)

Example: taxonomySortOrder=vibes:alpha,categories:alpha,tags:alpha for all alphabetical.


Date Filter Parameters (Events Only)

ParameterTypeDefaultDescription
showDateRangeSelectorbooleantrueShow date range selector (only for type=events)
dateFilterOptionsarray["upcoming","today","weekend","next_week","month"]Available date filter options
groupRecurringEventsbooleanfalseGroup recurring events to show only next occurrence
recurringBadgeLinkTostring"grid-filter"Where recurring badge click navigates: "grid-filter" (filter in place) or "event-series-page" (navigate to series page)

Card Display Parameters

ParameterTypeDefaultDescription
showVibesOnCardsbooleantrueShow vibes on cards
showTagsOnCardsbooleanfalseShow tags on cards
showAddressOnCardsbooleantrueShow address on cards
subtitleSourcestring"none"Source for card subtitle: "none", "category", "address", etc.
subtitlePositionstring"above-title"Subtitle position: "above-title" or "below-title"
showRatingbooleanfalseShow ratings on cards
showBookmarkbooleanfalseShow bookmark button on cards

Updates Display

ParameterTypeDefaultDescription
showUpdatesbooleanfalseEnable updates display on cards
updatesDisplayModestring"badge"Display mode: "badge", "text", or "both"
updatesFilterTypesstring-Comma-separated types: Update,Offer,Clue,Sponsor,Special

Theme Parameter

ParameterTypeDefaultDescription
theme / themeNamestring"default"Theme slug for styling

Example URLs

Basic Places Grid

/embed/grid?slug=austin&type=places

Events with Date Filters

/embed/grid?slug=dc&type=events&showDateRangeSelector=true

Grid with Custom Columns

/embed/grid?slug=la&gridColumns=4&shownAtStart=20

List-Based Grid

/embed/grid?list=my-curated-list&gridColumns=3

Filtered by Vibes (Client-Side)

/embed/grid?slug=sf&vibes=chill,artsy&showVibeFilter=true

Strict Filtering (Server-Side)

/embed/grid?slug=sf&strictFilter=true&categories=food&vibes=chill

Trapped Filter Behavior

/embed/grid?slug=austin&strictFilter=true&filterBehavior=trapped&categories=food

Custom Theme and Display Options

/embed/grid?slug=denver&theme=dark&showVibesOnCards=true&showAddressOnCards=true
/embed/grid?slug=nyc&type=events&gridColumns=3&shownAtStart=50&showVibesOnCards=true&showDateRangeSelector=true&filterViewMode=horizontal&theme=default

PostMessage Events

The embed communicates with the parent window via postMessage:

Event TypeDescriptionData
"card-clicked"User clicked a card{ embedId: "grid", data: <item> }

Example Parent Window Handler

window.addEventListener("message", (event) => {
if (event.data.embedId === "grid") {
switch (event.data.type) {
case "card-clicked":
console.log("Card clicked:", event.data.data);
break;
}
}
});

Embedding

Basic iframe Embed

<iframe
src="https://vibemap.com/embed/grid?slug=austin&type=places"
width="100%"
height="600"
frameborder="0"
style="border: none;"
></iframe>

Responsive Embed

<div style="position: relative; width: 100%; padding-bottom: 75%;">
<iframe
src="https://vibemap.com/embed/grid?slug=austin"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
></iframe>
</div>