Developer Help

HTML Content Embed Widgets

Embed Streets events and products on your website with customizable HTML widgets

What are HTML Content Embed Widgets?

Streets HTML content embed widgets allow you to display and sell event tickets or products directly on your website. Simply add a few lines of HTML code to your site, and visitors can purchase tickets or products without leaving your page.

Quick Start Guide

1

Include the Script

Add the Streets embed script to your website's HTML

2

Add Widget HTML

Insert widget elements with your share ID

3

Customize & Launch

Style your widgets and go live with seamless checkout

Basic Implementation

1. Include the Embed Script

Add this script tag to your website's HTML head or before the closing body tag:

<!-- Include the Streets embed script -->
<script src="https://thestreetsapp.com/embed/streets-embed.js"></script>

2. Add Widget Elements

Insert widget elements wherever you want them to appear on your page:

Button Widget (Modal)

Opens a modal popup for checkout

<div data-streets-widget="button" 
     data-type="event" 
     data-share-id="your-share-id">
</div>

Inline Widget (Embedded)

Embeds checkout directly in your page

<div data-streets-widget="inline" 
     data-type="product" 
     data-share-id="your-share-id"
     data-height="500px">
</div>

📋 Basic Widget Preview

Here's a simple button widget example:

⏳ Loading widget preview...

Note: For full functionality and testing, use the interactive widget creator below or visit the complete test page.

Widget Types & Layouts

Button Widgets

Display a button that opens a modal popup for checkout. Perfect for calls-to-action.

  • • Minimal page footprint
  • • Customizable button text and colors
  • • Modal popup with full checkout
  • • Multiple button sizes available

Inline Widgets

Embed the full checkout experience directly in your page. Great for dedicated event/product pages.

  • • Full embedded checkout
  • • Multiple layout options
  • • Responsive design
  • • Customizable height and styling

Available Layouts

Hero Layout

Full-width design with prominent image display

Showcase Layout

Gallery-style with sophisticated split design

Card Layout

Clean card design with hover effects

Minimal Layout

Compact design for sidebars and tight spaces

Compact Layout

Streamlined layout for product listings

Full Layout

Complete layout with all details visible

Customization Options

Basic Customization

Theme Options:
  • • data-theme="light" - Light theme (default)
  • • data-theme="dark" - Dark theme
  • • data-theme="minimal" - Minimal theme
Layout Options:
  • • data-layout="hero" - Hero layout
  • • data-layout="card" - Card layout
  • • data-layout="minimal" - Minimal layout

Advanced Styling

Customize colors, fonts, and effects with data attributes:

<div data-streets-widget="inline"
     data-type="event"
     data-share-id="your-share-id"
     data-primary-color="#8B5CF6"
     data-secondary-color="#F59E0B"
     data-background-color="#F3F4F6"
     data-border-radius="16px"
     data-font-family="Inter, sans-serif">
</div>

Colors & Backgrounds

  • data-primary-color
  • data-background-color
  • data-background-gradient
  • data-text-color

Typography

  • data-font-family
  • data-font-size
  • data-font-weight

Layout & Effects

  • data-border-radius
  • data-box-shadow
  • data-padding
  • data-custom-css

Interactive Widget Creator

Build Your Widget

Use our interactive widget creator to generate the perfect embed code for your needs:

Examples & Use Cases

Event Landing Page

Use a hero layout inline widget to create a stunning event landing page with full ticket purchasing capabilities.

data-layout="hero" data-height="600px"

Blog Post CTA

Add a button widget to your blog posts to promote related events without disrupting the reading experience.

data-streets-widget="button" data-button-text="Get Tickets"

Sidebar Widget

Use a minimal or compact layout in your website sidebar to promote upcoming events or featured products.

data-layout="minimal" data-height="300px"

Product Showcase

Embed products directly in your content with the showcase layout for an elegant gallery-style presentation.

data-layout="showcase" data-show-image="true"

Testing & Troubleshooting

Test Your Widgets

Use our comprehensive test page to see all widget types in action and test your specific event or product IDs:

Open Widget Test Page

Common Issues

Widget not displaying

Ensure the embed script is loaded and check that your share ID is correct and publicly accessible.

Styling conflicts

Use specific CSS selectors or the data-custom-css attribute to override conflicting styles.

Mobile responsiveness

Widgets are responsive by default, but you can customize mobile behavior with CSS media queries in data-custom-css.

Need More Help?

If you're experiencing issues with embed widgets, you can:

Ready to Get Started?

Now that you understand embed widgets, you might want to:

Explore live examples on our test pageLearn how to create events to embedLearn how to create products to embed

Related Resources

HTML Contact Embed Widgets

Learn about embedding contact signup forms for email and SMS alerts

Widget Test Page

Interactive test page with live examples of all widget types

How to Create an Event

Learn how to create events that can be embedded

Listing Products

Learn how to create products that can be embedded