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

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 — 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

AttributeRequiredDefaultValues / Description
data-streets-widgetYes—button | inline
data-typeYes—product
data-share-idYes—Product share ID
data-api-keyYes—Embed API key (sk_...)
data-themeNolightlight | dark | minimal
data-layoutNofullfull | compact | hero | card | minimal | showcase
data-heightNo500pxCSS height value (inline only)
data-widthNo100%CSS width value (inline only)
data-button-textNoBuy TicketsCustom button label (default changes by type)
data-button-colorNo—Custom button color override
data-button-sizeNomediumsmall | medium | large
data-modal-sizeNomediumsmall | medium | large
data-show-imageNotruetrue | false
data-show-sellerNotruetrue | false
data-show-descriptionNotruetrue | false
data-primary-colorNo#038882Hex / rgb / hsl
data-secondary-colorNo—Secondary accent color
data-background-colorNo—Background color
data-background-gradientNo—CSS gradient value
data-card-background-colorNo—Card surface color
data-text-colorNo—Primary text color
data-secondary-text-colorNo—Secondary text color
data-muted-text-colorNo—Muted / caption text color
data-border-colorNo—Border color
data-border-radiusNo—CSS border-radius
data-borderNo—CSS border shorthand
data-paddingNo—CSS padding
data-marginNo—CSS margin
data-spacingNo—Internal spacing
data-font-familyNo—CSS font-family
data-font-sizeNo—CSS font-size
data-font-weightNo—CSS font-weight
data-box-shadowNo—CSS box-shadow
data-transitionNo—CSS transition
data-animation-durationNo300msAnimation speed
data-hover-effectsNotruetrue | false
data-custom-cssNo—Inject raw CSS
data-css-classNo—Extra CSS class name
data-hide-brandingNofalsetrue to hide Streets branding (requires API key)
data-high-contrastNofalsetrue for high-contrast mode
data-reduced-motionNofalsetrue to disable animations