🚀 Streets Embed System

Comprehensive test suite for all Streets embed widgets - Events, Products, and Contact forms

📚 Recent Updates & Improvements

Latest fixes and enhancements to the Streets embed system

✅

Event Ticket Options Support

Fixed: Event embeds now properly handle associated ticket options. Each ticket can have its own set of options that are collected and validated during checkout.

  • Per-ticket option collection and validation
  • Proper option response formatting for conflict checking
  • Support for required and optional ticket-specific options
✅

Event Reservation Handling

Implemented: Comprehensive event reservation support with time/date selectors and proper business logic, similar to product reservations.

  • Per-ticket reservation date and time selection
  • Integration with existing reservation interval API
  • Proper timestamp calculation for conflict checking
  • Validation of reservation requirements before checkout
✅

Server-Side Conflict Checking

Enhanced: Conflict checking is now performed server-side first, ensuring reliable validation for both events and products before checkout begins.

  • Multiple ticket reservation conflict checking
  • Option-based conflict detection
  • Uses existing hosting-checkreservationconflict endpoint
  • Proper error handling and user feedback
✅

Flutter Anonymous User Navigation

Fixed: Anonymous users now see proper settings/inbox pages after registration. Pages properly refresh when authentication state changes.

  • Replaced static context.read() calls with BlocBuilder
  • Reactive UI updates when user authentication changes
  • Proper state management for anonymous to authenticated transitions

🚀 Implementation Notes

All updates maintain backward compatibility and follow the same patterns as the main Streets application:

  • Server-First Validation: Conflict checking happens server-side before client-side processing
  • Multiple Ticket Support: Events can have multiple tickets, each with their own options and reservations
  • Proper Data Formatting: All data is formatted to match the expectations of existing APIs

⚙️ Test Configuration

💡 Finding Your IDs:
• Event/Product Share IDs: Go to Settings > My Events or My Products, then long press on any item to reveal its Share ID
• Streets iD: Navigate to Settings > Streets iD in the app
• API Key: Go to Settings > Security > Embed Domains to create API keys for your domains

🔧 Testing Required Options:
• The "Proceed to Checkout" button will remain disabled until all required options are completed
• Try using events or products that have required associated options to test this validation

🔑 API Key Authentication:
• API keys are REQUIRED for all embed widgets
• Create API keys in Settings > Security > Embed Domains
• Widgets will show an error state without a valid API key
⚠️ Required: sk_[32-character-hash]
Event: -
Product: -
Profile: -
API Key: ⚠️ Required

✨ Feature Overview

Complete Streets embed system with advanced features

🎫

Event Embeds

Beautiful event displays with ticket selection, options, reservations, and checkout integration.

🛍️

Product Embeds

Elegant product showcases with quantity selection, customization options, and seamless purchasing.

📧

Contact Forms

Lead capture forms for email and SMS with consent management and validation.

🎨

Advanced Theming

Comprehensive styling options with multiple themes and custom CSS support.

⚡

Real-time Updates

Dynamic pricing, availability checks, and conflict resolution for reservations.

🔒

Security & Validation

Built-in security measures, input validation, and error handling.

🎫 Event Embeds

Test event widgets with ticket selection, options, and reservations

Button Widgets

Basic Event Button

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

Custom Button Text

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

Custom Colors

<div data-streets-widget="button" data-type="event" data-share-id="test-share-id" data-primary-color="#8B5CF6" data-button-text="Purple Button" data-api-key="your-api-key"> </div>

Full Layout Widget

Event Inline (Full Layout)

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

Hero Layout Widget

Event Hero Layout

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

Card Layout Widget

Event Card Layout

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

Event Showcase Layout Widget

Event Showcase - Concert Style

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

🛍️ Product Embeds

Test product widgets with options, quantities, and reservations

Button Widgets

Basic Product Button

<div data-streets-widget="button" data-type="product" data-share-id="test-share-id" data-api-key="your-api-key"> </div>

Custom Button Text

<div data-streets-widget="button" data-type="product" data-share-id="test-share-id" data-button-text="Buy Now" data-api-key="your-api-key"> </div>

Custom Styling

<div data-streets-widget="button" data-type="product" data-share-id="test-share-id" data-primary-color="#F59E0B" data-button-text="Shop Now" data-api-key="your-api-key"> </div>

Compact Layout Widget

Product Inline (Compact)

<div data-streets-widget="inline" data-type="product" data-share-id="test-share-id" data-layout="compact" data-height="220px" data-api-key="your-api-key"> </div>

Showcase Layout Widget

Product Showcase - Premium Style

<div data-streets-widget="inline" data-type="product" data-share-id="test-share-id" data-layout="showcase" data-primary-color="#8B5CF6" data-background-color="#F8FAFC" data-border-radius="20px" data-height="450px" data-api-key="your-api-key"> </div>

Minimal Layout Widget

Product Minimal - Enhanced

<div data-streets-widget="inline" data-type="product" data-share-id="test-share-id" data-layout="minimal" data-height="300px" data-api-key="your-api-key"> </div>

📧 Contact Embeds

Test contact forms for email and SMS lead capture

Contact Button Widgets

Email Contact Button

<div data-streets-widget="contact-button" data-type="email" data-share-id="test-share-id" data-api-key="your-api-key"> </div>

SMS Contact Button

<div data-streets-widget="contact-button" data-type="sms" data-share-id="test-share-id" data-api-key="your-api-key"> </div>

Both Contact Button

<div data-streets-widget="contact-button" data-type="both" data-share-id="test-share-id" data-api-key="your-api-key"> </div>

Combined Contact Form

Email & SMS Contact Form

<div data-streets-widget="contact-inline" data-type="both" data-share-id="test-share-id" data-height="500px" data-api-key="your-api-key"> </div>

Email Only Form

Email Inline Form

<div data-streets-widget="contact-inline" data-type="email" data-share-id="test-share-id" data-height="350px" data-api-key="your-api-key"> </div>

🎯 Multiple Widget Types

Test all three widget types together

All Widget Types (Buttons)

Event Button

<div data-streets-widget="button" data-type="event" data-share-id="test-share-id" data-button-text="Event Tickets" data-api-key="your-api-key"> </div>

Product Button

<div data-streets-widget="button" data-type="product" data-share-id="test-share-id" data-button-text="Buy Product" data-api-key="your-api-key"> </div>

Contact Button

<div data-streets-widget="contact-button" data-type="email" data-share-id="test-share-id" data-api-key="your-api-key"> </div>

🎨 Themed Examples

Test different themes and custom styling options

Dark Theme Event

Dark Theme Event Widget

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

Custom Colors & Styling

Luxury Brand Style Product

<div data-streets-widget="inline" data-type="product" data-share-id="test-share-id" data-primary-color="#DC2626" data-background-color="#FEF2F2" data-border-radius="24px" data-layout="hero" data-height="500px"> </div>

🖼️ Image Display Examples

Control image visibility with custom backgrounds for enhanced visual appeal

Event Widgets - Image Display

Event With Image

<div data-streets-widget="inline" data-type="event" data-share-id="test-share-id" data-layout="card" data-show-image="true" data-background-color="#E8F5E8" data-height="400px"> </div>

Event Without Image

<div data-streets-widget="inline" data-type="event" data-share-id="test-share-id" data-layout="card" data-show-image="false" data-background-color="#FFF4E6" data-primary-color="#F59E0B" data-height="400px"> </div>

Event Showcase Style

<div data-streets-widget="inline" data-type="event" data-share-id="test-share-id" data-layout="showcase" data-show-image="true" data-background-color="#F3E8FF" data-primary-color="#8B5CF6" data-height="450px"> </div>

Product Widgets - Image Display

Product With Image

<div data-streets-widget="inline" data-type="product" data-share-id="test-share-id" data-layout="card" data-show-image="true" data-background-color="#FEF2F2" data-height="400px"> </div>

Product Without Image

<div data-streets-widget="inline" data-type="product" data-share-id="test-share-id" data-layout="card" data-show-image="false" data-background-color="#ECFDF5" data-primary-color="#10B981" data-height="400px"> </div>

Product Minimal Style

<div data-streets-widget="inline" data-type="product" data-share-id="test-share-id" data-layout="minimal" data-show-image="true" data-background-color="#F0F9FF" data-primary-color="#0EA5E9" data-height="250px"> </div>

🚨 Error State Testing

Test error handling and validation

Invalid Event ID

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

Missing Required Attributes

<div data-streets-widget="button"> </div>

Invalid Contact Share ID

<div data-streets-widget="contact-button" data-type="email" data-share-id="invalid-share-id"> </div>

📖 Integration Guide

Complete guide for implementing Streets embeds

Basic Setup

Include the Streets embed script in your HTML:

<!-- Include the Streets embed script --> <script src="https://thestreetsapp.com/embed/streets-embed.js"></script> <!-- Event embed example --> <div data-streets-widget="button" data-type="event" data-share-id="your-share-id"> </div> <!-- Product embed example --> <div data-streets-widget="inline" data-type="product" data-share-id="your-share-id" data-layout="card" data-height="400px"> </div> <!-- Contact form example --> <div data-streets-widget="contact-inline" data-type="both" data-share-id="your-share-id" data-height="500px"> </div>

Available Widgets

  • Event/Product Buttons: data-streets-widget="button"
  • Event/Product Inline: data-streets-widget="inline"
  • Contact Buttons: data-streets-widget="contact-button"
  • Contact Forms: data-streets-widget="contact-inline"

Basic Configuration

  • data-streets-widget: "button" or "inline" (required)
  • data-type: "event" or "product" (required)
  • data-share-id: Your event or product share ID (required)
  • data-theme: "light", "dark", or "minimal"
  • data-button-text: Custom button text
  • data-button-size: "small", "medium", or "large"
  • data-modal-size: "small", "medium", or "large"
  • data-layout: "full", "compact", "hero", "card", "minimal", or "showcase" (inline only)

Layout Options

  • full: Complete layout with all details
  • compact: Condensed view for tight spaces
  • hero: Full-width banner style
  • card: Card-based design
  • minimal: Minimal information display
  • showcase: Gallery-style presentation

Advanced Theming

  • data-primary-color: Custom primary color (hex, rgb, hsl)
  • data-secondary-color: Custom secondary color
  • data-background-color: Custom background color
  • data-background-gradient: Custom gradient background
  • data-card-background-color: Custom card background
  • data-text-color: Custom text color
  • data-secondary-text-color: Custom secondary text color
  • data-muted-text-color: Custom muted text color
  • data-border-color: Custom border color
  • data-border-radius: Custom border radius
  • data-box-shadow: Custom shadow effects
  • data-font-family: Custom font family
  • data-font-size: Custom font size
  • data-font-weight: Custom font weight
  • data-padding: Custom padding
  • data-margin: Custom margin
  • data-transition: Custom transitions
  • data-custom-css: Inject custom CSS
  • data-css-class: Add custom CSS class

Content Controls

  • data-height: Widget height (inline only)
  • data-width: Widget width (inline only)
  • data-show-image: "true" or "false" - Control image visibility
  • data-show-seller: "true" or "false" - Show/hide seller information
  • data-show-description: "true" or "false" - Show/hide description

Accessibility Features

  • data-high-contrast: "true" for high contrast mode
  • data-reduced-motion: "true" to disable animations

Premium Features

  • data-hide-branding: "true" to hide Streets branding (requires API key)
  • data-api-key: Your premium API key