Streets Contact Embed Widget Test

📧 Contact Embed Widgets

Capture leads and build your audience with beautiful, customizable contact forms

📧

Email Alerts

Collect email addresses for event notifications and updates. No subscription required.

📱

SMS Alerts

Capture phone numbers for text notifications. Requires active Streets Connect subscription.

🎯

Combined Signup

Offer both email and SMS options in a single, beautiful form with consent management.

⚙️ Test Configuration Guide

Contact embeds use the shareId (not userId) to identify the organizer/business

🎯 Quick Start

Use the Configuration Panel (top-left) to update test shareId
Enter a valid shareId for testing
Click "Update Widgets" to apply changes
All contact widgets will update automatically

⚠️ Important Notes

SMS Features: Require active Streets Connect subscription
shareId Required: Contact embeds use shareId instead of event/product IDs
Consent Management: SMS signup includes proper consent checkboxes
Validation: Phone numbers validated with international formatting

📧 Email Contact Widgets

Collect email addresses for event notifications and updates

Basic Email Button

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

Custom Email Button

<div data-streets-widget="contact-button" 
     data-type="email" 
     data-share-id="testshare123"
     data-button-text="Get Email Updates"
     data-button-color="#038882"
     data-button-size="large"
     data-api-key="your-api-key">
</div>
                

Email Inline Form

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

📱 SMS Contact Widgets

Collect phone numbers for SMS notifications. Requires Streets Connect subscription

Basic SMS Button

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

Custom SMS Button

<div data-streets-widget="contact-button" 
     data-type="sms" 
     data-share-id="testshare123"
     data-button-text="Get Text Alerts"
     data-button-color="#FF6B35"
     data-button-size="large"
     data-api-key="your-api-key">
</div>
                

SMS Inline Form

<div data-streets-widget="contact-inline" 
     data-type="sms" 
     data-share-id="testshare123"
     data-height="400px"
     data-api-key="your-api-key">
</div>
                

🎯 Combined Contact Widgets

Offer both email and SMS signup options in a single form

Combined Button

<div data-streets-widget="contact-button" 
     data-type="both" 
     data-share-id="testshare123"
     data-button-text="Stay Connected"
     data-api-key="your-api-key">
</div>
                

Combined Inline Form

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

🎨 Themed Contact Widgets

Test different themes and custom styling options

Dark Theme

<div data-streets-widget="contact-inline" 
     data-type="email" 
     data-share-id="testshare123"
     data-theme="dark"
     data-height="400px"
     data-api-key="your-api-key">
</div>
                

Custom Colors

<div data-streets-widget="contact-inline" 
     data-type="both" 
     data-share-id="testshare123"
     data-primary-color="#8B5CF6"
     data-background-color="#F3F4F6"
     data-border-radius="16px"
     data-height="450px"
     data-api-key="your-api-key">
</div>
                

🚨 Error State Testing

Test error handling and validation scenarios

Invalid shareId

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

Missing shareId

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

SMS Without Subscription

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

📖 Integration Instructions

Complete guide for implementing Streets contact embeds

Basic Setup

To use Streets contact embed widgets on your website:

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

<!-- Add a contact button widget -->
<div data-streets-widget="contact-button" 
     data-type="email" 
     data-share-id="your-share-id">
</div>

<!-- Add a contact inline widget -->
<div data-streets-widget="contact-inline" 
     data-type="both" 
     data-share-id="your-share-id"
     data-height="400px">
</div>
        

Available Attributes

Basic Configuration

data-streets-widget: "contact-button" or "contact-inline" (required)
data-type: "email", "sms", or "both" (required)
data-share-id: Your business/organizer shareId (required)
data-theme: "light", "dark", or "minimal"
data-button-text: Custom button text
data-button-size: "small", "medium", or "large"
data-height: Widget height (inline only)

Contact-Specific Options

data-title: Custom form title
data-description: Custom form description
data-email-placeholder: Custom email input placeholder
data-phone-placeholder: Custom phone input placeholder
data-name-required: "true" to require name field
data-success-message: Custom success message

Advanced Theming

data-primary-color: Custom primary color
data-background-color: Custom background color
data-text-color: Custom text color
data-border-radius: Custom border radius
data-font-family: Custom font family

📧 Streets Contact Embed Widgets