Streets User Listings Embed Test

User Events Widgets

Display a user's upcoming events in various layouts and themes. Perfect for event promoters to showcase their events on their website.

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

User Products Widgets

Display a user's products for sale in various layouts and themes. Perfect for vendors to showcase their products on their website.

<div 
    data-streets-widget="user-products"
    data-share-id="testuser"
    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="your-api-key"
></div>

Configuration Reference

Complete list of available attributes for customizing user listings widgets.

Common Attributes

Attribute	Required	Values	Description
`data-streets-widget`	Yes	`user-events` \| `user-products`	Widget type to display
`data-share-id`	Yes	String	User's Streets ID (shareId)
`data-layout`	No	`grid` \| `list`	Display layout (default: grid)
`data-limit`	No	Number	Maximum items to display (default: 6)
`data-theme`	No	`light` \| `dark` \| `minimal`	Visual theme (default: light)
`data-primary-color`	No	Hex color (e.g. #3B82F6)	Custom primary color for gradients and accents (optional)
`data-secondary-color`	No	Hex color (e.g. #F59E0B)	Custom secondary color for highlights (optional, works independently)
`data-header-text-color`	No	Hex color (e.g. #FFFFFF)	Custom color for user name and about text (optional)
`data-inline-checkout`	No	`true` \| `false`	Enable inline checkout modal instead of redirecting (default: false)
`data-event-button-label`	No	Text string	Custom label for event buttons (default: "Get Tickets")
`data-product-button-label`	No	Text string	Custom label for product buttons (default: "Buy Now")
`data-show-search`	No	`true` \| `false`	Show search filter (default: true)
`data-hide-image`	No	`true` \| `false`	Hide item images (default: false)

Events-Specific Attributes

Attribute	Values	Description
`data-show-date-filter`	`true` \| `false`	Show date range filter (default: true)
`data-hide-location`	`true` \| `false`	Hide event location (default: false)
`data-hide-price`	`true` \| `false`	Hide ticket prices (default: false)
`data-sort-by`	`date` \| `name` \| `price`	Sort order for events (default: date)

Products-Specific Attributes

Attribute	Values	Description
`data-hide-price`	`true` \| `false`	Hide product prices (default: false)
`data-show-low-stock`	`true` \| `false`	Show quantity when less than 10 items (default: false)
`data-sort-by`	`name` \| `price`	Sort order for products (default: name)

Integration Guide

How to integrate Streets user listings widgets into your website.

1. Include the Streets Embed Script

2. Add Widget HTML

<!-- User Events Widget with Inline Checkout -->
<div 
    data-streets-widget="user-events"
    data-share-id="your-streets-id"
    data-layout="grid"
    data-limit="6"
    data-theme="light"
    data-primary-color="#3B82F6"
    data-secondary-color="#F59E0B"
    data-header-text-color="#FFFFFF"
    data-inline-checkout="true"
    data-api-key="your-api-key"
></div>

<!-- User Products Widget with Custom Colors -->
<div 
    data-streets-widget="user-products"
    data-share-id="your-streets-id"
    data-layout="list"
    data-limit="4"
    data-theme="light"
    data-primary-color="#8B5CF6"
    data-show-low-stock="true"
    data-inline-checkout="true"
    data-api-key="your-api-key"
></div>

<!-- User Events Widget with Header Text Color Only -->
<div 
    data-streets-widget="user-events"
    data-share-id="your-streets-id"
    data-layout="grid"
    data-limit="3"
    data-theme="light"
    data-header-text-color="#FFD700"
    data-api-key="your-api-key"
></div>

<!-- User Products Widget with Custom Button Label -->
<div 
    data-streets-widget="user-products"
    data-share-id="your-streets-id"
    data-layout="grid"
    data-limit="4"
    data-theme="light"
    data-product-button-label="Shop Now"
    data-api-key="your-api-key"
></div>

3. Customize Appearance

Use the various data attributes to customize the appearance and behavior of your widgets. Colors are completely optional - you can use primary only, secondary only, both, or neither. The widgets are fully responsive and will adapt to your website's layout.

4. Get Your Streets ID

Your Streets ID (shareId) can be found in your Streets app profile settings. It's the unique identifier that allows the widget to display your events and products.

Performance & Features

✨ Features

Real-time data from Streets platform
Responsive design for all devices
Multiple layout options (grid/list)
Theme customization (light/dark/minimal)
Custom color schemes with gradients
Custom header text colors
Smart inventory display (low stock alerts)
Search and filtering capabilities
Inline checkout modal with full functionality
Direct checkout integration
Automatic image optimization
SEO-friendly structure

🚀 Performance

Lazy loading for images
Efficient API calls with caching
Minimal JavaScript footprint
CSS-only animations
Mobile-first responsive design
CORS-enabled for any domain
Error handling and fallbacks
Accessibility compliant

🎉 Streets User Listings Embed Test