Carousel URL Parameters

The /embed/carousel endpoint renders a CardCarousel component that displays places or events in a horizontally scrollable carousel layout.

Base URL

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

Required Parameters

Parameter	Type	Description
`slug` OR `boundary`	string	Location boundary slug (e.g., "austin", "sf", "denver")
`list`	string	Alternative: 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

Parameter	Type	Default	Description
`type`	string	`"places"`	Content type: `"places"` or `"events"`
`vibes`	string	-	Comma-separated vibe filters (e.g., `"chill,artsy"`)
`categories`	string	-	Comma-separated category filters
`tags`	string	-	Comma-separated tag filters
`editorial_categories`	string	-	Editorial category filters (always applied server-side)
`dist` / `radius`	number	-	Radius in meters for proximity search
`hideNoImageItems`	boolean	`false`	Hide items without images
`strictFilter`	boolean	`false`	When `true`, taxonomy filters are applied server-side
`ordering` / `sort`	string	`"-score_combined"`	Sort order for results (see below)

Sort Order (`ordering` / `sort`)

Controls how places are sorted in the carousel.

Value	Description
`name`	Alphabetical by place name (A-Z)
`-score_combined`	Default. By relevance/popularity score (highest first)
`-vibe_count`	By number of vibes (most vibes first)

Carousel Display Parameters

Parameter	Type	Default	Description
`columns` / `gridColumns`	number	`4`	Number of visible slides/cards
`header`	string	-	Optional header text above the carousel

Card Display Parameters

Parameter	Type	Default	Description
`showVibesOnCards`	boolean	`true`	Show vibes on cards
`showTagsOnCards`	boolean	`false`	Show tags on cards
`showCategoriesOnCards`	boolean	`false`	Show categories on cards
`showDescription`	boolean	`false`	Show description on cards
`showAddressOnCards`	boolean	`true`	Show address on cards
`subtitleSource`	string	`"none"`	Source for card subtitle: `"none"`, `"category"`, `"address"`, etc.
`subtitlePosition`	string	`"above-title"`	Subtitle position: `"above-title"` or `"below-title"`

Rating Parameters

Parameter	Type	Default	Description
`showRating`	boolean	`false`	Show ratings on cards
`ratingShape`	string	`"star"`	Rating shape: `"star"` or `"dot"`
`ratingDisplayStyle`	string	`"both"`	Display style: `"stars"`, `"number"`, or `"both"`
`ratingPosition`	string	`"below-title"`	Position: `"above-title"`, `"below-title"`, `"below-address"`, `"next-to-category"`
`ratingStarSize`	number	`16`	Size of rating stars in pixels
`ratingStarColor`	string	`"#FFD700"`	Color of rating stars (hex)
`showRatingCount`	boolean	`true`	Show the number of ratings

Bookmark Parameters

Parameter	Type	Default	Description
`showBookmark`	boolean	`false`	Show bookmark button on cards
`bookmarkIcon`	string	`"star"`	Icon type: `"bookmark"`, `"heart"`, or `"star"`
`bookmarkIconColor`	string	`"#FF0000"`	Color of bookmark icon (hex)

Button Parameters

Parameter	Type	Default	Description
`showButton`	boolean	`false`	Show action button on cards
`buttonText`	string	-	Custom text for the button

Event-Specific Parameters

Parameter	Type	Default	Description
`groupRecurringEvents`	boolean	`false`	Group recurring events to show only next occurrence

Recurring Event Behavior: When groupRecurringEvents=true, events from a recurring series are grouped together, showing only the next occurrence with a badge indicating more dates are available. Clicking the recurring badge navigates to the event series page (/event-series/{id}) where all occurrences can be viewed.

Updates Display

Parameter	Type	Default	Description
`showUpdates`	boolean	`false`	Enable updates display on cards
`updatesDisplayMode`	string	`"badge"`	Display mode: `"badge"`, `"text"`, or `"both"`
`updatesFilterTypes`	string	-	Comma-separated types: `Update,Offer,Clue,Sponsor,Special`

Theme Parameter

Parameter	Type	Default	Description
`theme` / `themeName`	string	`"default"`	Theme slug for styling

Example URLs

Basic Places Carousel

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

Events Carousel

/embed/carousel?slug=dc&type=events&groupRecurringEvents=true

Carousel with Custom Columns

/embed/carousel?slug=la&columns=5

List-Based Carousel

/embed/carousel?list=my-curated-list&columns=4

Carousel with Header

/embed/carousel?slug=sf&header=Featured%20Places

Filtered by Editorial Category

/embed/carousel?slug=austin&editorial_categories=best-coffee-shops

With Ratings Displayed

/embed/carousel?slug=denver&showRating=true&ratingDisplayStyle=both&ratingPosition=below-title

With Bookmarks and Buttons

/embed/carousel?slug=nyc&showBookmark=true&bookmarkIcon=heart&showButton=true&buttonText=View%20Details

Hide Items Without Images

/embed/carousel?slug=sf&hideNoImageItems=true

Full Featured Example

/embed/carousel?slug=nyc&type=places&columns=4&header=Top%20Spots&showVibesOnCards=true&showAddressOnCards=true&showRating=true&hideNoImageItems=true&theme=default

PostMessage Events

The embed communicates with the parent window via postMessage:

Event Type	Description	Data
`"card-clicked"`	User clicked a card	`{ embedId: "carousel", data: <item> }`

Example Parent Window Handler

window.addEventListener("message", (event) => {
  if (event.data.embedId === "carousel") {
    switch (event.data.type) {
      case "card-clicked":
        console.log("Card clicked:", event.data.data);
        // Navigate to detail page, open modal, etc.
        break;
    }
  }
});

Embedding

Basic iframe Embed

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

With Custom Header

<iframe
  src="https://vibemap.com/embed/carousel?slug=austin&header=Discover%20Austin"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none;"
></iframe>

Responsive Embed

<div style="width: 100%; max-width: 1200px; margin: 0 auto;">
  <iframe
    src="https://vibemap.com/embed/carousel?slug=austin"
    width="100%"
    height="350"
    style="border: none;"
  ></iframe>
</div>

Notes

The carousel automatically adjusts the number of visible cards based on container width
Navigation arrows appear only when there are more items than can fit on screen
Cards are displayed in vertical orientation with a consistent "basic" style variant
For events, enabling groupRecurringEvents will show only the next upcoming occurrence of each recurring event series

Base URL​

Required Parameters​

Content & Data Parameters​

Sort Order (ordering / sort)​

Carousel Display Parameters​

Card Display Parameters​

Rating Parameters​

Bookmark Parameters​

Button Parameters​

Event-Specific Parameters​

Updates Display​

Theme Parameter​

Example URLs​

Basic Places Carousel​

Events Carousel​

Carousel with Custom Columns​

List-Based Carousel​

Carousel with Header​

Filtered by Editorial Category​

With Ratings Displayed​

With Bookmarks and Buttons​

Hide Items Without Images​

Full Featured Example​

PostMessage Events​

Example Parent Window Handler​

Embedding​

Basic iframe Embed​

With Custom Header​

Responsive Embed​

Notes​