calcom demo form (#1705)

Author: carlosabadia

blog/2025-12-05-on-premises-deployment.md

@@ -33,7 +33,7 @@ import reflex as rx
 import reflex_ui as ui
 from pcweb import pages, constants
 from reflex_image_zoom import image_zoom
-from reflex_ui.blocks.demo_form import demo_form_dialog
+from reflex_ui.blocks.calcom import get_cal_attrs
 ```
 
 For organizations with strict security, compliance, or data sovereignty requirements, building applications on your own infrastructure isn't just a preference — it's a necessity. With Reflex Enterprise, you can now run **Reflex Build**—our AI-powered app builder—on-premises or in your own private cloud, giving you complete control over your development environment while maintaining all the productivity benefits of building apps with AI. You can securely hook up with all your company data sources, internal services, documentation, databases, and APIs—all within your own infrastructure.
@@ -150,12 +150,11 @@ If you're interested in deploying Reflex on-premises, book a demo to discuss you
 
 ```python eval
 rx.el.div(
-    demo_form_dialog(
-        ui.button(
-            "Book a Demo",
-            variant="primary",
-            class_name="font-semibold",
-        ),
+    ui.button(
+        "Book a Demo",
+        variant="primary",
+        class_name="font-semibold",
+        custom_attrs=get_cal_attrs(),
     ),
     class_name="flex justify-center items-center my-8",
 )

pcweb/components/docpage/navbar/navbar.py

@@ -2,7 +2,7 @@
 
 import reflex as rx
 import reflex_ui as ui
-from reflex_ui.blocks.demo_form import demo_form_dialog
+from reflex_ui.blocks.calcom import get_cal_attrs
 
 from pcweb.constants import REFLEX_BUILD_URL, REFLEX_CLOUD_URL
 from pcweb.pages.blog import blogs
@@ -550,13 +550,12 @@ def new_component_section() -> rx.Component:
                 class_name="desktop-only",
             ),
             ui.navigation_menu.item(
-                render_=demo_form_dialog(
-                    ui.button(
-                        "Book a Demo",
-                        size="sm",
-                        variant="primary",
-                        class_name="font-semibold whitespace-nowrap max-xl:hidden",
-                    ),
+                render_=ui.button(
+                    "Book a Demo",
+                    size="sm",
+                    variant="primary",
+                    custom_attrs=get_cal_attrs(),
+                    class_name="font-semibold whitespace-nowrap max-xl:hidden",
                 ),
                 unstyled=True,
                 class_name="xl:flex hidden",

pcweb/pages/databricks/views/video.py

@@ -1,6 +1,6 @@
 import reflex as rx
 import reflex_ui as ui
-from reflex_ui.blocks.demo_form import demo_form_dialog
+from reflex_ui.blocks.calcom import get_cal_attrs
 
 VIDEO_URL = "https://youtu.be/Hy3uhBVRdtk?si=Z5szIyInkBfeG2lk&t=92s"
 
@@ -37,12 +37,11 @@ def text() -> rx.Component:
             ),
             class_name="text-slate-12 lg:text-3xl text-2xl font-semibold max-w-[57rem]",
         ),
-        demo_form_dialog(
-            ui.button(
-                "Get Personalized Walkthrough",
-                size="lg",
-                class_name="w-fit font-semibold mr-auto rounded-[0.625rem]",
-            ),
+        ui.button(
+            "Get Personalized Walkthrough",
+            size="lg",
+            class_name="w-fit font-semibold mr-auto rounded-[0.625rem]",
+            custom_attrs=get_cal_attrs(),
         ),
         class_name="flex flex-col gap-6 items-start justify-center lg:py-20 py-8 px-10",
     )

pcweb/pages/demo/header.py

@@ -1,6 +1,6 @@
 import reflex as rx
 import reflex_ui as ui
-from reflex_ui.blocks.demo_form import demo_form_dialog
+from reflex_ui.blocks.calcom import get_cal_attrs
 
 from pcweb.components.hosting_banner import HostingBannerState
 from pcweb.pages.framework.views.companies import pricing_page_companies
@@ -18,15 +18,14 @@ def custom_quote_form() -> rx.Component:
                 "Enterprise-ready solutions designed for scale, compliance, and support. Contact us for a tailored quote based on your infrastructure and team size.",
                 class_name="text-slate-11 text-md leading-relaxed font-medium text-center max-w-xl mx-auto",
             ),
-            demo_form_dialog(
-                rx.el.div(
-                    ui.button(
-                        "Contact Sales",
-                        class_name="font-semibold",
-                        size="lg",
-                    ),
-                    class_name="p-3 border border-slate-3 rounded-[1.375rem] border-solid mt-2",
+            rx.el.div(
+                ui.button(
+                    "Contact Sales",
+                    class_name="font-semibold",
+                    size="lg",
+                    custom_attrs=get_cal_attrs(),
                 ),
+                class_name="p-3 border border-slate-3 rounded-[1.375rem] border-solid mt-2",
             ),
             rx.box(
                 rx.el.span(

pcweb/pages/gallery/apps.py

@@ -4,7 +4,7 @@
 import flexdown
 import reflex as rx
 import reflex_ui as ui
-from reflex_ui.blocks.demo_form import demo_form_dialog
+from reflex_ui.blocks.calcom import get_cal_attrs
 
 from pcweb.components.button import button, button_with_icon
 from pcweb.components.code_card import gallery_app_card
@@ -202,12 +202,11 @@ def page(document, is_reflex_template: bool) -> rx.Component:
                     *(
                         [
                             rx.box(
-                                demo_form_dialog(
-                                    button_with_icon(
-                                        "Book a Demo",
-                                        icon="new_tab",
-                                        class_name="flex-row-reverse gap-2 !w-full",
-                                    ),
+                                button_with_icon(
+                                    "Book a Demo",
+                                    icon="new_tab",
+                                    custom_attrs=get_cal_attrs(),
+                                    class_name="flex-row-reverse gap-2 !w-full",
                                 ),
                                 class_name="flex justify-center items-center h-full !w-full [&_button]:!w-full",
                             )

pcweb/pages/landing/views/start_building.py

@@ -1,5 +1,5 @@
 import reflex as rx
-from reflex_ui.blocks.demo_form import demo_form_dialog
+from reflex_ui.blocks.calcom import get_cal_attrs
 
 from pcweb.components.new_button import button
 
@@ -22,12 +22,11 @@ def start_building() -> rx.Component:
             "Start building with Reflex",
             class_name="text-secondary-11 text-2xl lg:text-4xl font-semibold text-center",
         ),
-        demo_form_dialog(
-            button(
-                "Contact sales",
-                size="xl",
-                class_name="mt-6",
-            ),
+        button(
+            "Contact sales",
+            size="xl",
+            class_name="mt-6",
+            custom_attrs=get_cal_attrs(),
         ),
         class_name="flex flex-col justify-center items-center lg:mx-auto md:w-full max-w-[64.19rem] lg:border-x border-slate-3 pb-[6.31rem] border-t border-slate-3 py-[6rem] relative z-[1] overflow-hidden isolate w-screen -mx-4",
     )

pcweb/pages/pricing/enterprise_demo_form.py

@@ -1,5 +1,5 @@
 import reflex as rx
-from reflex_ui.blocks.demo_form import demo_form
+from reflex_ui.blocks.calcom import cal_embed
 
 from pcweb.pages.framework.views.companies import pricing_page_companies
 
@@ -25,12 +25,12 @@ def book_a_demo_form() -> rx.Component:
                     class_name="mb-8 lg:mb-0 text-center sm:text-left",
                 ),
                 # Right column - Form
-                demo_form(
-                    class_name="relative bg-slate-1 p-6 sm:p-8 rounded-2xl border-2 border-violet-9 shadow-lg w-full max-w-md mx-auto lg:max-w-none lg:mx-0"
+                cal_embed(
+                    class_name="relative bg-slate-1 rounded-2xl border-2 border-violet-9 shadow-lg w-full max-w-md mx-auto lg:max-w-none lg:mx-0 overflow-hidden"
                 ),
-                class_name="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 max-w-7xl mx-auto items-start",
+                class_name="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-2 max-w-7xl mx-auto items-start",
             ),
-            class_name="lg:pt-[4.5rem] pt-[2.5rem] pb-[3.5rem] px-8",
+            class_name="lg:pt-[4.5rem] pt-[2.5rem] pb-[3.5rem] px-4",
         ),
         class_name="flex items-center justify-center 2xl:border-x border-slate-4 max-w-[64.19rem] mx-auto w-full gap-1 2xl:border-b",
     )

pcweb/pages/pricing/faq.py

@@ -1,5 +1,5 @@
 import reflex as rx
-from reflex_ui.blocks.demo_form import demo_form_dialog
+from reflex_ui.blocks.calcom import get_cal_attrs
 
 from pcweb.components.button import button
 
@@ -26,15 +26,14 @@ def header() -> rx.Component:
 
 def sales_button() -> rx.Component:
     return rx.el.div(
-        demo_form_dialog(
-            rx.el.div(
-                glow(),
-                button(
-                    "Need more help? Contact sales",
-                    variant="secondary",
-                    class_name="!text-slate-11 !font-semibold !text-sm w-fit",
-                ),
+        rx.el.div(
+            glow(),
+            button(
+                "Need more help? Contact sales",
+                variant="secondary",
+                class_name="!text-slate-11 !font-semibold !text-sm w-fit",
             ),
+            custom_attrs=get_cal_attrs(),
         ),
         class_name="self-center relative",
     )

pcweb/pages/pricing/plan_cards.py

@@ -4,7 +4,7 @@
 import reflex as rx
 import reflex_ui as ui
 from reflex.experimental.client_state import ClientStateVar
-from reflex_ui.blocks.demo_form import demo_form_dialog
+from reflex_ui.blocks.calcom import get_cal_attrs
 
 from pcweb.components.hosting_banner import HostingBannerState
 from pcweb.components.number_flow import number_flow
@@ -259,13 +259,12 @@ def pricing_cards() -> rx.Component:
                 Feature("QuestionIcon", "Dedicated Support Channel"),
                 Feature("CustomerSupportIcon", "Onboarding support"),
             ],
-            demo_form_dialog(
-                ui.button(
-                    "Contact sales",
-                    variant="primary",
-                    size="lg",
-                    class_name="w-full font-semibold",
-                ),
+            ui.button(
+                "Contact sales",
+                variant="primary",
+                size="lg",
+                custom_attrs=get_cal_attrs(),
+                class_name="w-full font-semibold",
             ),
         ),
         class_name=ui.cn(

pcweb/pages/pricing/slider_calculator.py

@@ -3,7 +3,7 @@
 import reflex as rx
 import reflex_ui as ui
 from reflex.experimental.client_state import ClientStateVar
-from reflex_ui.blocks.demo_form import demo_form_dialog
+from reflex_ui.blocks.calcom import get_cal_attrs
 
 from pcweb.constants import PRO_TIERS_TABLE, REFLEX_CLOUD_URL
 from pcweb.pages.pricing.calculator import (
@@ -269,12 +269,11 @@ def total_credits_card() -> rx.Component:
             ),
             rx.cond(
                 get_is_enterprise_tier(MachineState.messages_tier_index),
-                demo_form_dialog(
-                    ui.button(
-                        "Contact Sales",
-                        size="sm",
-                        class_name="font-semibold w-full",
-                    ),
+                ui.button(
+                    "Contact Sales",
+                    size="sm",
+                    custom_attrs=get_cal_attrs(),
+                    class_name="font-semibold w-full",
                 ),
                 ui.link(
                     render_=ui.button(