Streets Help Center | Event Support & Guides

What are User Listings Widgets?

User listings widgets display a user's full catalog of events or products on any website. They pull real-time data from Streets and support grid/list layouts, dark theme, search, date filtering, inline checkout, and custom color schemes.

Quick Start

Include the Script

Add the Streets embed script to your page

Add Listings Widget

Insert a widget div with the user's Streets iD

Customize & Launch

Style the layout, theme, and filters to fit your site

1. Include the Embed Script

Add this script tag to your page's <head> or before the closing </body> tag:

<script src="https://thestreetsapp.com/embed/streets-embed.js"></script>

2. Widget Types

User Events

Display upcoming events from a user

<div data-streets-widget="user-events"
     data-share-id="trusundaze"
     data-layout="grid"
     data-limit="6"
     data-api-key="sk_88bcd3673fed4fe2fab5bd2afc5a1341">
</div>

●Shows active, public events only
●Filters events that started more than 6 hours ago
●Date filtering and search
●Inline checkout integration

User Products

Display products for sale from a user

<div data-streets-widget="user-products"
     data-share-id="trusundaze"
     data-layout="list"
     data-limit="8"
     data-api-key="sk_88bcd3673fed4fe2fab5bd2afc5a1341">
</div>

●Shows active products only
●Respects sale start/end dates
●Low-stock indicators
●Inline checkout integration

Widget Preview

A basic user-events widget rendered with default settings:

Loading widget preview...

For full functionality, use the interactive widget creator below or visit the 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.

Host Domain Required

For the live preview to work, your embed domain must be registered in the Streets app. On this page, the host domain is thestreetsapp.com. Add this domain under Settings > Security > Embed Domains in the Streets app.

Configuration

Widget Type

Streets ID

The user's unique Streets ID

API Key

Found in Settings > Security > Embed Domains

Layout

Theme

Primary Color

Used for gradients and accents

Secondary Color

Used for highlights (optional)

Header Text Color

User name and about text color (optional)

Checkout Mode

How checkout is handled when clicked

Live Preview

Generated HTML Code

<div data-streets-widget="user-events"
     data-share-id=""
     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

3. Layouts & Themes

Grid

data-layout="grid"

List

data-layout="list"

Dark Theme

data-theme="dark"

4. Attribute Reference

Required Attributes

Attribute	Values	Description
`data-streets-widget`	`user-events` \| `user-products`	Widget type
`data-share-id`	String	User's Streets iD
`data-api-key`	String	Embed API key

Common Optional Attributes

Attribute	Default	Description
`data-layout`	grid	`grid` \| `list`
`data-limit`	6	Maximum items to display
`data-theme`	light	`light` \| `dark` \| `minimal`
`data-primary-color`	—	Hex color for gradients and accents
`data-secondary-color`	—	Hex color for highlights
`data-header-text-color`	—	Hex color for user name / about text
`data-show-search`	true	`true` \| `false`
`data-hide-image`	false	`true` \| `false`
`data-hide-price`	false	`true` \| `false`
`data-inline-checkout`	false	`true` to open checkout in a modal

Events-Specific Attributes

Attribute	Default	Description
`data-show-date-filter`	true	Show date range filter
`data-hide-location`	false	Hide event location
`data-sort-by`	date	`date` \| `name` \| `price`
`data-event-button-label`	Get Tickets	Custom button text

Products-Specific Attributes

Attribute	Default	Description
`data-show-low-stock`	false	Show quantity when < 10
`data-sort-by`	name	`name` \| `price`
`data-product-button-label`	Buy Now	Custom button text

5. Code Examples

Events with Inline Checkout & Custom Colors

<div data-streets-widget="user-events"
     data-share-id="trusundaze"
     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="sk_88bcd3673fed4fe2fab5bd2afc5a1341">
</div>

Products with Low Stock & Custom Button

<div data-streets-widget="user-products"
     data-share-id="trusundaze"
     data-layout="grid"
     data-limit="6"
     data-theme="light"
     data-primary-color="#8B5CF6"
     data-secondary-color="#DC2626"
     data-product-button-label="Shop Now"
     data-inline-checkout="true"
     data-show-low-stock="true"
     data-api-key="sk_88bcd3673fed4fe2fab5bd2afc5a1341">
</div>

Finding Your Streets iD

Open the Streets app on your mobile device
Go to your Profile tab
Tap Settings (gear icon)
Look for "Streets iD" or "Share ID" in your profile settings
Copy this ID and use it as the data-share-id value

Your Streets iD is public. Events and products must be set to active for them to appear.

6. Troubleshooting

Widget not displaying

Check that the embed script is loaded and your Streets iD and API key are correct.

No items showing

Verify the user has active, public events or products. Events must not have started more than 6 hours ago.

Styling conflicts

User listings widgets use isolated CSS. Use specific selectors or data attributes to override conflicts.

Try It Live

Enter your Streets iD and API Key on the interactive test page to see every user listings widget configuration in action.

Open User Listings Test Page

Developer Help

User Listings Widgets