Streets Help Center | Event Support & Guides

What are Product Embed Widgets?

Product embed widgets let you sell Streets products directly on your own website. Add a few lines of HTML and your visitors can view product details, select options, and purchase without leaving your page.

Quick Start

Include the Script

Add the Streets embed script to your page

Add Widget HTML

Insert a widget div with your product share ID

Customize & Launch

Tweak colors, layout, and theme to match your brand

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. Button Widget (Modal)

A button widget displays a styled button on your page. When clicked it opens a modal overlay with the product details, option selection, and checkout flow.

<div data-streets-widget="button"
     data-type="product"
     data-share-id="stay-tru-trucker-e2973ec"
     data-button-text="Buy Now"
     data-api-key="sk_88bcd3673fed4fe2fab5bd2afc5a1341">
</div>

Button Options

Attribute	Default	Description
`data-button-text`	Buy Tickets	Button label text
`data-button-size`	medium	`small` \| `medium` \| `large`
`data-button-color`	—	Override button background color
`data-primary-color`	#038882	Accent color for the widget
`data-modal-size`	medium	`small` \| `medium` \| `large`

3. Inline Widget (Embedded)

An inline widget renders the product directly inside your page at the specified dimensions. It supports multiple layout modes.

<div data-streets-widget="inline"
     data-type="product"
     data-share-id="stay-tru-trucker-e2973ec"
     data-layout="full"
     data-height="500px"
     data-api-key="sk_88bcd3673fed4fe2fab5bd2afc5a1341">
</div>

Available Layouts

`full`

Complete product display with image, description, and purchase action

`compact`

Space-efficient for sidebars and narrow containers

`hero`

Banner-style with prominent product imagery

`card`

Clean card with image overlay pricing

`minimal`

Text-only, low-profile product widget

`showcase`

Gallery-style with custom background and accent colors

4. Theming & Customization

Every visual aspect of the widget can be overridden with data-* attributes.

Color Attributes

Attribute	Description
`data-primary-color`	Main accent color
`data-secondary-color`	Secondary accent
`data-background-color`	Widget background
`data-background-gradient`	CSS gradient value for the background
`data-card-background-color`	Inner card surface color
`data-text-color`	Primary text color
`data-secondary-text-color`	Secondary text
`data-muted-text-color`	Muted / caption text
`data-border-color`	Border color

Typography Attributes

Attribute	Description
`data-font-family`	CSS font-family
`data-font-size`	CSS font-size
`data-font-weight`	CSS font-weight

Layout & Spacing

Attribute	Default	Description
`data-height`	500px	Widget height (inline only)
`data-width`	100%	Widget width (inline only)
`data-border-radius`	—	CSS border-radius
`data-border`	—	CSS border shorthand
`data-padding`	—	CSS padding
`data-margin`	—	CSS margin
`data-spacing`	—	Internal element spacing
`data-box-shadow`	—	CSS box-shadow

Content Visibility

Attribute	Default	Description
`data-theme`	light	`light` \| `dark`
`data-show-image`	true	Show or hide the product image
`data-show-seller`	true	Show or hide the seller info
`data-show-description`	true	Show or hide product description
`data-hide-branding`	false	Hide Streets branding (requires API key)

Animation & Accessibility

Attribute	Default	Description
`data-animation-duration`	300ms	Animation speed
`data-hover-effects`	true	Enable or disable hover effects
`data-transition`	—	CSS transition value
`data-high-contrast`	false	High-contrast accessibility mode
`data-reduced-motion`	false	Disable all animations
`data-custom-css`	—	Inject raw CSS rules
`data-css-class`	—	Add a custom CSS class

Widget Preview

A button widget rendered with default settings:

Loading widget preview...

Use the interactive widget creator below to customise and preview all widget types, or visit the test page.

Interactive Widget Creator

Configure your product widget and preview it live. Copy the generated HTML to use on your site.

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

Product Share ID

API Key

Found in Settings > Security > Embed Domains

Layout

Theme

Height

Primary Color

Show ImageShow SellerDescription

Live Preview

Generated HTML Code

<div data-streets-widget="inline"
     data-type="product"
     data-share-id=""
     data-layout="full"
     data-height="500px"
     data-theme="light">
</div>

5. Dark Theme / Luxury Brand Example

<div data-streets-widget="inline"
     data-type="product"
     data-share-id="stay-tru-trucker-e2973ec"
     data-theme="dark"
     data-layout="showcase"
     data-background-color="#0f172a"
     data-primary-color="#38bdf8"
     data-height="450px"
     data-api-key="sk_88bcd3673fed4fe2fab5bd2afc5a1341">
</div>

6. Fully Styled Example

<div data-streets-widget="inline"
     data-type="product"
     data-share-id="stay-tru-trucker-e2973ec"
     data-layout="showcase"
     data-height="450px"
     data-primary-color="#e11d48"
     data-background-gradient="linear-gradient(135deg,#667eea,#764ba2)"
     data-card-background-color="#fff"
     data-border-radius="16px"
     data-font-family="Georgia, serif"
     data-box-shadow="0 8px 30px rgba(0,0,0,0.12)"
     data-api-key="sk_88bcd3673fed4fe2fab5bd2afc5a1341">
</div>

Try It Live

The interactive test page lets you enter your product Share ID and API Key, then see every widget type and attribute in action.

Open Product Widget Test Page

Developer Help

Product Embed Widgets