Product Embed Widgets

Every product widget type, layout, and configuration option in one place

Test Configuration

Product Share ID: Settings > My Products > long-press to reveal
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).
Share ID: -
API Key: required

Partner-Style Canvas (v2.3)

Dark editorial sites - outline & inverted CTAs, transparent surface

Outline button

Inverted button

Poster layout

Button Widgets

Trigger a modal checkout overlay when clicked

Default Button

<div data-streets-widget="button" data-type="product" data-share-id="..." data-api-key="..."></div>

Custom Text + Size

<div data-streets-widget="button" data-type="product" data-share-id="..." data-button-text="Buy Now" data-button-size="large" data-api-key="..."></div>

Custom Colors

<div data-streets-widget="button" data-type="product" data-share-id="..." data-primary-color="#e11d48" data-button-text="Shop" data-button-size="small" data-api-key="..."></div>

Inline - Full Layout

Complete product display with image, description, and purchase action

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

Inline - Compact Layout

Space-efficient product card for sidebars and narrow containers

<div data-streets-widget="inline" data-type="product" data-share-id="..." data-layout="compact" data-height="350px" data-api-key="..."></div>

Inline - Hero Layout

Banner-style product display with prominent imagery

<div data-streets-widget="inline" data-type="product" data-share-id="..." data-layout="hero" data-height="500px" data-api-key="..."></div>

Inline - Card Layout

Clean card presentation with image overlay pricing

<div data-streets-widget="inline" data-type="product" data-share-id="..." data-layout="card" data-height="400px" data-api-key="..."></div>

Inline - Minimal Layout

Text-only, low-profile product widget

<div data-streets-widget="inline" data-type="product" data-share-id="..." data-layout="minimal" data-height="300px" data-api-key="..."></div>

Inline - Poster Layout (v2.3)

Flyer left, details + checkout right - recommended for editorial partner sites

<div data-streets-widget="inline" data-type="product" data-share-id="..." data-layout="poster" data-height="520px" data-theme="dark" data-api-key="..."></div>

Inline - Showcase Layout

Gallery-style with custom background and accent colors

<div data-streets-widget="inline" data-type="product" data-share-id="..." data-layout="showcase" data-height="450px" data-primary-color="#e11d48" data-background-color="#fff1f2" data-border-radius="16px" data-api-key="..."></div>

Dark Theme / Luxury Brand

Product widget rendered with data-theme="dark"

Dark Card

<div ... data-theme="dark" data-layout="card" data-height="400px"></div>

Dark Compact

<div ... data-theme="dark" data-layout="compact" data-primary-color="#f59e0b" data-height="350px"></div>

Dark Showcase

<div ... data-theme="dark" data-layout="showcase" data-background-color="#0f172a" data-primary-color="#38bdf8" data-height="450px"></div>

Image Display Controls

Toggle image, seller, and description visibility

Image Visible + Custom BG

<div ... data-layout="card" data-show-image="true" data-background-color="#ecfdf5" data-height="400px"></div>

Image Hidden

<div ... data-layout="full" data-show-image="false" data-height="400px"></div>

Hide Seller + Description

<div ... data-layout="card" data-show-seller="false" data-show-description="false" data-height="350px"></div>

Advanced Theming

Custom fonts, gradients, shadows, accessibility, and branding controls

Gradient BG + Card BG + Secondary

<div ... data-layout="showcase" data-background-gradient= "linear-gradient(135deg,#667eea,#764ba2)" data-card-background-color="#fff" data-secondary-color="#a78bfa" data-text-color="#1e293b" data-secondary-text-color="#64748b" data-muted-text-color="#94a3b8" data-height="450px"></div>

Font + Shadow + Border + Color

<div ... data-layout="card" data-font-family="Georgia, serif" data-font-size="15px" data-font-weight="500" data-box-shadow= "0 8px 30px rgba(0,0,0,0.12)" data-border="2px solid #e11d48" data-border-color="#e11d48" data-border-radius="20px" data-height="400px"></div>

Accessibility + Branding

<div ... data-layout="full" data-high-contrast="true" data-reduced-motion="true" data-hide-branding="true" data-height="500px"></div>
Width, Spacing, CSS Customization & Button Color

Custom Width + Padding + Margin

<div ... data-layout="card" data-width="400px" data-padding="24px" data-margin="0 auto" data-spacing="12px" data-height="400px"></div>

CSS Class + Transition + Hover

<div ... data-layout="card" data-css-class="my-custom-product" data-transition="all 0.3s ease" data-hover-effects="false" data-animation-duration="500ms" data-custom-css= ".my-custom-product { opacity:0.95; }" data-height="400px"></div>

Button Color + Modal Size

<div data-streets-widget="button" data-type="product" data-share-id="..." data-button-color="#7c3aed" data-button-text="Add to Cart" data-modal-size="large" data-api-key="..."></div>

Product Widget Attribute Reference

All supported data-* attributes for product embeds

Attribute Required Default Values / Description
data-streets-widget Yes - button | inline
data-type Yes - product
data-share-id Yes - Product share ID
data-api-key Yes - Embed API key (sk_...)
data-theme No light light | dark | minimal | auto
data-layout No full full | compact | hero | card | minimal | showcase | poster
data-button-variant No outline (dark) / solid (light) solid | outline | inverted
data-show-price No below below | inside | hidden (button only)
data-surface No card card | transparent
data-height No 500px CSS height value (inline only)
data-width No 100% CSS width value (inline only)
data-button-text No Buy Tickets Custom button label (default changes by type)
data-button-color No - Custom button color override
data-button-size No medium small | medium | large
data-modal-size No medium small | medium | large
data-show-image No true true | false
data-show-seller No true true | false
data-show-description No true true | false
data-primary-color No #038882 Hex / rgb / hsl
data-secondary-color No - Secondary accent color
data-background-color No - Background color
data-background-gradient No - CSS gradient value
data-card-background-color No - Card surface color
data-text-color No - Primary text color
data-secondary-text-color No - Secondary text color
data-muted-text-color No - Muted / caption text color
data-border-color No - Border color
data-border-radius No - CSS border-radius
data-border No - CSS border shorthand
data-padding No - CSS padding
data-margin No - CSS margin
data-spacing No - Internal spacing
data-font-family No - CSS font-family
data-font-size No - CSS font-size
data-font-weight No - CSS font-weight
data-box-shadow No - CSS box-shadow
data-transition No - CSS transition
data-animation-duration No 300ms Animation speed
data-hover-effects No true true | false
data-custom-css No - Inject raw CSS
data-css-class No - Extra CSS class name
data-hide-branding No false true to hide Streets branding (requires API key)
data-high-contrast No false true for high-contrast mode
data-reduced-motion No false true to disable animations