{isLoading &&

Loading widget...

} ); } // Usage function App() { const addressData = { street1: "1001 Woodward Ave", city: "Detroit", state: "MI", zip: "48226" }; const config = { resultLayout: 'checkout', primaryColor: '#1274f9', campaignId: 'react-app' }; return (

Internet Service Finder

); } export default App; ``` ### Example 4: Vue.js Integration Integrate the widget into a Vue.js application: ```vue HumWidget.vue theme={null} ``` ## Address Data Format The widget expects address data in a specific JSON format: ```json theme={null} { "street1": "1001 Woodward Ave", "street2": "Suite 500", "city": "Detroit", "state": "MI", "zip": "48226", "latitude": 42.3317, "longitude": -83.0479 } ``` For complete field specifications, see the [Address Data Format](/widget-integration/overview#address-data-format) section in the overview. ## Address Validation The widget validates addresses using these rules: * **street1**: Primary address (street number and name) * **zip**: 5 or 9-digit ZIP code format (12345 or 12345-6789) * **street2**: Unit/apartment information (no specific format required) * **city**: City name (recommended for improved address match quality) * **state**: 2-letter US state code (recommended for improved address match quality) * **latitude/longitude**: Must be provided together and within US territorial bounds * Address must be geocodable by our system * Address must be serviceable by at least one provider * Coordinates must be within the bounds of the US and its territories ## Troubleshooting **Check these common issues:** * Verify the container div exists on the page * Ensure the widget script loads before your initialization code * Check that your API key is valid and properly formatted * Look for JavaScript errors in the browser console **Expected behavior:** The widget should initialize within 2-3 seconds of calling `hum.initialize()`. **Common address issues:** * Ensure the required fields (`street1` and `zip`) are provided * Include `city` and `state` when available to improve address match quality * Verify the state is a valid 2-letter US state code * Check that the ZIP code is in the correct format (12345 or 12345-6789) * Make sure the address is a real, serviceable US address **Expected behavior:** Valid addresses should return service options within 5-10 seconds. **Optimization tips:** * Include latitude and longitude coordinates when available * Use the summary layout for faster loading when full e-commerce isn't needed * Ensure the widget script is loaded asynchronously * Check network connectivity and CDN availability **Expected behavior:** The widget should load service options in under 10 seconds for most addresses. **Common integration issues:** * Verify the widget instance is stored globally if accessed by other scripts * Check for conflicts with other JavaScript libraries * Ensure proper error handling for failed API calls * Verify the container element is visible and properly sized **Expected behavior:** The widget should integrate seamlessly without affecting other page functionality. If issues persist, check the browser console for detailed error messages and contact support with the specific error details. ## Best Practices Always implement proper error handling for API calls: ```javascript theme={null} hum.initialize() .then(() => console.log('Success')) .catch(error => { console.error('Error:', error); // Show user-friendly error message }); ``` Use loading states to improve user experience: ```javascript theme={null} button.textContent = 'Loading...'; button.disabled = true; try { await hum.internetServiceFromAddress(addressData); } finally { button.textContent = 'Check Availability'; button.disabled = false; } ``` * Load the widget script asynchronously * Include latitude/longitude coordinates for faster results * Cache widget instances when using multiple widgets * Monitor console logs during development * Test with various address formats and edge cases * Provide clear error messages * Use appropriate layouts for your use case * Include campaign IDs for better tracking ## Next Steps Learn how to listen for and handle events from the widget Explore all available configuration parameters Integrate the widget into mobile applications Contact our team for integration assistance # Widget Overview Source: https://docs.letshum.com/widget-integration/overview Learn about the Hum widget's capabilities, features, and integration options # Hum Widget Overview The Hum widget is a turnkey solution for integrating internet service provider discovery and e-commerce functionality into your website or mobile application. With minimal setup, you can provide your users with address-specific internet plans, pricing, and the ability to order service directly. Hum widget checkout layout showing the complete e-commerce flow

Hum widget checkout layout showing the complete e-commerce flow

## What is the Hum Widget? The Hum widget is a fully-featured, embeddable component that enables your users to: * **Search for internet service** by entering their address * **Compare plans** from 200+ internet service providers nationwide * **Filter options** by technology, speed, price, and provider * **Complete checkout** to order internet service directly * **Save plans** for later comparison and review * **View provider details** including contact information and coverage areas The widget handles all the complexity of provider data, pricing, availability checking, and checkout flows. All you need to do is embed it. ## Key Features Instant address validation and service availability from 200+ providers Choose from checkout, summary, or plans layouts to match your use case Adapts seamlessly to desktop, tablet, and mobile devices Configure colors and layout to match your brand identity Complete shopping cart and checkout flow for participating providers Listen to order completion, plan saves, and other user actions ## Architecture The Hum widget is built as a React single-page application using client-side rendering. It's designed to be: * **Performant**: Loads asynchronously without blocking page rendering * **Lightweight**: Minimal impact on your page load times * **Secure**: All API communication is encrypted and authenticated * **Reliable**: Hosted on a global CDN with 99.9% uptime The widget communicates with the Hum API backend to fetch real-time provider data, validate addresses, and process orders. Hum technology architecture diagram

## Layout Options The widget supports three layout modes to suit different use cases and user experiences: The checkout layout provides a full e-commerce experience with a shopping cart, allowing users to select plans, add-ons, and complete the ordering process. **Best for:** * Users actively seeking new internet service * Dedicated pages that support multi-step flows * Conversion-focused implementations * Real estate, mortgage, and relocation apps Checkout layout showing full shopping cart experience

Checkout layout showing full shopping cart experience

**Features:** * Interactive shopping cart * Multiple provider selection * Add-on services (TV, phone) * Complete checkout flow * Order confirmation The summary layout presents available internet service options in a clean, compact table format with links to provider websites. **Best for:** * Passive information discovery * Limited screen space * Quick provider comparisons * Property listing websites Summary layout showing provider options in table format

Summary layout showing provider options in table format

**Features:** * Compact table view * Sort by speed, price, provider * Filter by technology type * Direct links to providers * Minimal screen real estate The plans layout displays provider options as cards with affiliate links, offering a middle ground between checkout and summary layouts. **Best for:** * Visual comparisons * Directing users to provider sites * Affiliate marketing use cases * Streamlined user experience Plans layout showing provider cards with affiliate links

Plans layout showing provider cards with affiliate links

**Features:** * Card-based design * Visual plan comparisons * Provider logos and branding * Quick filtering options * Affiliate link tracking ## Integration Methods Choose the integration method that best fits your technical stack and requirements: Embed the widget using JavaScript and HTML. Ideal for websites where you control the codebase. **Best for:** Web applications, landing pages, React/Vue apps Load the widget via URL in a mobile WebView. Perfect for native and hybrid mobile apps. **Best for:** iOS, Android, React Native, Flutter apps Both integration methods provide the same features and user experience. Choose based on your technical environment. ## Configuration Options The Hum widget is highly configurable. All options are optional and have sensible defaults. ### Display & Layout Controls the visual presentation of internet service results. **Accepted Values:** * `"summary"` - Compact table format with affiliate links * `"checkout"` - Full shopping cart and e-commerce experience (default) * `"plans"` - Card layout with affiliate links **Default:** `"checkout"` Customizes the primary color for buttons and UI elements throughout the widget. **Format:** Hex color code (e.g., `"#1274f9"`) **Default:** `"#1274f9"` The color will be automatically darkened by 10% for hover states to ensure consistent user experience. Controls whether users can save and unsave internet plans for later comparison. **Default:** `false` **When enabled:** * Save/unsave button appears on plan cards * Triggers `humPlanSaved` and `humPlanUnsaved` events * Allows users to bookmark plans for future reference Enable this feature if you want to track user interest in specific plans or provide a "favorites" list functionality. Controls whether the widget renders its own address entry form above the results. **Default:** `false` **When enabled:** * An address field with autocomplete appears above the results * Selecting a suggestion starts a new session and reloads results for that address * The visitor can look up a different address without you rebuilding the widget Leave this off when your page already collects the address and passes it to `internetServiceFromAddress()`. Turn it on when you want the widget to handle address entry itself, such as on a standalone landing page. ### Tracking & Analytics Identifier for tracking attribution and analytics purposes. Associate widget sessions with specific marketing campaigns, traffic sources, or user segments. **Default:** `undefined` Include campaign identifiers like `"Q4-2024-landing-page"` or `"email-campaign-12345"` to track which sources generate the most conversions. ### Filtering & Limiting Restricts results to specific internet service providers using FCC provider IDs. **Use cases:** * Partnership agreements * White-label implementations * Regional focus Use [Get FCC Service Providers](/api-reference/informational/get-fcc-service-providers) to retrieve internet provider IDs programmatically. Designates one or more providers to display more prominently as top plan recommendations using FCC provider IDs. **Accepted Values:** Single provider ID string or array of provider ID strings **Impact:** Featured at the top of search results with visual prominence Filters results to show only specific connection technology types. **Valid options:** `Fiber`, `Cable`, `Wireless`, `Satellite`, `DSL`, `Other` Combine with `limitProviders` for precise control over displayed plans. ### Customer Data Pre-population Pre-populates customer information in the shopping cart to streamline checkout. **Available fields:** * `firstName` - Customer's first name * `lastName` - Customer's last name * `email` - Customer's email address * `phoneNumber` - Customer's phone number Pre-populating customer data can increase conversion rates by reducing friction in the checkout flow. ## Address Data Format The widget expects address data in a specific JSON format: ```json theme={null} { "street1": "1001 Woodward Ave", "street2": "Suite 500", "city": "Detroit", "state": "MI", "zip": "48226", "latitude": 42.3317, "longitude": -83.0479 } ``` ### Required Fields Primary street address containing street number and name. ZIP code in 5 or 9-digit format (12345 or 12345-6789). ### Optional Fields Secondary address information (apartment, suite, unit number). City name. Recommended for improved address match quality. Two-letter US state code (e.g., "MI" for Michigan). Recommended for improved address match quality. Latitude coordinate for improved performance and reduced latency. Longitude coordinate for improved performance and reduced latency. Both latitude and longitude must be provided together. If only one is provided, the widget will return an error. ## Common Use Cases Help homebuyers and renters understand internet options before making decisions. **Implementation tips:** * Use summary layout for listing pages * Pre-populate address from property data * Track by property ID with `campaignId` Provide comprehensive internet service information as part of relocation assistance. **Implementation tips:** * Use checkout layout for conversion * Integrate with move-in date scheduling * Pre-populate customer data from profiles Assist mortgage applicants and homebuyers in planning their move. **Implementation tips:** * Embed in post-approval flows * Use property address from loan application * Track by application ID Help tenants find and set up internet service for their new homes. **Implementation tips:** * Limit to preferred providers via partnership * Use property's address by default * Brand with property management colors Add value to listings by showing available internet services. **Implementation tips:** * Use summary layout for compact display * Cache results by address * Display alongside other amenities ## Getting Started Ready to integrate the Hum widget? Choose your integration method: Step-by-step guide for embedding the widget with JavaScript and HTML URL-based integration guide for mobile WebView applications Learn how to listen for events and handle user actions Build custom integrations using the Hum API directly ## Support Contact our team for API keys, integration assistance, and technical support # WebView Integration Source: https://docs.letshum.com/widget-integration/webview Learn how to integrate Hum into mobile applications using WebView with URL parameters # WebView Integration The Hum WebView integration provides a simplified way to embed the Hum widget experience into native mobile applications (iOS and Android) or any environment that supports WebViews. Instead of embedding JavaScript code, you simply load a URL with configuration parameters. This integration method is ideal for mobile apps built with native frameworks (Swift, Kotlin) or hybrid frameworks (React Native, Flutter) that need a quick, no-code integration path. ## Base URL All WebView integrations use the following base URL: ``` https://webview.letshum.com ``` ## Quick Start The simplest WebView integration requires only your API key: ``` https://webview.letshum.com?apiKey=YOUR_API_KEY_HERE ``` Contact your Hum representative to receive your API key if you haven't already. Build your URL by appending configuration parameters as query strings to the base URL. ``` https://webview.letshum.com?apiKey=YOUR_API_KEY&resultLayout=checkout&primaryColor=%231274f9 ``` Load the constructed URL in your application's WebView component. ```swift theme={null} import WebKit let urlString = "https://webview.letshum.com?apiKey=YOUR_API_KEY&resultLayout=checkout" if let url = URL(string: urlString) { let request = URLRequest(url: url) webView.load(request) } ``` ```kotlin theme={null} val webView: WebView = findViewById(R.id.webview) webView.settings.javaScriptEnabled = true val url = "https://webview.letshum.com?apiKey=YOUR_API_KEY&resultLayout=checkout" webView.loadUrl(url) ``` ```javascript theme={null} import { WebView } from 'react-native-webview'; function HumWebView() { const url = 'https://webview.letshum.com?apiKey=YOUR_API_KEY&resultLayout=checkout'; return ( ); } ``` ```dart theme={null} import 'package:webview_flutter/webview_flutter.dart'; class HumWebView extends StatelessWidget { final controller = WebViewController() ..setJavaScriptMode(JavaScriptMode.unrestricted) ..loadRequest(Uri.parse( 'https://webview.letshum.com?apiKey=YOUR_API_KEY&resultLayout=checkout' )); @override Widget build(BuildContext context) { return WebViewWidget(controller: controller); } } ``` ## URL Parameters All configuration options are passed as URL query parameters. Parameters should be properly URL-encoded, especially for special characters. ### Required Parameters Your Hum API key for authentication. **Example:** `apiKey=your_api_key_here` ### Display & Layout Parameters Controls the visual presentation of internet service results. **Accepted Values:** * `summary` - Compact table format with affiliate links * `checkout` - Full e-commerce shopping cart experience (default) * `plans` - Card layout with affiliate links **Default:** `checkout` **Example:** `resultLayout=summary` Customizes the primary color for buttons and UI elements. Must be a URL-encoded hex color code. **Format:** Hex color without the `#` symbol, or URL-encoded with `%23` **Default:** `1274f9` (Hum blue) **Examples:** * `primaryColor=1274f9` * `primaryColor=%23FF5733` Controls whether users can save and unsave internet plans for later comparison. **Accepted Values:** `true` or `false` **Default:** `false` **Example:** `showSavePlanButton=true` **When enabled:** * Save/unsave button appears on plan cards * Triggers `humPlanSaved` and `humPlanUnsaved` events * Allows users to bookmark plans for future reference Controls whether the widget renders its own address entry form above the results. **Accepted Values:** `true` or `false` **Default:** `false` **Example:** `showAddressCompletionForm=true` **When enabled:** * An address field with autocomplete appears above the results * Selecting a suggestion starts a new session and reloads results for that address * The visitor can look up a different address without the host app reloading the WebView Leave this off when your app already passes the address through the URL parameters below. Turn it on when you want the visitor to be able to enter or change the address inside the WebView. ### Address Parameters Pre-populate the address to show results immediately when the WebView loads. Primary street address (street number and name). **Example:** `street1=123%20Main%20St` When providing an address, `street1` and `zip` are required. `city` and `state` are optional but recommended for improved address match quality. Secondary address information (apartment, suite, unit number). **Example:** `street2=Apt%20205` City name. **Example:** `city=Detroit` Two-letter state code. **Example:** `state=MI` ZIP code (5 or 9 digits). **Example:** `zip=48226` Alternative to individual address fields - provide the complete address as a single string. **Example:** `s=123%20Main%20St%20Apt%204B%2C%20Detroit%2C%20MI%2048226` Unit or apartment designators included in the single address string are parsed into `street2` automatically. When using the `s` parameter, do not include `street1`, `city`, `state`, or `zip` parameters. Use either `s` OR the individual fields, not both. Latitude coordinate for the address (improves performance). **Example:** `latitude=42.3317` Both `latitude` and `longitude` must be provided together. Longitude coordinate for the address (improves performance). **Example:** `longitude=-83.0479` ### Tracking & Analytics Parameters Identifier for tracking attribution and analytics. Use this to associate sessions with marketing campaigns, traffic sources, or user segments. **Example:** `campaignId=mobile-app-Q4-2024` ### Customer Data Parameters Pre-populate customer information to streamline the checkout process. Customer's first name. **Example:** `firstName=Jane` Customer's last name. **Example:** `lastName=Smith` Customer's email address (must be URL-encoded). **Example:** `email=jane.smith%40example.com` Customer's phone number. **Example:** `phoneNumber=555-123-4567` ### Filtering Parameters Comma-separated list of FCC provider IDs to restrict results to specific providers. **Example:** `limitProviders=130077,130317` Use [Get FCC Service Providers](/api-reference/informational/get-fcc-service-providers) to retrieve provider IDs programmatically. Comma-separated list of FCC provider IDs to feature prominently at the top of results. **Example:** `primaryProviders=130077,130317` Comma-separated list of technology types to filter results. **Accepted Values:** `Fiber`, `Cable`, `Wireless`, `Satellite`, `DSL`, `Other` **Example:** `limitTechnologies=Fiber,Cable` ## Complete URL Examples ### Example 1: Basic Integration Minimal configuration with just the API key: ``` https://webview.letshum.com?apiKey=your_api_key_here ``` ### Example 2: With Pre-populated Address Show results for a specific address immediately: ``` https://webview.letshum.com?apiKey=your_api_key_here&street1=123%20Main%20St&city=Detroit&state=MI&zip=48226 ``` ### Example 3: Full Address String Using the single address parameter: ``` https://webview.letshum.com?apiKey=your_api_key_here&s=123%20Main%20St%2C%20Detroit%2C%20MI%2048226 ``` ### Example 4: Customized Layout and Branding Change the layout and primary color: ``` https://webview.letshum.com?apiKey=your_api_key_here&resultLayout=summary&primaryColor=%23FF5733 ``` ### Example 5: Pre-populated Customer Data Streamline checkout with known customer information: ``` https://webview.letshum.com?apiKey=your_api_key_here&street1=123%20Main%20St&city=Detroit&state=MI&zip=48226&firstName=Jane&lastName=Smith&email=jane.smith%40example.com&phoneNumber=555-123-4567 ``` ### Example 6: Filtered Providers and Technologies Show only fiber and cable from specific providers: ``` https://webview.letshum.com?apiKey=your_api_key_here&street1=123%20Main%20St&city=Detroit&state=MI&zip=48226&limitProviders=130077,130317&limitTechnologies=Fiber,Cable ``` ### Example 7: Complete Configuration All parameters combined: ``` https://webview.letshum.com?apiKey=your_api_key_here&resultLayout=checkout&primaryColor=%231274f9&street1=123%20Main%20St&city=Detroit&state=MI&zip=48226&latitude=42.3317&longitude=-83.0479&campaignId=mobile-app-Q4-2024&firstName=Jane&lastName=Smith&email=jane.smith%40example.com&phoneNumber=555-123-4567&limitProviders=130077,130317&primaryProviders=130077&limitTechnologies=Fiber,Cable ``` ## URL Encoding Reference When constructing URLs, ensure special characters are properly encoded: | Character | Encoded Value | Example | | --------- | ------------- | ----------------------------------------- | | Space | `%20` | `Main St` → `Main%20St` | | `#` | `%23` | `#FF5733` → `%23FF5733` | | `@` | `%40` | `user@example.com` → `user%40example.com` | | `&` | `%26` | `AT&T` → `AT%26T` | | `,` | `%2C` | `MI, 48226` → `MI%2C%2048226` | Most programming languages provide built-in URL encoding functions. Use these instead of manually encoding characters to avoid errors. ## Platform-Specific Implementation ### iOS Implementation ```swift theme={null} import WebKit class HumWebViewController: UIViewController { var webView: WKWebView! override func viewDidLoad() { super.viewDidLoad() // Configure WebView let webConfiguration = WKWebViewConfiguration() webView = WKWebView(frame: view.bounds, configuration: webConfiguration) webView.autoresizingMask = [.flexibleWidth, .flexibleHeight] view.addSubview(webView) } } ``` ```swift theme={null} func loadHumWebView() { var components = URLComponents(string: "https://webview.letshum.com")! components.queryItems = [ URLQueryItem(name: "apiKey", value: "your_api_key_here"), URLQueryItem(name: "resultLayout", value: "checkout"), URLQueryItem(name: "street1", value: "123 Main St"), URLQueryItem(name: "city", value: "Detroit"), URLQueryItem(name: "state", value: "MI"), URLQueryItem(name: "zip", value: "48226") ] if let url = components.url { let request = URLRequest(url: url) webView.load(request) } } ``` `URLComponents` automatically handles URL encoding for you. ### Android Implementation ```xml res/layout/activity_main.xml theme={null} ``` ```kotlin theme={null} import android.webkit.WebView import android.webkit.WebSettings import java.net.URLEncoder class MainActivity : AppCompatActivity() { private lateinit var webView: WebView override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) webView = findViewById(R.id.hum_webview) setupWebView() loadHumWebView() } private fun setupWebView() { webView.settings.apply { javaScriptEnabled = true domStorageEnabled = true loadWithOverviewMode = true useWideViewPort = true } } private fun loadHumWebView() { val params = mapOf( "apiKey" to "your_api_key_here", "resultLayout" to "checkout", "street1" to "123 Main St", "city" to "Detroit", "state" to "MI", "zip" to "48226" ) val queryString = params.entries.joinToString("&") { (key, value) -> "$key=${URLEncoder.encode(value, "UTF-8")}" } val url = "https://webview.letshum.com?$queryString" webView.loadUrl(url) } } ``` ### React Native Implementation ```javascript theme={null} import React from 'react'; import { WebView } from 'react-native-webview'; import { SafeAreaView, StyleSheet } from 'react-native'; function HumWebViewScreen() { const buildUrl = () => { const baseUrl = 'https://webview.letshum.com'; const params = { apiKey: 'your_api_key_here', resultLayout: 'checkout', street1: '123 Main St', city: 'Detroit', state: 'MI', zip: '48226', firstName: 'Jane', lastName: 'Smith', email: 'jane.smith@example.com' }; const queryString = Object.entries(params) .map(([key, value]) => `${key}=${encodeURIComponent(value)}`) .join('&'); return `${baseUrl}?${queryString}`; }; return ( ); } const styles = StyleSheet.create({ container: { flex: 1, }, }); export default HumWebViewScreen; ``` ## Listening to Widget Events The WebView integration supports the same hook notifications as the standard widget integration. See the [Widget Hook Notifications](/widget-integration/hooks) page for detailed information on handling order completion, plan save, and plan unsave events. Configure your WebView to handle postMessage events to receive notifications from the Hum widget. ## Best Practices The Hum widget requires JavaScript and DOM storage to function properly. Ensure these are enabled in your WebView configuration. ```swift theme={null} // iOS webView.configuration.preferences.javaScriptEnabled = true ``` ```kotlin theme={null} // Android webView.settings.javaScriptEnabled = true webView.settings.domStorageEnabled = true ``` Consider restricting navigation to keep users within the Hum experience or handle external links appropriately. ```swift theme={null} // iOS func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) { if let url = navigationAction.request.url?.absoluteString { if url.contains("webview.letshum.com") { decisionHandler(.allow) } else { // Open external links in Safari UIApplication.shared.open(navigationAction.request.url!) decisionHandler(.cancel) } } } ``` Handle WebView errors gracefully to improve user experience. ```kotlin theme={null} // Android webView.webViewClient = object : WebViewClient() { override fun onReceivedError( view: WebView?, request: WebResourceRequest?, error: WebResourceError? ) { // Show error message to user Toast.makeText( this@MainActivity, "Failed to load content. Please check your connection.", Toast.LENGTH_LONG ).show() } } ``` If your app already has user information or location data, pass it as URL parameters to reduce friction and improve conversion rates. ```javascript theme={null} // React Native example const getUserData = () => ({ firstName: user.firstName, lastName: user.lastName, email: user.email, phoneNumber: user.phone }); const getLocationData = () => ({ street1: location.street, city: location.city, state: location.state, zip: location.zip }); ``` ## Troubleshooting **Possible causes:** * JavaScript is disabled in WebView settings * DOM storage is disabled * Network connectivity issues * Invalid API key **Solutions:** * Verify JavaScript is enabled * Enable DOM storage * Check network connection * Validate your API key with Hum support **Possible causes:** * Missing required address fields * Incorrect URL encoding * Using both `s` parameter and individual fields **Solutions:** * Ensure the required fields (`street1` and `zip`) are present * Include `city` and `state` when available to improve address match quality * Use proper URL encoding functions * Use either `s` OR individual fields, not both **Possible causes:** * Hex color not URL-encoded * Invalid hex color format **Solutions:** * Use `%23` for the `#` symbol: `primaryColor=%23FF5733` * Or omit the `#` entirely: `primaryColor=FF5733` * Verify the hex color is valid ## Next Steps Learn how to listen for and handle events from the Hum widget Explore the full JavaScript widget integration for web applications Build custom integrations using the Hum API Contact our team for integration assistance