User Listings Widgets

Display a user's events and products catalog with customizable layouts, themes, and filters

Test Configuration

Streets iD: Settings > Streets iD in the app
API Key: Settings > Security > Embed Domains
Host Domain: Your embed API key must have this website’s domain registered. If testing locally, add localhost. For production, add the domain this page is hosted on (e.g. thestreetsapp.com).
Streets iD: -
API Key: required

Partner-Style Canvas (v2.3)

Restyled grid & list on cinematic black - outline listing CTAs

Events grid - dark + outline CTA

Products list - dark + inverted CTA

User Events - Grid Layout

Display upcoming events with custom colors, search, and date filtering

<div data-streets-widget="user-events" data-share-id="..." data-layout="grid" data-limit="6" data-theme="light" data-primary-color="#3B82F6" data-secondary-color="#F59E0B" data-header-text-color="#FFFFFF" data-show-search="true" data-show-date-filter="true" data-sort-by="date" data-api-key="..."></div>

User Events - List Layout, Dark Theme

Compact list with name sorting and date filter

Dark List

<div ... data-layout="list" data-limit="4" data-theme="dark" data-show-search="false" data-show-date-filter="true" data-sort-by="name"></div>

Minimal - No Images / Location

<div ... data-layout="grid" data-limit="3" data-theme="minimal" data-show-search="false" data-show-date-filter="false" data-hide-image="true" data-hide-location="true" data-sort-by="name"></div>

User Events - Inline Checkout + Custom Labels

Opens checkout in a modal instead of redirecting, with hidden location and price sort

<div data-streets-widget="user-events" data-share-id="..." data-layout="list" data-limit="2" data-theme="light" data-primary-color="#EF4444" data-header-text-color="#FFFFFF" data-inline-checkout="true" data-event-button-label="Get Tickets" data-show-search="true" data-show-date-filter="false" data-hide-location="true" data-hide-price="false" data-sort-by="price" data-api-key="..."></div>

User Products - Grid Layout

Display products with search, low-stock indicators, and custom purple theme

<div data-streets-widget="user-products" data-share-id="..." data-layout="grid" data-limit="6" data-theme="light" data-primary-color="#8B5CF6" data-secondary-color="#F59E0B" data-show-search="true" data-show-low-stock="true" data-sort-by="name" data-api-key="..."></div>

User Products - Dark & Inline Checkout

Dark theme, inline checkout, and custom button labels

Dark List + Price Sort

<div ... data-layout="list" data-limit="4" data-theme="dark" data-header-text-color="#FFFFFF" data-show-search="true" data-sort-by="price"></div>

Inline Checkout + Low Stock

<div ... data-layout="grid" data-limit="3" data-theme="light" data-primary-color="#8B5CF6" data-secondary-color="#DC2626" data-header-text-color="#FFFFFF" data-inline-checkout="true" data-product-button-label="Shop Now" data-show-low-stock="true" data-show-search="false"></div>

User Products - Prices Hidden + Search Only

Hide pricing for catalog-style browsing

<div data-streets-widget="user-products" data-share-id="..." data-layout="grid" data-limit="4" data-theme="light" data-primary-color="#8B5A2B" data-secondary-color="#D2B48C" data-show-search="true" data-hide-image="false" data-hide-price="true" data-sort-by="name" data-api-key="..."></div>

User Listings Attribute Reference

All supported data-* attributes for user-events and user-products widgets

Common Attributes

Attribute Required Default Values / Description
data-streets-widget Yes - user-events | user-products
data-share-id Yes - User's Streets iD
data-api-key Yes - Embed API key (sk_...)
data-layout No grid grid | list
data-limit No 6 Maximum items to display
data-theme No light light | dark | minimal
data-primary-color No - Hex color for gradients and accents
data-secondary-color No - Hex color for highlights
data-header-text-color No - Hex color for user name and about text
data-show-search No true true | false
data-hide-image No false true | false
data-hide-price No false true | false
data-inline-checkout No false true to open checkout in a modal

Events-Specific Attributes

Attribute Default Values / Description
data-show-date-filter true true | false - date range filter
data-hide-location false true | false - hide event location
data-sort-by date date | name | price
data-event-button-label Get Tickets Custom button text for event cards

Products-Specific Attributes

Attribute Default Values / Description
data-show-low-stock false true | false - show quantity when < 10
data-sort-by name name | price
data-product-button-label Buy Now Custom button text for product cards