Event Embed Widgets

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

Test Configuration

Event Share ID: Settings > My Events > 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 nightlife / 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="event" data-share-id="..." data-api-key="..."></div>

Custom Text + Size

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

Custom Colors

<div data-streets-widget="button" data-type="event" data-share-id="..." data-primary-color="#8B5CF6" data-button-text="Purple Tickets" data-button-size="small" data-api-key="..."></div>

Inline - Full Layout

Complete event display with all details, image, and ticket selection

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

Inline - Hero Layout

Full-width banner style with prominent imagery

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

Inline - Card Layout

Compact card-based presentation

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

Inline - Poster Layout

Flyer left, event meta + checkout right - recommended for partner sites

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

Inline - Compact & Minimal

Sidebar-friendly compact layout and low-profile minimal layout

Compact

Minimal

Inline - Showcase Layout

Gallery-style presentation with custom background

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

Dark Theme

Event widget rendered with data-theme="dark"

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

Image Display Controls

Toggle image visibility and pair with custom backgrounds

Image Visible + Green BG

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

Image Hidden + Amber BG

<div ... data-layout="card" data-show-image="false" data-background-color="#FFF4E6" data-primary-color="#F59E0B" data-height="400px"></div>

Showcase + Custom Purple

<div ... data-layout="showcase" data-show-image="true" data-background-color="#F3E8FF" data-primary-color="#8B5CF6" data-height="450px"></div>

Content Visibility Controls

Toggle seller info, description, button color, and modal size

Hide Seller + Description

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

Custom Button Color

<div data-streets-widget="button" data-type="event" data-share-id="..." data-button-color="#dc2626" data-button-text="Limited Tickets" data-api-key="..."></div>

Large Modal Size

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

Advanced Theming

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

Gradient BG + Card BG

<div ... data-layout="showcase" data-background-gradient= "linear-gradient(135deg,#038882,#065f5b)" data-card-background-color="#f0fdfa" data-secondary-color="#059669" data-height="450px"></div>

Custom Font + Shadow + Border

<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 #038882" data-border-color="#038882" data-border-radius="20px" data-height="400px"></div>

High Contrast + Reduced Motion

<div ... data-layout="full" data-high-contrast="true" data-reduced-motion="true" data-height="500px"></div>
Branding, Text Colors, Spacing & Width

Hide Branding + Custom Text Colors

<div ... data-layout="hero" data-hide-branding="true" data-text-color="#1e293b" data-secondary-text-color="#475569" data-muted-text-color="#94a3b8" data-height="500px"></div>

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-event" data-transition="all 0.3s ease" data-hover-effects="false" data-animation-duration="500ms" data-custom-css= ".my-custom-event { opacity: 0.95; }" data-height="400px"></div>

Event Widget Attribute Reference

All supported data-* attributes for event embeds

Attribute Required Default Values / Description
data-streets-widget Yes - button | inline
data-type Yes - event
data-share-id Yes - Event 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 widgets)
data-surface No card card | transparent
data-show-countdown No false true to show event date badge
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
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