Streets Help Center | Event Support & Guides

What are HTML Contact Embed Widgets?

Streets HTML contact embed widgets allow visitors to sign up for email alerts, SMS notifications, or both directly on your website. Perfect for building mailing lists, event notifications, and keeping your audience engaged with your content.

Quick Start Guide

Include the Script

Add the Streets embed script to your website's HTML

Add Contact Widget

Insert contact widget elements with your organizer's shareId

Customize & Launch

Style your widgets and start collecting subscriber information

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 Contact Widget Elements

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

Contact Button Widget (Modal)

Opens a modal popup for contact signup

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

Contact Inline Widget (Embedded)

Embeds contact form directly in your page

<div data-streets-widget="contact-inline" 
     data-type="email" 
     data-share-id="your-share-id">
</div>

Important: Share ID Required

Contact widgets require a data-share-id attribute with your organizer's unique share ID. This identifies which organizer the contact signups should be associated with.

You can find your share ID in your Streets app profile settings or business dashboard.

Contact Types

Email Only

Collect email addresses for newsletters, event announcements, and marketing communications.

data-type="email"

SMS Only

Collect phone numbers for SMS alerts and notifications. Requires Streets Connect subscription.

data-type="sms"

Both Email & SMS

Allow visitors to choose email, SMS, or both. Provides maximum flexibility for your audience.

data-type="both"

📱 SMS Requirements & Streets Connect

SMS functionality requires an active Streets Connect subscription. This premium feature enables:

• SMS alert capabilities for your events and products
• Custom phone keywords for text-to-subscribe
• Advanced notification management
• Compliance with SMS regulations and opt-out handling

If SMS is requested but Streets Connect is not active, visitors will see a helpful message with a link to upgrade.

Learn About Streets Connect

Widget Types & Layouts

Contact Button Widgets

Display a button that opens a modal popup for contact signup. Perfect for calls-to-action and minimal page footprint.

• Minimal page footprint
• Customizable button text and colors
• Modal popup with contact form
• Multiple button sizes available

Contact Inline Widgets

Embed the contact form directly in your page. Great for dedicated signup pages and newsletter sections.

• Full embedded contact form
• International phone number support
• Responsive design
• Customizable styling and themes

Customization Options

Basic Customization

Theme Options:

• data-theme="light" - Light theme (default)
• data-theme="dark" - Dark theme
• data-theme="minimal" - Minimal theme

Button Sizes:

• data-size="small" - Compact button
• data-size="medium" - Standard button (default)
• data-size="large" - Large button

Advanced Styling

Customize colors, fonts, and button text with data attributes:

<div data-streets-widget="contact-button"
     data-type="both"
     data-share-id="your-share-id"
     data-button-text="Join Our Newsletter"
     data-primary-color="#10B981"
     data-theme="light"
     data-size="large">
</div>

Colors & Themes

data-primary-color
data-theme
data-background-color

Button Customization

data-button-text
data-size
data-button-icon

Form Options

data-form-title
data-form-description
data-submit-text

Complete Examples

Newsletter Signup Button

A simple email signup button for your blog or website sidebar.

<div data-streets-widget="contact-button"
     data-type="email"
     data-share-id="your-share-id"
     data-button-text="Subscribe to Newsletter"
     data-theme="light"
     data-size="medium">
</div>

Event Alert Signup (Email + SMS)

Allow visitors to choose how they want to receive event notifications.

<div data-streets-widget="contact-inline"
     data-type="both"
     data-share-id="your-share-id"
     data-form-title="Stay Updated"
     data-form-description="Get notified about our upcoming events"
     data-primary-color="#8B5CF6"
     data-theme="light">
</div>

SMS-Only Quick Signup

Collect phone numbers for urgent notifications and alerts.

<div data-streets-widget="contact-button"
     data-type="sms"
     data-share-id="your-share-id"
     data-button-text="Get SMS Alerts"
     data-button-icon="phone"
     data-size="large"
     data-primary-color="#EF4444">
</div>

🛠️ Interactive Contact Widget Creator

Customize your contact widget settings below and see the live preview. Copy the generated code to use on your website.

Widget Configuration

Widget Type

Contact Type

Share ID

Your organizer's unique share ID

Theme

Button Size

Customization

Button Text

Form Title

Form Description

Primary Color

Live Preview

Button Widget • Email & SMS

⏳ Loading widget preview...

Generated HTML Code

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

Usage Instructions

1. Copy the generated HTML code above
2. Include the Streets embed script on your page
3. Paste the HTML code where you want the widget to appear
4. Replace "your-share-id" with your actual organizer share ID

Form Features & Validation

Email Features

• Email format validation
• Duplicate prevention
• Instant confirmation messages
• Integration with your mailing lists

SMS Features

• International phone number support
• Real-time format validation
• TCPA compliance and consent tracking
• Automatic opt-out handling

🔒 Privacy & Consent Compliance

Contact widgets automatically handle privacy compliance and consent requirements:

• Email: Clear opt-in consent with unsubscribe options
• SMS: TCPA-compliant consent language and opt-out instructions
• Data Storage: Secure storage with consent timestamps
• User Rights: Easy unsubscribe and data deletion

All contact forms include appropriate consent checkboxes and legal language automatically.

Testing & Troubleshooting

Test Your Contact Widgets

Use our comprehensive test page to see all contact widget types in action and test your specific share ID:

Open Contact Widget Test Page

Common Issues

Widget not displaying

Ensure the embed script is loaded and check that your share ID is correct and corresponds to an active organizer account.

SMS option not available

SMS functionality requires an active Streets Connect subscription. Visitors will see an upgrade message if SMS is requested but not available.

Form submission errors

Check that required fields are filled, email format is valid, and phone numbers include country codes for international numbers.

Styling conflicts

Use specific CSS selectors or data attributes to override conflicting styles. Contact widgets use isolated CSS to minimize conflicts.

Use Cases & Examples

Event Organizer Website

Add contact widgets to your event pages to build an audience for future events and send updates about schedule changes.

data-type="both" data-form-title="Stay in the Loop"

Business Newsletter

Collect email addresses for your business newsletter, product updates, and promotional announcements.

data-type="email" data-button-text="Join Newsletter"

Emergency Alerts

Use SMS-only widgets for urgent notifications like weather alerts, emergency updates, or time-sensitive announcements.

data-type="sms" data-button-text="Get Alerts"

Blog Sidebar

Add a compact contact button to your blog sidebar to grow your subscriber base without disrupting the reading experience.

data-size="small" data-theme="minimal"

Need More Help?

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

• Test your widgets on our Contact Widget Test Page
• Learn about Streets Connect for SMS features
• Check our Troubleshooting Guide
• View Frequently Asked Questions
• Contact our Support Team

Ready to Start Collecting Contacts?

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

Try live contact widget examples Learn about content embed widgets (events & products)Upgrade to Streets Connect for SMS features

Developer Help

HTML Contact Embed Widgets