Streets Help Center | Event Support & Guides

What are Event Embed Widgets?

Event embed widgets let you sell tickets to a Streets event directly on your own website. Add a few lines of HTML and your visitors can browse ticket tiers, select quantities, and check out without ever 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 event share ID

Customize & Launch

Tweak colors, layout, and theme to match your site

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 full ticket-selection and checkout flow.

<div data-streets-widget="button"
     data-type="event"
     data-share-id="tru-sundaze-presents-night-mode-634108f"
     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 event directly inside your page at the specified dimensions. It supports multiple layout modes.

<div data-streets-widget="inline"
     data-type="event"
     data-share-id="tru-sundaze-presents-night-mode-634108f"
     data-layout="full"
     data-height="600px"
     data-api-key="sk_88bcd3673fed4fe2fab5bd2afc5a1341">
</div>

Available Layouts

`full`

Complete event display with image, details, and ticket selection

`hero`

Full-width banner style with prominent imagery

`card`

Compact card with image overlay pricing

`compact`

Space-efficient for sidebars and narrow containers

`minimal`

Text-only, low-profile presentation

`showcase`

Gallery-style with custom background

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 event image
`data-show-seller`	true	Show or hide the organizer info
`data-show-description`	true	Show or hide event 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 event 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

Event 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="event"
     data-share-id=""
     data-layout="full"
     data-height="500px"
     data-theme="light">
</div>

5. Dark Theme Example

<div data-streets-widget="inline"
     data-type="event"
     data-share-id="tru-sundaze-presents-night-mode-634108f"
     data-theme="dark"
     data-layout="card"
     data-height="400px"
     data-api-key="sk_88bcd3673fed4fe2fab5bd2afc5a1341">
</div>

6. Fully Styled Example

<div data-streets-widget="inline"
     data-type="event"
     data-share-id="tru-sundaze-presents-night-mode-634108f"
     data-layout="showcase"
     data-height="450px"
     data-primary-color="#10B981"
     data-background-color="#ECFDF5"
     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 event Share ID and API Key, then see every widget type and attribute in action.

Open Event Widget Test Page

Developer Help

Event Embed Widgets