Add Slack webhook integration to demo form (#1484)

* Add Slack webhook integration to demo form

- Add SLACK_DEMO_WEBHOOK_URL constant
- Create send_data_to_slack function in postog_metrics.py
- Update send_demo_event to call both PostHog and Slack webhooks
- Maintain existing PostHog functionality while adding Slack integration

Co-Authored-By: [email protected] <[email protected]>

* Address PR review comments

- Fix field mapping: use company_name for businessName instead of company_email
- Improve error logging with detailed error messages
- Add error handling around Slack webhook call to prevent blocking form submission
- Use environment variable for webhook URL with fallback to hardcoded value
- Add missing log import in header.py

Co-Authored-By: [email protected] <[email protected]>

* updates for making it work with a env var

* Add optional phone number field to demo form

- Add phone_number field to DemoEvent dataclass with default empty string
- Add phone number input field to form UI using text_input_field helper
- Update form submission handler to include phone number in DemoEvent
- Update Slack webhook payload to include phoneNumber field
- Phone number field is optional with tel input type and proper placeholder
- Maintains consistent styling with existing form fields

Co-Authored-By: [email protected] <[email protected]>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: [email protected] <[email protected]>
Co-authored-by: Tom Gotsman <[email protected]>

Author: 3 people

pcweb/constants.py

@@ -100,3 +100,5 @@
 
 # Posthog
 POSTHOG_API_KEY = os.getenv("POSTHOG_API_KEY")
+
+SLACK_DEMO_WEBHOOK_URL: str = os.environ.get("SLACK_DEMO_WEBHOOK_URL")

pcweb/pages/pricing/header.py

@@ -4,11 +4,12 @@
 import reflex as rx
 from reflex.event import EventType
 from reflex.experimental import ClientStateVar
+from reflex.utils.console import log
 
 from pcweb.components.hosting_banner import HostingBannerState
 from pcweb.components.new_button import button
 from pcweb.pages.framework.views.companies import pricing_page_companies
-from pcweb.telemetry.postog_metrics import DemoEvent, send_data_to_posthog
+from pcweb.telemetry.postog_metrics import DemoEvent, send_data_to_posthog, send_data_to_slack
 
 ThankYouDialogState = ClientStateVar.create("thank_you_dialog_state", False)
 
@@ -193,20 +194,28 @@ def submit(self, form_data: dict[str, Any]):
     async def send_demo_event(self, form_data: dict[str, Any]):
         first_name = form_data.get("first_name", "")
         last_name = form_data.get("last_name", "")
-        await send_data_to_posthog(
-            DemoEvent(
-                distinct_id=f"{first_name} {last_name}",
-                first_name=first_name,
-                last_name=last_name,
-                company_email=form_data.get("email", ""),
-                linkedin_url=form_data.get("linkedin_url", ""),  # Updated from phone_number
-                job_title=form_data.get("job_title", ""),
-                company_name=form_data.get("company_name", ""),
-                num_employees=self.num_employees,
-                internal_tools=form_data.get("internal_tools", ""),
-                referral_source=self.referral_source,
-            )
+        demo_event = DemoEvent(
+            distinct_id=f"{first_name} {last_name}",
+            first_name=first_name,
+            last_name=last_name,
+            company_email=form_data.get("email", ""),
+            linkedin_url=form_data.get("linkedin_url", ""),
+            job_title=form_data.get("job_title", ""),
+            company_name=form_data.get("company_name", ""),
+            num_employees=self.num_employees,
+            internal_tools=form_data.get("internal_tools", ""),
+            referral_source=self.referral_source,
+            phone_number=form_data.get("phone_number", ""),
         )
+        
+        # Send to PostHog (existing)
+        await send_data_to_posthog(demo_event)
+        
+        # Send to Slack (new)
+        try:
+            await send_data_to_slack(demo_event)
+        except Exception as e:
+            log(f"Failed to send to Slack: {e}")
 
 
 def quote_input(placeholder: str, name: str, **props):
@@ -459,6 +468,13 @@ def custom_quote_form() -> rx.Component:
                             input_type="url",
                         ),
                     ),
+                    text_input_field(
+                        "Phone number (optional)",
+                        "phone_number",
+                        "+1 (555) 123-4567",
+                        required=False,
+                        input_type="tel",
+                    ),
                     # Project Details
                     textarea_field(
                         "What are you looking to build?",

pcweb/telemetry/postog_metrics.py

@@ -4,7 +4,7 @@
 import httpx
 from posthog import Posthog
 from reflex.utils.console import log
-from pcweb.constants import POSTHOG_API_KEY
+from pcweb.constants import POSTHOG_API_KEY, SLACK_DEMO_WEBHOOK_URL
 
 try:
     posthog = Posthog(POSTHOG_API_KEY, host="https://us.i.posthog.com")
@@ -35,6 +35,7 @@ class DemoEvent(PosthogEvent):
     num_employees: str
     internal_tools: str
     referral_source: str
+    phone_number: str = ""
 
 
 async def send_data_to_posthog(event_instance: PosthogEvent):
@@ -59,3 +60,34 @@ async def send_data_to_posthog(event_instance: PosthogEvent):
             response.raise_for_status()
     except Exception:
         log("Error sending data to PostHog")
+
+
+async def send_data_to_slack(event_instance: DemoEvent):
+    """Send demo form data to Slack webhook.
+    
+    Args:
+        event_instance: An instance of DemoEvent with form data.
+    """
+    slack_payload = {
+        "lookingToBuild": event_instance.internal_tools,
+        "businessEmail": event_instance.company_email,
+        "howDidYouHear": event_instance.referral_source,
+        "linkedinUrl": event_instance.linkedin_url,
+        "jobTitle": event_instance.job_title,
+        "numEmployees": event_instance.num_employees,
+        "companyName": event_instance.company_name,
+        "firstName": event_instance.first_name,
+        "lastName": event_instance.last_name,
+        "phoneNumber": event_instance.phone_number
+    }
+    
+    try:
+        async with httpx.AsyncClient() as client:
+            response = await client.post(
+                SLACK_DEMO_WEBHOOK_URL,
+                json=slack_payload,
+                headers={"Content-Type": "application/json"}
+            )
+            response.raise_for_status()
+    except Exception as e:
+        log(f"Error sending data to Slack webhook: {e}")