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

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

AttributeRequiredDefaultValues / Description
data-streets-widgetYes—button | inline
data-typeYes—event
data-share-idYes—Event 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
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