Streets Embed — User Listings Widgets Test

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 (Share ID)

API Key (required)

Streets iD: —

API Key: required

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