Developer Help
User Listings Widgets
Display user events and products listings on any website with customizable HTML widgets
What are User Listings Widgets?
Streets user listings widgets allow you to display a user's events and products on any website. Perfect for event organizers and vendors who want to showcase their full catalog of offerings in customizable layouts.
Quick Start Guide
Include the Script
Add the Streets embed script to your website's HTML
Add Listings Widget
Insert user listings elements with the user's Streets ID
Customize & Launch
Style your widgets and display user's complete catalog
Basic Implementation
1. Include the Embed Script
Add this script tag to your website's HTML head or before the closing body tag:
<!-- Include the Streets embed script -->
<script src="https://thestreetsapp.com/embed/streets-embed.js"></script>2. Add User Listings Widget Elements
Insert user listings widget elements wherever you want them to appear on your page:
User Events Widget
Display all events from a specific user
<div data-streets-widget="user-events"
data-share-id="user-streets-id"
data-layout="grid"
data-limit="6">
</div>User Products Widget
Display all products from a specific user
<div data-streets-widget="user-products"
data-share-id="user-streets-id"
data-layout="list"
data-limit="8">
</div>📋 Basic Widget Preview
Here's a simple user events widget example:
Note: For full functionality and testing, use the interactive widget creator below or visit the complete test page.
Interactive Widget Creator
Customize your user listings widget and see a live preview. Copy the generated HTML code to use on your website.
Configuration
The user's unique Streets ID
Used for gradients and accents
Used for highlights (optional)
User name and about text color (optional)
How checkout is handled when clicked
Live Preview
Generated HTML Code
<div data-streets-widget="user-events"
data-share-id="testuser"
data-layout="grid"
data-limit="6"
data-theme="light">
</div>Testing Tips
- • Use a valid Streets ID for best results
- • Try different layouts and themes to find your style
- • Test with different limit values to see the effect
- • Visit the full test page for more examples
Widget Types
User Events Widget
Display upcoming events from a user
- • Shows active, public events only
- • Filters events that started more than 6 hours ago
- • Includes ticket information and pricing
- • Date and location filtering
- • Direct checkout integration
User Products Widget
Display products for sale from a user
- • Shows active products only
- • Respects sale start/end dates
- • Includes pricing and availability
- • Search and filtering capabilities
- • Direct purchase integration
Configuration Options
Required Attributes
| Attribute | Values | Description |
|---|---|---|
| data-streets-widget | user-events |user-products | Widget type to display |
| data-share-id | String | User's Streets ID (found in profile settings) |
Optional Attributes
| Attribute | Default | Values | Description |
|---|---|---|---|
| data-layout | grid | grid |list | Display layout style |
| data-limit | 6 | Number | Maximum items to display |
| data-theme | light | light |dark |minimal | Visual theme |
| data-show-search | true | true |false | Show search filter |
| data-show-date-filter | true | true |false | Show date filter (events only) |
| data-hide-image | false | true |false | Hide item images |
| data-hide-price | false | true |false | Hide pricing information |
| data-hide-location | false | true |false | Hide location info (events only) |
| data-sort-by | date/name | date |name |price | Sort order for items |
| data-primary-color | - | Hex color (e.g. #3B82F6) | Custom primary color for gradients and accents (optional) |
| data-secondary-color | - | Hex color (e.g. #F59E0B) | Custom secondary color for highlights (optional, works independently) |
| data-header-text-color | - | Hex color (e.g. #FFFFFF) | Custom color for user name and about text (optional) |
| data-inline-checkout | false | true |false | Enable inline checkout modal instead of redirecting (default: false) |
| data-show-low-stock | false | true |false | Show quantity only when less than 10 (products only) |
Layout & Theme Examples
Grid Layout
data-layout="grid"List Layout
data-layout="list"Dark Theme
data-theme="dark"Code Examples
User Events Widget Examples
Basic Events Grid
Events List with Dark Theme
Minimal Events (No Images/Location)
Events with Inline Checkout & Custom Colors
User Products Widget Examples
Basic Products Grid
Products List with Search
Products without Pricing
Products with Inline Checkout & Low Stock Alerts
Features & Benefits
✨ Key Features
- ✓Real-time data from Streets platform
- ✓Fully responsive design for all devices
- ✓Multiple layout options (grid/list)
- ✓Theme customization (light/dark/minimal)
- ✓Search and filtering capabilities
- ✓Direct checkout integration
- ✓Custom color schemes with gradients
- ✓Inline checkout modal with full functionality
- ✓Smart inventory display (low stock alerts)
🚀 Performance
- ⚡Lazy loading for optimal performance
- ⚡Efficient API calls with caching
- ⚡Minimal JavaScript footprint
- ⚡CORS-enabled for any domain
- ⚡Error handling and fallbacks
- ⚡Accessibility compliant
Use Cases
Event Promoters
Showcase your upcoming events on your website, blog, or social media to drive ticket sales and increase attendance.
Product Vendors
Display your products for sale on your e-commerce site or portfolio to maximize sales reach and visibility.
Developers
Integrate Streets listings into client websites, marketing pages, or custom applications with minimal code.
📱 Getting Your Streets ID
Your Streets ID (shareId) is required for all user listings widgets. Here's how to find it:
- Open the Streets app on your mobile device
- Go to your Profile tab
- Tap on Settings (gear icon)
- Look for "Streets ID" or "Share ID" in your profile settings
- Copy this ID and use it as the
data-share-idvalue
Note: Your Streets ID is a unique identifier that allows the widget to display your public events and products. Make sure your events are set to public and active for them to appear in the widget.
Support & Resources
Live Examples
View working examples of all widget configurations
All Widgets
Test page for all Streets embed widgets
Developer Docs
Browse all developer documentation and guides
Get Support
Contact our team for technical assistance
Testing & Troubleshooting
Test Your User Listings Widgets
Use our comprehensive test page to see all user listings widget types in action and test your specific Streets ID:
Open User Listings Test PageCommon Issues
Widget not displaying
Ensure the embed script is loaded and check that your Streets ID is correct and the user has public events/products.
No items showing
Verify that the user has active, public events or products. Events must not have started more than 6 hours ago.
Styling conflicts
Use specific CSS selectors or data attributes to override conflicting styles. User listings widgets use isolated CSS.
Need More Help?
If you're experiencing issues with user listings widgets, you can:
- • Test your widgets on our User Listings Test Page
- • Check our Troubleshooting Guide
- • View Frequently Asked Questions
- • Contact our Support Team
Ready to Get Started?
Now that you understand user listings widgets, you might want to: