diff --git a/web/app/(shareLayout)/components/authenticated-layout.tsx b/web/app/(shareLayout)/components/authenticated-layout.tsx
index a7b65f33fe..3ee5d52603 100644
--- a/web/app/(shareLayout)/components/authenticated-layout.tsx
+++ b/web/app/(shareLayout)/components/authenticated-layout.tsx
@@ -39,7 +39,9 @@ const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
   const getSigninUrl = useCallback(() => {
     const params = new URLSearchParams(searchParams)
     params.delete('message')
-    params.set('redirect_url', pathname)
+    const query = params.toString()
+    const fullPath = query ? `${pathname}?${query}` : pathname
+    params.set('redirect_url', fullPath)
     return `/webapp-signin?${params.toString()}`
   }, [searchParams, pathname])
 
diff --git a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
index 9afa0063dc..3dabb2a91e 100644
--- a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
@@ -97,7 +97,7 @@ const AppInfoDetailPanel = ({
     <ContentDialog
       show={show}
       onClose={onClose}
-      className="absolute top-2 bottom-2 left-2 flex w-[420px] flex-col rounded-2xl p-0!"
+      className="absolute top-2 bottom-2 left-2 flex w-[452px] max-w-[calc(100vw-1rem)] flex-col rounded-2xl p-0!"
     >
       <div className="flex shrink-0 flex-col items-start justify-center gap-3 self-stretch p-4">
         <div className="flex items-center gap-3 self-stretch">
diff --git a/web/app/components/app/app-publisher/__tests__/index.spec.tsx b/web/app/components/app/app-publisher/__tests__/index.spec.tsx
index 1fad833933..0dfb4347e4 100644
--- a/web/app/components/app/app-publisher/__tests__/index.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/index.spec.tsx
@@ -20,6 +20,7 @@ const mockOpenAsyncWindow = vi.fn()
 const mockFetchInstalledAppList = vi.fn()
 const mockFetchAppDetailDirect = vi.fn()
 const mockToastError = vi.fn()
+const mockWindowOpen = vi.fn()
 const mockInvalidateAppWorkflow = vi.fn()
 
 const sectionProps = vi.hoisted(() => ({
@@ -37,6 +38,7 @@ vi.mock('react-i18next', () => ({
   useTranslation: () => ({
     t: (key: string) => key,
   }),
+  Trans: ({ i18nKey }: { i18nKey?: string }) => i18nKey ?? null,
 }))
 
 vi.mock('ahooks', async () => {
@@ -167,6 +169,12 @@ vi.mock('../sections', () => ({
       <div>
         <button onClick={props.handleEmbed}>publisher-embed</button>
         <button onClick={() => void props.handleOpenInExplore()}>publisher-open-in-explore</button>
+        {props.handleOpenRunConfig && (
+          <>
+            <button onClick={() => props.handleOpenRunConfig(props.appURL)}>publisher-run-config</button>
+            <button onClick={() => props.handleOpenRunConfig(`${props.appURL}?mode=batch`)}>publisher-batch-run-config</button>
+          </>
+        )}
         <button onClick={props.onConfigureWorkflowTool}>publisher-workflow-tool</button>
       </div>
     )
@@ -200,6 +208,10 @@ describe('AppPublisher', () => {
     mockOpenAsyncWindow.mockImplementation(async (resolver: () => Promise<string>) => {
       await resolver()
     })
+    Object.defineProperty(window, 'open', {
+      writable: true,
+      value: mockWindowOpen,
+    })
   })
 
   it('should open the publish popover and refetch access permission data', async () => {
@@ -256,6 +268,75 @@ describe('AppPublisher', () => {
     expect(screen.getByTestId('embedded-modal'))!.toBeInTheDocument()
   })
 
+  it('should collect hidden inputs before opening published run links from config actions', async () => {
+    render(
+      <AppPublisher
+        publishedAt={Date.now()}
+        inputs={[{
+          variable: 'secret',
+          label: 'Secret',
+          type: 'text-input',
+          required: true,
+          hide: true,
+          default: '',
+        } as any]}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publish'))
+    fireEvent.click(screen.getByText('publisher-run-config'))
+
+    expect(screen.getByText('overview.appInfo.workflowLaunchHiddenInputs.title')).toBeInTheDocument()
+
+    fireEvent.change(screen.getByLabelText('Secret'), {
+      target: { value: 'top-secret' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'overview.appInfo.launch' }))
+
+    await waitFor(() => {
+      expect(mockWindowOpen).toHaveBeenCalledWith(
+        `https://example.com${basePath}/chat/token-1?secret=${encodeURIComponent('top-secret')}`,
+        '_blank',
+      )
+    })
+  })
+
+  it('should open batch run config links with the configured hidden inputs', async () => {
+    mockAppDetail = {
+      ...mockAppDetail,
+      mode: AppModeEnum.WORKFLOW,
+    }
+
+    render(
+      <AppPublisher
+        publishedAt={Date.now()}
+        inputs={[{
+          variable: 'batch_secret',
+          label: 'Batch Secret',
+          type: 'text-input',
+          required: true,
+          hide: true,
+          default: '',
+        } as any]}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publish'))
+    fireEvent.click(screen.getByText('publisher-batch-run-config'))
+
+    fireEvent.change(screen.getByLabelText('Batch Secret'), {
+      target: { value: 'batch-value' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'overview.appInfo.launch' }))
+
+    await waitFor(() => {
+      expect(mockWindowOpen).toHaveBeenCalledWith(
+        `https://example.com${basePath}/workflow/token-1?mode=batch&batch_secret=${encodeURIComponent('batch-value')}`,
+        '_blank',
+      )
+    })
+  })
+
   it('should keep workflow tool drawer mounted after closing the publish popover', () => {
     mockAppDetail = {
       ...mockAppDetail,
diff --git a/web/app/components/app/app-publisher/__tests__/sections.spec.tsx b/web/app/components/app/app-publisher/__tests__/sections.spec.tsx
index 714cd3b7c3..453779504e 100644
--- a/web/app/components/app/app-publisher/__tests__/sections.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/sections.spec.tsx
@@ -18,8 +18,32 @@ vi.mock('../publish-with-multiple-model', () => ({
 }))
 
 vi.mock('../suggested-action', () => ({
-  default: ({ children, onClick, link, disabled }: { children: ReactNode, onClick?: () => void, link?: string, disabled?: boolean }) => (
-    <button type="button" data-link={link} disabled={disabled} onClick={onClick}>{children}</button>
+  default: ({
+    children,
+    onClick,
+    link,
+    disabled,
+    actionButton,
+  }: {
+    children: ReactNode
+    onClick?: () => void
+    link?: string
+    disabled?: boolean
+    actionButton?: { ariaLabel: string, onClick: () => void }
+  }) => (
+    <div>
+      <button type="button" data-link={link} disabled={disabled} onClick={onClick}>{children}</button>
+      {actionButton && (
+        <button
+          type="button"
+          aria-label={actionButton.ariaLabel}
+          disabled={disabled}
+          onClick={actionButton.onClick}
+        >
+          {actionButton.ariaLabel}
+        </button>
+      )}
+    </div>
   ),
 }))
 
@@ -170,9 +194,25 @@ describe('app-publisher sections', () => {
     expect(render(<AccessModeDisplay />).container).toBeEmptyDOMElement()
   })
 
+  it('should hide access control content when enabled is false', () => {
+    render(
+      <PublisherAccessSection
+        enabled={false}
+        isAppAccessSet
+        isLoading={false}
+        accessMode={AccessMode.PUBLIC}
+        onClick={vi.fn()}
+      />,
+    )
+
+    expect(screen.queryByText('publishApp.title')).not.toBeInTheDocument()
+    expect(screen.queryByText('accessControlDialog.accessItems.anyone')).not.toBeInTheDocument()
+  })
+
   it('should render workflow actions, batch run links, and workflow tool configuration', () => {
     const handleOpenInExplore = vi.fn()
     const handleEmbed = vi.fn()
+    const handleOpenRunConfig = vi.fn()
 
     const { rerender } = render(
       <PublisherActionsSection
@@ -190,10 +230,15 @@ describe('app-publisher sections', () => {
         disabledFunctionTooltip="disabled"
         handleEmbed={handleEmbed}
         handleOpenInExplore={handleOpenInExplore}
+        handleOpenRunConfig={handleOpenRunConfig}
+        handlePublish={vi.fn()}
         hasHumanInputNode={false}
         hasTriggerNode={false}
         missingStartNode={false}
+        published={false}
         publishedAt={Date.now()}
+        showBatchRunConfig
+        showRunConfig
         toolPublished
         workflowToolAvailable={false}
         workflowToolIsLoading={false}
@@ -205,6 +250,10 @@ describe('app-publisher sections', () => {
     )
 
     expect(screen.getByText('common.batchRunApp')).toHaveAttribute('data-link', 'https://example.com/app?mode=batch')
+    fireEvent.click(screen.getAllByRole('button', { name: 'operation.config' })[0]!)
+    expect(handleOpenRunConfig).toHaveBeenCalledWith('https://example.com/app')
+    fireEvent.click(screen.getAllByRole('button', { name: 'operation.config' })[1]!)
+    expect(handleOpenRunConfig).toHaveBeenCalledWith('https://example.com/app?mode=batch')
     fireEvent.click(screen.getByText('common.openInExplore'))
     expect(handleOpenInExplore).toHaveBeenCalled()
     expect(screen.getByText('workflow-tool-configure')).toBeInTheDocument()
@@ -222,9 +271,12 @@ describe('app-publisher sections', () => {
         disabledFunctionTooltip="disabled"
         handleEmbed={handleEmbed}
         handleOpenInExplore={handleOpenInExplore}
+        handleOpenRunConfig={handleOpenRunConfig}
+        handlePublish={vi.fn()}
         hasHumanInputNode={false}
         hasTriggerNode={false}
         missingStartNode
+        published={false}
         publishedAt={Date.now()}
         toolPublished={false}
         workflowToolAvailable
@@ -246,9 +298,12 @@ describe('app-publisher sections', () => {
         disabledFunctionButton={false}
         handleEmbed={handleEmbed}
         handleOpenInExplore={handleOpenInExplore}
+        handleOpenRunConfig={handleOpenRunConfig}
+        handlePublish={vi.fn()}
         hasHumanInputNode={false}
         hasTriggerNode
         missingStartNode={false}
+        published={false}
         publishedAt={undefined}
         toolPublished={false}
         workflowToolAvailable
diff --git a/web/app/components/app/app-publisher/__tests__/suggested-action.spec.tsx b/web/app/components/app/app-publisher/__tests__/suggested-action.spec.tsx
index ea199dfb78..2ca9e77abf 100644
--- a/web/app/components/app/app-publisher/__tests__/suggested-action.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/suggested-action.spec.tsx
@@ -46,4 +46,47 @@ describe('SuggestedAction', () => {
 
     expect(handleClick).toHaveBeenCalledTimes(1)
   })
+
+  it('should render and trigger the trailing action button when configured', () => {
+    const handleActionClick = vi.fn()
+
+    render(
+      <SuggestedAction
+        link="https://example.com/docs"
+        actionButton={{
+          ariaLabel: 'Configure action',
+          icon: <span>config</span>,
+          onClick: handleActionClick,
+        }}
+      >
+        Configurable action
+      </SuggestedAction>,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Configure action' }))
+
+    expect(screen.getByRole('link', { name: 'Configurable action' })).toHaveAttribute('href', 'https://example.com/docs')
+    expect(handleActionClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('should block action button clicks when disabled', () => {
+    const handleActionClick = vi.fn()
+
+    render(
+      <SuggestedAction
+        link="https://example.com/docs"
+        disabled
+        actionButton={{
+          ariaLabel: 'Configure action',
+          icon: <span>config</span>,
+          onClick: handleActionClick,
+        }}
+      >
+        Disabled with action
+      </SuggestedAction>,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Configure action' }))
+    expect(handleActionClick).not.toHaveBeenCalled()
+  })
 })
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index a066233107..f5b2c80ae8 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -1,4 +1,6 @@
+import type { FormEvent } from 'react'
 import type { ModelAndParameter } from '../configuration/debug/types'
+import type { WorkflowHiddenStartVariable, WorkflowLaunchInputValue } from '@/app/components/app/overview/app-card-utils'
 import type { CollaborationUpdate } from '@/app/components/workflow/collaboration/types/collaboration'
 import type { InputVar, Variable } from '@/app/components/workflow/types'
 import type { PublishWorkflowParams } from '@/types/workflow'
@@ -8,6 +10,7 @@ import { toast } from '@langgenius/dify-ui/toast'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { useKeyPress } from 'ahooks'
 import {
+
   memo,
   use,
   useCallback,
@@ -16,6 +19,13 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import { WorkflowLaunchDialog } from '@/app/components/app/overview/app-card-sections'
+import {
+  buildWorkflowLaunchUrl,
+  createWorkflowLaunchInitialValues,
+  isWorkflowLaunchInputSupported,
+
+} from '@/app/components/app/overview/app-card-utils'
 import EmbeddedModal from '@/app/components/app/overview/embedded'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { trackEvent } from '@/app/components/base/amplitude'
@@ -111,6 +121,9 @@ const AppPublisher = ({
   const [workflowToolDrawerOpen, setWorkflowToolDrawerOpen] = useState(false)
 
   const [embeddingModalOpen, setEmbeddingModalOpen] = useState(false)
+  const [workflowLaunchDialogOpen, setWorkflowLaunchDialogOpen] = useState(false)
+  const [workflowLaunchTargetUrl, setWorkflowLaunchTargetUrl] = useState('')
+  const [workflowLaunchValues, setWorkflowLaunchValues] = useState<Record<string, WorkflowLaunchInputValue>>({})
   const [publishingToMarketplace, setPublishingToMarketplace] = useState(false)
 
   const workflowStore = use(WorkflowContext)
@@ -122,6 +135,22 @@ const AppPublisher = ({
 
   const appURL = getPublisherAppUrl({ appBaseUrl: appBaseURL, accessToken, mode: appDetail?.mode })
   const isChatApp = [AppModeEnum.CHAT, AppModeEnum.AGENT_CHAT, AppModeEnum.COMPLETION].includes(appDetail?.mode || AppModeEnum.CHAT)
+  const hiddenLaunchVariables = useMemo<WorkflowHiddenStartVariable[]>(
+    () => (inputs ?? []).filter(input => input.hide === true),
+    [inputs],
+  )
+  const supportedWorkflowLaunchVariables = useMemo(
+    () => hiddenLaunchVariables.filter(isWorkflowLaunchInputSupported),
+    [hiddenLaunchVariables],
+  )
+  const unsupportedWorkflowLaunchVariables = useMemo(
+    () => hiddenLaunchVariables.filter(variable => !isWorkflowLaunchInputSupported(variable)),
+    [hiddenLaunchVariables],
+  )
+  const initialWorkflowLaunchValues = useMemo(
+    () => createWorkflowLaunchInitialValues(supportedWorkflowLaunchVariables),
+    [supportedWorkflowLaunchVariables],
+  )
 
   const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp, refetch } = useGetUserCanAccessApp({ appId: appDetail?.id, enabled: false })
   const { data: appAccessSubjects, isLoading: isGettingAppWhiteListSubjects } = useAppWhiteListSubjects(appDetail?.id, open && systemFeatures.webapp_auth.enabled && appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS)
@@ -231,6 +260,31 @@ const AppPublisher = ({
     }
   }, [appDetail, setAppDetail])
 
+  const handleOpenWorkflowLaunchDialog = useCallback((targetUrl: string) => {
+    setWorkflowLaunchValues(initialWorkflowLaunchValues)
+    setWorkflowLaunchTargetUrl(targetUrl)
+    setWorkflowLaunchDialogOpen(true)
+  }, [initialWorkflowLaunchValues])
+
+  const handleWorkflowLaunchValueChange = useCallback((variable: string, value: WorkflowLaunchInputValue) => {
+    setWorkflowLaunchValues(prev => ({
+      ...prev,
+      [variable]: value,
+    }))
+  }, [])
+
+  const handleWorkflowLaunchConfirm = useCallback(async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    const targetUrl = await buildWorkflowLaunchUrl({
+      accessibleUrl: workflowLaunchTargetUrl,
+      variables: supportedWorkflowLaunchVariables,
+      values: workflowLaunchValues,
+    })
+
+    window.open(targetUrl, '_blank')
+    setWorkflowLaunchDialogOpen(false)
+  }, [supportedWorkflowLaunchVariables, workflowLaunchTargetUrl, workflowLaunchValues])
   const handlePublishToMarketplace = useCallback(async () => {
     if (!appDetail?.id || publishingToMarketplace)
       return
@@ -377,10 +431,15 @@ const AppPublisher = ({
                 handleOpenChange(false)
                 handleOpenInExplore()
               }}
+              handleOpenRunConfig={handleOpenWorkflowLaunchDialog}
+              handlePublish={handlePublish}
               hasHumanInputNode={hasHumanInputNode}
               hasTriggerNode={hasTriggerNode}
               missingStartNode={missingStartNode}
+              published={published}
               publishedAt={publishedAt}
+              showBatchRunConfig={hiddenLaunchVariables.length > 0 && (appDetail?.mode === AppModeEnum.WORKFLOW || appDetail?.mode === AppModeEnum.COMPLETION)}
+              showRunConfig={hiddenLaunchVariables.length > 0}
               toolPublished={toolPublished}
               workflowToolAvailable={workflowToolAvailable}
               workflowToolIsLoading={workflowTool.isLoading}
@@ -410,8 +469,19 @@ const AppPublisher = ({
           onClose={() => setEmbeddingModalOpen(false)}
           appBaseUrl={appBaseURL}
           accessToken={accessToken}
+          hiddenInputs={hiddenLaunchVariables}
         />
         {showAppAccessControl && <AccessControl app={appDetail!} onConfirm={handleAccessControlUpdate} onClose={() => { setShowAppAccessControl(false) }} />}
+        <WorkflowLaunchDialog
+          t={t}
+          open={workflowLaunchDialogOpen}
+          hiddenVariables={supportedWorkflowLaunchVariables}
+          unsupportedVariables={unsupportedWorkflowLaunchVariables}
+          values={workflowLaunchValues}
+          onOpenChange={setWorkflowLaunchDialogOpen}
+          onValueChange={handleWorkflowLaunchValueChange}
+          onSubmit={handleWorkflowLaunchConfirm}
+        />
       </Popover>
       {workflowToolDrawerOpen && (
         <WorkflowToolDrawer
diff --git a/web/app/components/app/app-publisher/sections.tsx b/web/app/components/app/app-publisher/sections.tsx
index 36422e0055..712312b744 100644
--- a/web/app/components/app/app-publisher/sections.tsx
+++ b/web/app/components/app/app-publisher/sections.tsx
@@ -8,6 +8,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@langgenius/dify-ui/tooltip'
+import { RiSettings2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
@@ -62,6 +63,11 @@ type ActionsSectionProps = Pick<AppPublisherProps, | 'hasHumanInputNode'
     disabledFunctionTooltip?: string
     handleEmbed: () => void
     handleOpenInExplore: () => void
+    handleOpenRunConfig?: (url: string) => void
+    handlePublish: (params?: ModelAndParameter | PublishWorkflowParams) => Promise<void>
+    published: boolean
+    showBatchRunConfig?: boolean
+    showRunConfig?: boolean
     workflowToolIsLoading: boolean
     workflowToolOutdated: boolean
     workflowToolIsCurrentWorkspaceManager: boolean
@@ -253,10 +259,13 @@ export const PublisherActionsSection = ({
   disabledFunctionTooltip,
   handleEmbed,
   handleOpenInExplore,
+  handleOpenRunConfig,
   hasHumanInputNode = false,
   hasTriggerNode = false,
   missingStartNode = false,
   publishedAt,
+  showBatchRunConfig = false,
+  showRunConfig = false,
   toolPublished,
   workflowToolAvailable = true,
   workflowToolIsLoading,
@@ -280,6 +289,13 @@ export const PublisherActionsSection = ({
           disabled={disabledFunctionButton}
           link={appURL}
           icon={<span className="i-ri-play-circle-line h-4 w-4" />}
+          actionButton={showRunConfig
+            ? {
+                ariaLabel: t('operation.config', { ns: 'common' }),
+                icon: <RiSettings2Line className="h-4 w-4" />,
+                onClick: () => handleOpenRunConfig?.(appURL),
+              }
+            : undefined}
         >
           {t('common.runApp', { ns: 'workflow' })}
         </SuggestedAction>
@@ -292,6 +308,13 @@ export const PublisherActionsSection = ({
                 disabled={disabledFunctionButton}
                 link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
                 icon={<span className="i-ri-play-list-2-line h-4 w-4" />}
+                actionButton={showBatchRunConfig
+                  ? {
+                      ariaLabel: t('operation.config', { ns: 'common' }),
+                      icon: <RiSettings2Line className="h-4 w-4" />,
+                      onClick: () => handleOpenRunConfig?.(`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`),
+                    }
+                  : undefined}
               >
                 {t('common.batchRunApp', { ns: 'workflow' })}
               </SuggestedAction>
diff --git a/web/app/components/app/app-publisher/suggested-action.tsx b/web/app/components/app/app-publisher/suggested-action.tsx
index db13364eb9..c1cec6f819 100644
--- a/web/app/components/app/app-publisher/suggested-action.tsx
+++ b/web/app/components/app/app-publisher/suggested-action.tsx
@@ -1,33 +1,93 @@
-import type { HTMLProps, PropsWithChildren } from 'react'
+import type { HTMLProps, PropsWithChildren, MouseEvent as ReactMouseEvent } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine } from '@remixicon/react'
 
+type SuggestedActionButton = {
+  ariaLabel: string
+  icon: React.ReactNode
+  onClick: (event: ReactMouseEvent<HTMLButtonElement>) => void
+}
+
 type SuggestedActionProps = PropsWithChildren<HTMLProps<HTMLAnchorElement> & {
   icon?: React.ReactNode
   link?: string
   disabled?: boolean
+  actionButton?: SuggestedActionButton
 }>
 
-const SuggestedAction = ({ icon, link, disabled, children, className, onClick, ...props }: SuggestedActionProps) => {
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (disabled)
+const SuggestedAction = ({
+  icon,
+  link,
+  disabled,
+  children,
+  className,
+  onClick,
+  actionButton,
+  ...props
+}: SuggestedActionProps) => {
+  const handleClick = (event: ReactMouseEvent<HTMLAnchorElement>) => {
+    if (disabled) {
+      event.preventDefault()
       return
-    onClick?.(e)
+    }
+
+    onClick?.(event)
   }
-  return (
+
+  const handleActionClick = (event: ReactMouseEvent<HTMLButtonElement>) => {
+    if (disabled) {
+      event.preventDefault()
+      return
+    }
+
+    actionButton?.onClick(event)
+  }
+
+  const mainAction = (
     <a
       href={disabled ? undefined : link}
       target="_blank"
       rel="noreferrer"
-      className={cn('flex items-center justify-start gap-2 rounded-lg bg-background-section-burn px-2.5 py-2 text-text-secondary transition-colors not-first:mt-1', disabled ? 'cursor-not-allowed opacity-30 shadow-xs' : 'cursor-pointer text-text-secondary hover:bg-state-accent-hover hover:text-text-accent', className)}
+      className={cn(
+        'flex min-w-0 items-center justify-start gap-2 px-2.5 py-2 text-text-secondary transition-colors',
+        actionButton ? 'flex-1 rounded-l-lg' : 'rounded-lg bg-background-section-burn not-first:mt-1',
+        disabled ? 'cursor-not-allowed opacity-30 shadow-xs' : 'cursor-pointer hover:bg-state-accent-hover hover:text-text-accent',
+      )}
       onClick={handleClick}
       {...props}
     >
-      <div className="relative h-4 w-4">{icon}</div>
+      <div className="relative h-4 w-4 shrink-0">{icon}</div>
       <div className="shrink grow basis-0 system-sm-medium">{children}</div>
-      <RiArrowRightUpLine className="h-3.5 w-3.5" />
+      <RiArrowRightUpLine className="h-3.5 w-3.5 shrink-0" />
     </a>
   )
+
+  if (!actionButton)
+    return mainAction
+
+  return (
+    <div
+      className={cn(
+        'flex items-stretch rounded-lg bg-background-section-burn not-first:mt-1',
+        disabled ? 'opacity-30 shadow-xs' : '',
+        className,
+      )}
+    >
+      {mainAction}
+      <button
+        type="button"
+        aria-label={actionButton.ariaLabel}
+        disabled={disabled}
+        className={cn(
+          'flex w-9 shrink-0 items-center justify-center rounded-r-lg border-l-[0.5px] border-divider-subtle text-text-tertiary transition-colors',
+          disabled ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-state-accent-hover hover:text-text-accent',
+        )}
+        onClick={handleActionClick}
+      >
+        {actionButton.icon}
+      </button>
+    </div>
+  )
 }
 
 export default SuggestedAction
diff --git a/web/app/components/app/configuration/config-var/config-modal/__tests__/form-fields.spec.tsx b/web/app/components/app/configuration/config-var/config-modal/__tests__/form-fields.spec.tsx
index 7a63df3350..cdb1d17833 100644
--- a/web/app/components/app/configuration/config-var/config-modal/__tests__/form-fields.spec.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/__tests__/form-fields.spec.tsx
@@ -4,6 +4,29 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { InputVarType } from '@/app/components/workflow/types'
 import ConfigModalFormFields from '../form-fields'
 
+vi.mock('react-i18next', async () => {
+  const React = await import('react')
+  return {
+    useTranslation: () => ({
+      t: (key: string, options?: Record<string, unknown>) => {
+        const ns = options?.ns as string | undefined
+        return ns ? `${ns}.${key}` : key
+      },
+      i18n: { language: 'en', changeLanguage: vi.fn() },
+    }),
+    Trans: ({ i18nKey, components }: { i18nKey: string, components?: Record<string, ReactNode> }) => (
+      <span data-i18n-key={i18nKey}>
+        {i18nKey}
+        {components?.docLink}
+      </span>
+    ),
+  }
+})
+
+vi.mock('@/context/i18n', () => ({
+  useDocLink: () => (path?: string) => `https://docs.example.com${path || ''}`,
+}))
+
 vi.mock('@/app/components/base/file-uploader', () => ({
   FileUploaderInAttachmentWrapper: ({
     onChange,
@@ -74,6 +97,12 @@ vi.mock('@langgenius/dify-ui/select', async (importOriginal) => {
   }
 })
 
+vi.mock('@langgenius/dify-ui/tooltip', () => ({
+  Tooltip: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  TooltipTrigger: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  TooltipContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+}))
+
 vi.mock('../field', () => ({
   default: ({ children, title }: { children: ReactNode, title: string }) => (
     <div>
@@ -176,7 +205,18 @@ describe('ConfigModalFormFields', () => {
     expect(selectProps.payloadChangeHandlers.default).toHaveBeenCalledWith('beta')
   })
 
-  it('should wire file, json schema, and visibility controls', () => {
+  it('should wire file, json schema, and visibility controls', async () => {
+    const textInputProps = createBaseProps()
+    const textInputView = render(<ConfigModalFormFields {...textInputProps} />)
+    expect(screen.getByText('variableConfig.hidden')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'variableConfig.hiddenDescription' }))
+    expect(await screen.findByText('variableConfig.hiddenDescription')).toBeInTheDocument()
+    const docLink = await screen.findByRole('link')
+    expect(docLink).toHaveAttribute('href', 'https://docs.example.com/use-dify/nodes/user-input#hide-and-pre-fill-input-fields')
+    expect(docLink).toHaveAttribute('target', '_blank')
+    expect(docLink).toHaveAttribute('rel', 'noopener noreferrer')
+    textInputView.unmount()
+
     const singleFileProps = createBaseProps()
     singleFileProps.tempPayload = {
       ...singleFileProps.tempPayload,
@@ -185,18 +225,20 @@ describe('ConfigModalFormFields', () => {
       allowed_file_extensions: [],
       allowed_file_upload_methods: ['remote_url'],
     }
-    render(<ConfigModalFormFields {...singleFileProps} />)
+    const singleFileView = render(<ConfigModalFormFields {...singleFileProps} />)
+    expect(screen.queryByText('variableConfig.hidden')).not.toBeInTheDocument()
+    expect(screen.queryByText('variableConfig.hiddenDescription')).not.toBeInTheDocument()
     fireEvent.click(screen.getByText('single-file-setting'))
     fireEvent.click(screen.getByText('upload-file'))
     fireEvent.click(screen.getAllByText('unchecked')[0]!)
-    fireEvent.click(screen.getAllByText('unchecked')[1]!)
 
     expect(singleFileProps.onFilePayloadChange).toHaveBeenCalledWith({ number_limits: 1 })
     expect(singleFileProps.payloadChangeHandlers.default).toHaveBeenCalledWith(expect.objectContaining({
       fileId: 'file-1',
     }))
     expect(singleFileProps.payloadChangeHandlers.required).toHaveBeenCalledWith(true)
-    expect(singleFileProps.payloadChangeHandlers.hide).toHaveBeenCalledWith(true)
+    expect(singleFileProps.payloadChangeHandlers.hide).not.toHaveBeenCalled()
+    singleFileView.unmount()
 
     const multiFileProps = createBaseProps()
     multiFileProps.tempPayload = {
@@ -207,8 +249,9 @@ describe('ConfigModalFormFields', () => {
       allowed_file_upload_methods: ['remote_url'],
     }
     render(<ConfigModalFormFields {...multiFileProps} />)
+    expect(screen.queryByText('variableConfig.hidden')).not.toBeInTheDocument()
     fireEvent.click(screen.getByText('multi-file-setting'))
-    fireEvent.click(screen.getAllByText('upload-file')[1]!)
+    fireEvent.click(screen.getAllByText('upload-file')[0]!)
     expect(multiFileProps.onFilePayloadChange).toHaveBeenCalledWith({ number_limits: 3 })
     expect(multiFileProps.payloadChangeHandlers.default).toHaveBeenCalledWith([
       expect.objectContaining({ fileId: 'file-1' }),
@@ -367,4 +410,23 @@ describe('ConfigModalFormFields', () => {
 
     expect(screen.getByRole('spinbutton')).toHaveValue(null)
   })
+
+  it('should disable hide checkbox when required is true and disable required when hide is true', () => {
+    const requiredProps = createBaseProps()
+    requiredProps.tempPayload = { ...requiredProps.tempPayload, type: InputVarType.textInput, required: true, hide: false }
+    const { unmount } = render(<ConfigModalFormFields {...requiredProps} />)
+
+    const buttons = screen.getAllByRole('button')
+    const hideButton = buttons.find(btn => btn.textContent === 'unchecked' && btn !== buttons[0])
+    expect(hideButton).toBeDefined()
+    unmount()
+
+    const hideProps = createBaseProps()
+    hideProps.tempPayload = { ...hideProps.tempPayload, type: InputVarType.textInput, required: false, hide: true }
+    render(<ConfigModalFormFields {...hideProps} />)
+
+    const allButtons = screen.getAllByRole('button')
+    const checkedHideButton = allButtons.find(btn => btn.textContent === 'checked')
+    expect(checkedHideButton).toBeDefined()
+  })
 })
diff --git a/web/app/components/app/configuration/config-var/config-modal/__tests__/index-logic.spec.tsx b/web/app/components/app/configuration/config-var/config-modal/__tests__/index-logic.spec.tsx
index e6cb56f490..d32bcec755 100644
--- a/web/app/components/app/configuration/config-var/config-modal/__tests__/index-logic.spec.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/__tests__/index-logic.spec.tsx
@@ -25,6 +25,7 @@ vi.mock('../form-fields', () => ({
     return (
       <div data-testid="config-form-fields">
         <div data-testid="payload-type">{String(props.tempPayload.type)}</div>
+        <div data-testid="payload-hide">{String(props.tempPayload.hide)}</div>
         <div data-testid="payload-label">{String(props.tempPayload.label ?? '')}</div>
         <div data-testid="payload-schema">{String(props.tempPayload.json_schema ?? '')}</div>
         <div data-testid="payload-default">{String(props.tempPayload.default ?? '')}</div>
@@ -115,7 +116,7 @@ describe('ConfigModal logic', () => {
   })
 
   it('should derive payload fields from mocked form-field callbacks', async () => {
-    renderConfigModal()
+    renderConfigModal(createPayload({ hide: true }))
 
     fireEvent.click(screen.getByTestId('valid-key-blur'))
     await waitFor(() => {
@@ -138,6 +139,7 @@ describe('ConfigModal logic', () => {
     fireEvent.click(screen.getByTestId('type-change'))
     await waitFor(() => {
       expect(screen.getByTestId('payload-type')).toHaveTextContent(InputVarType.singleFile)
+      expect(screen.getByTestId('payload-hide')).toHaveTextContent('false')
     })
 
     fireEvent.click(screen.getByTestId('file-payload-change'))
diff --git a/web/app/components/app/configuration/config-var/config-modal/__tests__/utils.spec.ts b/web/app/components/app/configuration/config-var/config-modal/__tests__/utils.spec.ts
index 1c00e1c5b2..2317868004 100644
--- a/web/app/components/app/configuration/config-var/config-modal/__tests__/utils.spec.ts
+++ b/web/app/components/app/configuration/config-var/config-modal/__tests__/utils.spec.ts
@@ -49,11 +49,13 @@ describe('config-modal utils', () => {
       const payload = createInputVar({
         type: InputVarType.textInput,
         default: 'hello',
+        hide: true,
       })
 
       const nextPayload = createPayloadForType(payload, InputVarType.multiFiles)
 
       expect(nextPayload.type).toBe(InputVarType.multiFiles)
+      expect(nextPayload.hide).toBe(false)
       expect(nextPayload.max_length).toBe(DEFAULT_FILE_UPLOAD_SETTING.max_length)
       expect(nextPayload.allowed_file_types).toEqual(DEFAULT_FILE_UPLOAD_SETTING.allowed_file_types)
       expect(nextPayload.default).toBe('hello')
@@ -249,6 +251,24 @@ describe('config-modal utils', () => {
       })
     })
 
+    it('should force file inputs to stay visible when saving', () => {
+      const result = validateConfigModalPayload({
+        tempPayload: createInputVar({
+          type: InputVarType.singleFile,
+          hide: true,
+          allowed_file_types: [SupportUploadFileTypes.document],
+          allowed_file_extensions: [],
+        }),
+        payload: createInputVar(),
+        checkVariableName: () => true,
+        t,
+      })
+
+      expect(result.payloadToSave).toEqual(expect.objectContaining({
+        hide: false,
+      }))
+    })
+
     it('should stop validation when the variable name checker rejects the payload', () => {
       const result = validateConfigModalPayload({
         tempPayload: createInputVar({
diff --git a/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx b/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
index 748108e19a..4bd938c3f6 100644
--- a/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
@@ -13,14 +13,17 @@ import {
   SelectValue,
 } from '@langgenius/dify-ui/select'
 import * as React from 'react'
+import { Trans } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
+import { Infotip } from '@/app/components/base/infotip'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/file-upload-setting'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { InputVarType, SupportUploadFileTypes } from '@/app/components/workflow/types'
+import { useDocLink } from '@/context/i18n'
 import { TransferMethod } from '@/types/app'
 import ConfigSelect from '../config-select'
 import ConfigString from '../config-string'
@@ -68,6 +71,9 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
   t,
 }) => {
   const { type, label, variable } = tempPayload
+  const isFileInput = [InputVarType.singleFile, InputVarType.multiFiles].includes(type)
+  const docLink = useDocLink()
+  const hiddenDescriptionAriaLabel = t('variableConfig.hiddenDescription', { ns: 'appDebug' }).replace(/<[^>]+>/g, '')
 
   return (
     <div className="space-y-2">
@@ -105,7 +111,7 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
       {type === InputVarType.textInput && (
         <Field title={t('variableConfig.defaultValue', { ns: 'appDebug' })}>
           <Input
-            value={tempPayload.default || ''}
+            value={typeof tempPayload.default === 'string' ? tempPayload.default : ''}
             onChange={e => onPayloadChange('default')(e.target.value || undefined)}
             placeholder={t('variableConfig.inputPlaceholder', { ns: 'appDebug' })}
           />
@@ -126,7 +132,7 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
         <Field title={t('variableConfig.defaultValue', { ns: 'appDebug' })}>
           <Input
             type="number"
-            value={tempPayload.default || ''}
+            value={typeof tempPayload.default === 'number' || typeof tempPayload.default === 'string' ? tempPayload.default : ''}
             onChange={e => onPayloadChange('default')(e.target.value || undefined)}
             placeholder={t('variableConfig.inputPlaceholder', { ns: 'appDebug' })}
           />
@@ -186,7 +192,7 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
         </>
       )}
 
-      {[InputVarType.singleFile, InputVarType.multiFiles].includes(type) && (
+      {isFileInput && (
         <>
           <FileUploadSetting
             payload={tempPayload as UploadFileSetting}
@@ -227,14 +233,37 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
       )}
 
       <div className="mt-5! flex h-6 items-center space-x-2">
-        <Checkbox checked={tempPayload.required} disabled={tempPayload.hide} onCheck={() => onPayloadChange('required')(!tempPayload.required)} />
+        <Checkbox checked={tempPayload.required} disabled={!isFileInput && tempPayload.hide} onCheck={() => onPayloadChange('required')(!tempPayload.required)} />
         <span className="system-sm-semibold text-text-secondary">{t('variableConfig.required', { ns: 'appDebug' })}</span>
       </div>
 
-      <div className="mt-5! flex h-6 items-center space-x-2">
-        <Checkbox checked={tempPayload.hide} disabled={tempPayload.required} onCheck={() => onPayloadChange('hide')(!tempPayload.hide)} />
-        <span className="system-sm-semibold text-text-secondary">{t('variableConfig.hide', { ns: 'appDebug' })}</span>
-      </div>
+      {!isFileInput && (
+        <div className="mt-5! flex h-6 items-center space-x-2">
+          <Checkbox checked={tempPayload.hide} disabled={tempPayload.required} onCheck={() => onPayloadChange('hide')(!tempPayload.hide)} />
+          <div className="flex items-center gap-1">
+            <span className="system-sm-semibold text-text-secondary">{t('variableConfig.hidden', { ns: 'appDebug' })}</span>
+            <Infotip
+              aria-label={hiddenDescriptionAriaLabel}
+              popupClassName="max-w-[300px]"
+            >
+              <Trans
+                i18nKey="variableConfig.hiddenDescription"
+                ns="appDebug"
+                components={{
+                  docLink: (
+                    <a
+                      href={docLink('/use-dify/nodes/user-input#hide-and-pre-fill-input-fields')}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-text-accent hover:underline"
+                    />
+                  ),
+                }}
+              />
+            </Infotip>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/web/app/components/app/configuration/config-var/config-modal/utils.ts b/web/app/components/app/configuration/config-var/config-modal/utils.ts
index fdc0ac3501..e24e4b6593 100644
--- a/web/app/components/app/configuration/config-var/config-modal/utils.ts
+++ b/web/app/components/app/configuration/config-var/config-modal/utils.ts
@@ -88,7 +88,9 @@ export const createPayloadForType = (payload: InputVar, type: InputVarType) => {
       draft.default = undefined
 
     if ([InputVarType.singleFile, InputVarType.multiFiles].includes(type)) {
-      (Object.keys(DEFAULT_FILE_UPLOAD_SETTING) as Array<keyof typeof DEFAULT_FILE_UPLOAD_SETTING>).forEach((key) => {
+      draft.hide = false
+      const fileUploadSettingKeys = Object.keys(DEFAULT_FILE_UPLOAD_SETTING) as Array<keyof typeof DEFAULT_FILE_UPLOAD_SETTING>
+      fileUploadSettingKeys.forEach((key) => {
         if (key !== 'max_length')
           draft[key] = DEFAULT_FILE_UPLOAD_SETTING[key] as never
       })
@@ -158,38 +160,41 @@ export const validateConfigModalPayload = ({
   checkVariableName,
   t,
 }: ValidateConfigModalPayloadOptions): ValidateConfigModalPayloadResult => {
+  const normalizedTempPayload = [InputVarType.singleFile, InputVarType.multiFiles].includes(tempPayload.type)
+    ? { ...tempPayload, hide: false }
+    : tempPayload
   const jsonSchemaValue = tempPayload.json_schema
   const schemaEmpty = isJsonSchemaEmpty(jsonSchemaValue)
   const normalizedJsonSchema = schemaEmpty ? undefined : jsonSchemaValue
-  const payloadToSave = tempPayload.type === InputVarType.jsonObject && schemaEmpty
-    ? { ...tempPayload, json_schema: undefined }
-    : tempPayload
+  const payloadToSave = normalizedTempPayload.type === InputVarType.jsonObject && schemaEmpty
+    ? { ...normalizedTempPayload, json_schema: undefined }
+    : normalizedTempPayload
 
-  const moreInfo = tempPayload.variable === payload?.variable
+  const moreInfo = normalizedTempPayload.variable === payload?.variable
     ? undefined
     : {
         type: ChangeType.changeVarName,
-        payload: { beforeKey: payload?.variable || '', afterKey: tempPayload.variable },
+        payload: { beforeKey: payload?.variable || '', afterKey: normalizedTempPayload.variable },
       }
 
-  if (!checkVariableName(tempPayload.variable))
+  if (!checkVariableName(normalizedTempPayload.variable))
     return {}
 
-  if (!tempPayload.label) {
+  if (!normalizedTempPayload.label) {
     return {
       errorMessage: t('variableConfig.errorMsg.labelNameRequired', { ns: 'appDebug' }),
     }
   }
 
-  if (tempPayload.type === InputVarType.select) {
-    if (!tempPayload.options?.length) {
+  if (normalizedTempPayload.type === InputVarType.select) {
+    if (!normalizedTempPayload.options?.length) {
       return {
         errorMessage: t('variableConfig.errorMsg.atLeastOneOption', { ns: 'appDebug' }),
       }
     }
 
     const duplicated = new Set<string>()
-    const hasRepeatedItem = tempPayload.options.some((option) => {
+    const hasRepeatedItem = normalizedTempPayload.options.some((option) => {
       if (duplicated.has(option))
         return true
 
@@ -204,8 +209,8 @@ export const validateConfigModalPayload = ({
     }
   }
 
-  if ([InputVarType.singleFile, InputVarType.multiFiles].includes(tempPayload.type)) {
-    if (!tempPayload.allowed_file_types?.length) {
+  if ([InputVarType.singleFile, InputVarType.multiFiles].includes(normalizedTempPayload.type)) {
+    if (!normalizedTempPayload.allowed_file_types?.length) {
       return {
         errorMessage: t('errorMsg.fieldRequired', {
           ns: 'workflow',
@@ -214,7 +219,7 @@ export const validateConfigModalPayload = ({
       }
     }
 
-    if (tempPayload.allowed_file_types.includes(SupportUploadFileTypes.custom) && !tempPayload.allowed_file_extensions?.length) {
+    if (normalizedTempPayload.allowed_file_types.includes(SupportUploadFileTypes.custom) && !normalizedTempPayload.allowed_file_extensions?.length) {
       return {
         errorMessage: t('errorMsg.fieldRequired', {
           ns: 'workflow',
@@ -224,7 +229,7 @@ export const validateConfigModalPayload = ({
     }
   }
 
-  if (tempPayload.type === InputVarType.jsonObject && !schemaEmpty && typeof normalizedJsonSchema === 'string') {
+  if (normalizedTempPayload.type === InputVarType.jsonObject && !schemaEmpty && typeof normalizedJsonSchema === 'string') {
     try {
       const schema = JSON.parse(normalizedJsonSchema)
       if (schema?.type !== 'object') {
diff --git a/web/app/components/app/overview/__tests__/app-card-sections.spec.tsx b/web/app/components/app/overview/__tests__/app-card-sections.spec.tsx
index 9820e15ad8..d3f83d5d9c 100644
--- a/web/app/components/app/overview/__tests__/app-card-sections.spec.tsx
+++ b/web/app/components/app/overview/__tests__/app-card-sections.spec.tsx
@@ -1,8 +1,38 @@
+import type { FormEvent } from 'react'
 import type { AppDetailResponse } from '@/models/app'
 import { fireEvent, render, screen, within } from '@testing-library/react'
+import { InputVarType } from '@/app/components/workflow/types'
 import { AccessMode } from '@/models/access-control'
 import { AppModeEnum } from '@/types/app'
-import { AppCardAccessControlSection, AppCardOperations, AppCardUrlSection, createAppCardOperations } from '../app-card-sections'
+import { AppCardAccessControlSection, AppCardDialogs, AppCardOperations, AppCardUrlSection, createAppCardOperations, WorkflowLaunchDialog } from '../app-card-sections'
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+  Trans: ({ i18nKey }: { i18nKey: string }) => <span>{i18nKey}</span>,
+}))
+
+vi.mock('../settings', () => ({
+  default: () => <div data-testid="settings-modal" />,
+}))
+
+vi.mock('../embedded', () => ({
+  default: () => <div data-testid="embedded-modal" />,
+}))
+
+vi.mock('../customize', () => ({
+  default: () => <div data-testid="customize-modal" />,
+}))
+
+vi.mock('../../app-access-control', () => ({
+  default: ({ onClose, onConfirm }: { onClose: () => void, onConfirm: () => void }) => (
+    <div data-testid="access-control">
+      <button type="button" onClick={onClose}>close-access</button>
+      <button type="button" onClick={onConfirm}>confirm-access</button>
+    </div>
+  ),
+}))
 
 describe('app-card-sections', () => {
   const t = (key: string) => key
@@ -52,6 +82,7 @@ describe('app-card-sections', () => {
 
   it('should render operation buttons and execute enabled actions', () => {
     const onLaunch = vi.fn()
+    const onLaunchConfig = vi.fn()
     const operations = createAppCardOperations({
       operationKeys: ['launch', 'embedded'],
       t: t as never,
@@ -68,12 +99,19 @@ describe('app-card-sections', () => {
       <AppCardOperations
         t={t as never}
         operations={operations}
+        launchConfigAction={{
+          label: 'operation.config',
+          disabled: false,
+          onClick: onLaunchConfig,
+        }}
       />,
     )
 
     fireEvent.click(screen.getByRole('button', { name: /overview\.appInfo\.launch/i }))
+    fireEvent.click(screen.getByRole('button', { name: /operation\.config/i }))
 
     expect(onLaunch).toHaveBeenCalledTimes(1)
+    expect(onLaunchConfig).toHaveBeenCalledTimes(1)
     expect(screen.getByRole('button', { name: /overview\.appInfo\.embedded\.entry/i })).toBeInTheDocument()
   })
 
@@ -127,4 +165,127 @@ describe('app-card-sections', () => {
     fireEvent.click(within(dialog).getByRole('button', { name: /operation\.confirm/i }))
     expect(onRegenerate).toHaveBeenCalledTimes(1)
   })
+
+  it('should disable all operations when triggerModeDisabled is true', () => {
+    const operations = createAppCardOperations({
+      operationKeys: ['launch', 'settings'],
+      t: t as never,
+      runningStatus: true,
+      triggerModeDisabled: true,
+      onLaunch: vi.fn(),
+      onEmbedded: vi.fn(),
+      onCustomize: vi.fn(),
+      onSettings: vi.fn(),
+      onDevelop: vi.fn(),
+    })
+
+    expect(operations[0]!.disabled).toBe(true)
+    expect(operations[1]!.disabled).toBe(true)
+  })
+
+  it('should render WorkflowLaunchDialog and submit values', () => {
+    const onOpenChange = vi.fn()
+    const onValueChange = vi.fn()
+    const onSubmit = vi.fn((event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+    })
+
+    render(
+      <WorkflowLaunchDialog
+        t={t as never}
+        open
+        hiddenVariables={[{
+          variable: 'secret',
+          label: 'Secret',
+          type: InputVarType.textInput,
+          hide: true,
+          required: true,
+        }]}
+        unsupportedVariables={[]}
+        values={{ secret: 'hello' }}
+        onOpenChange={onOpenChange}
+        onValueChange={onValueChange}
+        onSubmit={onSubmit}
+      />,
+    )
+
+    expect(screen.getByText('overview.appInfo.workflowLaunchHiddenInputs.title')).toBeInTheDocument()
+    fireEvent.submit(screen.getByRole('button', { name: /overview\.appInfo\.launch/i }).closest('form')!)
+    expect(onSubmit).toHaveBeenCalled()
+  })
+
+  it('should return null for WorkflowLaunchDialog when no variables are provided', () => {
+    const { container } = render(
+      <WorkflowLaunchDialog
+        t={t as never}
+        open
+        hiddenVariables={[]}
+        unsupportedVariables={[]}
+        values={{}}
+        onOpenChange={vi.fn()}
+        onValueChange={vi.fn()}
+        onSubmit={vi.fn()}
+      />,
+    )
+
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('should render AppCardDialogs with all modals for web apps', () => {
+    const appInfo = {
+      id: 'app-1',
+      mode: AppModeEnum.CHAT,
+      enable_site: true,
+      enable_api: false,
+      site: { app_base_url: 'https://example.com', access_token: 'token-1' },
+      api_base_url: 'https://api.example.com',
+    } as never
+
+    render(
+      <AppCardDialogs
+        isApp
+        appInfo={appInfo}
+        appMode={AppModeEnum.CHAT}
+        showSettingsModal
+        showEmbedded
+        showCustomizeModal
+        showAccessControl
+        appDetail={{ id: 'app-1', access_mode: AccessMode.PUBLIC } as AppDetailResponse}
+        onCloseSettings={vi.fn()}
+        onCloseEmbedded={vi.fn()}
+        onCloseCustomize={vi.fn()}
+        onCloseAccessControl={vi.fn()}
+        onSaveSiteConfig={vi.fn()}
+        onConfirmAccessControl={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByTestId('settings-modal')).toBeInTheDocument()
+    expect(screen.getByTestId('embedded-modal')).toBeInTheDocument()
+    expect(screen.getByTestId('customize-modal')).toBeInTheDocument()
+    expect(screen.getByTestId('access-control')).toBeInTheDocument()
+  })
+
+  it('should return null for AppCardDialogs when not an app', () => {
+    const { container } = render(
+      <AppCardDialogs
+        isApp={false}
+        appInfo={{} as never}
+        appMode={AppModeEnum.CHAT}
+        showSettingsModal={false}
+        showEmbedded={false}
+        showCustomizeModal={false}
+        showAccessControl={false}
+        appDetail={null}
+        onCloseSettings={vi.fn()}
+        onCloseEmbedded={vi.fn()}
+        onCloseCustomize={vi.fn()}
+        onCloseAccessControl={vi.fn()}
+        onSaveSiteConfig={vi.fn()}
+        onConfirmAccessControl={vi.fn()}
+      />,
+    )
+
+    expect(container).toBeEmptyDOMElement()
+  })
 })
diff --git a/web/app/components/app/overview/__tests__/app-card-utils.spec.ts b/web/app/components/app/overview/__tests__/app-card-utils.spec.ts
index fbfcdaf955..0a6d7f7dd7 100644
--- a/web/app/components/app/overview/__tests__/app-card-utils.spec.ts
+++ b/web/app/components/app/overview/__tests__/app-card-utils.spec.ts
@@ -1,9 +1,22 @@
 import type { AppDetailResponse } from '@/models/app'
-import { BlockEnum } from '@/app/components/workflow/types'
+import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
 import { AccessMode } from '@/models/access-control'
 import { AppModeEnum } from '@/types/app'
 import { basePath } from '@/utils/var'
-import { getAppCardDisplayState, getAppCardOperationKeys, hasWorkflowStartNode, isAppAccessConfigured } from '../app-card-utils'
+import {
+  buildWorkflowLaunchUrl,
+  compressAndEncodeBase64,
+  createWorkflowLaunchInitialValues,
+  getAppCardDisplayState,
+  getAppCardOperationKeys,
+  getAppHiddenLaunchVariables,
+  getEmbeddedIframeSnippet,
+  getEmbeddedScriptSnippet,
+  getWorkflowHiddenStartVariables,
+  hasWorkflowStartNode,
+  isAppAccessConfigured,
+  isWorkflowLaunchInputSupported,
+} from '../app-card-utils'
 
 describe('app-card-utils', () => {
   const baseAppInfo = {
@@ -33,6 +46,108 @@ describe('app-card-utils', () => {
     })).toBe(false)
   })
 
+  it('should return hidden workflow start variables and their initial launch values', () => {
+    const hiddenVariables = getWorkflowHiddenStartVariables({
+      graph: {
+        nodes: [{
+          data: {
+            type: BlockEnum.Start,
+            variables: [
+              {
+                variable: 'visible',
+                label: 'Visible',
+                type: InputVarType.textInput,
+                hide: false,
+                required: false,
+              },
+              {
+                variable: 'secret',
+                label: 'Secret',
+                type: InputVarType.textInput,
+                hide: true,
+                default: 'prefilled',
+                required: false,
+              },
+              {
+                variable: 'enabled',
+                label: 'Enabled',
+                type: InputVarType.checkbox,
+                hide: true,
+                default: true,
+                required: false,
+              },
+            ],
+          },
+        }],
+      },
+    })
+
+    expect(hiddenVariables.map(variable => variable.variable)).toEqual(['secret', 'enabled'])
+    expect(createWorkflowLaunchInitialValues(hiddenVariables)).toEqual({
+      secret: 'prefilled',
+      enabled: true,
+    })
+  })
+
+  it('should return hidden advanced-chat launch variables from the workflow start node first', () => {
+    const hiddenVariables = getAppHiddenLaunchVariables({
+      appInfo: {
+        ...baseAppInfo,
+        mode: AppModeEnum.ADVANCED_CHAT,
+        model_config: {
+          user_input_form: [
+            {
+              'text-input': {
+                label: 'Visible',
+                variable: 'visible',
+                required: true,
+                max_length: 48,
+                default: '',
+                hide: false,
+              },
+            },
+            {
+              checkbox: {
+                label: 'Hidden Toggle',
+                variable: 'hidden_toggle',
+                required: false,
+                default: true,
+                hide: true,
+              },
+            },
+          ],
+        },
+      } as AppDetailResponse,
+      currentWorkflow: {
+        graph: {
+          nodes: [{
+            data: {
+              type: BlockEnum.Start,
+              variables: [
+                {
+                  variable: 'start_secret',
+                  label: 'Start Secret',
+                  type: InputVarType.textInput,
+                  hide: true,
+                  default: 'from-start',
+                  required: false,
+                },
+              ],
+            },
+          }],
+        },
+      },
+    })
+
+    expect(hiddenVariables).toEqual([
+      expect.objectContaining({
+        variable: 'start_secret',
+        type: InputVarType.textInput,
+        default: 'from-start',
+      }),
+    ])
+  })
+
   it('should build the display state for a published web app', () => {
     const state = getAppCardDisplayState({
       appInfo: baseAppInfo,
@@ -104,4 +219,108 @@ describe('app-card-utils', () => {
       isCurrentWorkspaceEditor: false,
     })).toEqual(['launch', 'embedded', 'customize'])
   })
+
+  it('should build a workflow launch URL with serialized parameters', async () => {
+    const url = await buildWorkflowLaunchUrl({
+      accessibleUrl: 'https://example.com/app/workflow/token-1',
+      variables: [
+        { variable: 'name', label: 'Name', type: InputVarType.textInput, hide: true, required: false },
+        { variable: 'enabled', label: 'Enabled', type: InputVarType.checkbox, hide: true, required: false },
+      ],
+      values: { name: 'Alice', enabled: true },
+    })
+
+    const parsed = new URL(url)
+    expect(parsed.searchParams.get('name')).toBe('Alice')
+    expect(parsed.searchParams.get('enabled')).toBe('true')
+  })
+
+  it('should serialize checkbox false and empty string values in launch URL', async () => {
+    const url = await buildWorkflowLaunchUrl({
+      accessibleUrl: 'https://example.com/app/workflow/token-1',
+      variables: [
+        { variable: 'flag', label: 'Flag', type: InputVarType.checkbox, hide: true, required: false },
+        { variable: 'empty', label: 'Empty', type: InputVarType.textInput, hide: true, required: false },
+      ],
+      values: { flag: false, empty: '' },
+    })
+
+    const parsed = new URL(url)
+    expect(parsed.searchParams.get('flag')).toBe('false')
+    expect(parsed.searchParams.get('empty')).toBe('')
+  })
+
+  it('should generate an iframe snippet with the provided URL', () => {
+    const snippet = getEmbeddedIframeSnippet('https://example.com/chatbot/token-1')
+    expect(snippet).toContain('src="https://example.com/chatbot/token-1"')
+    expect(snippet).toContain('frameborder="0"')
+    expect(snippet).toContain('allow="microphone"')
+  })
+
+  it('should generate an embedded script snippet with inputs', () => {
+    const snippet = getEmbeddedScriptSnippet({
+      url: 'https://example.com',
+      token: 'abc123',
+      primaryColor: '#FF0000',
+      isTestEnv: true,
+      inputValues: { name: 'Alice', count: '5' },
+    })
+
+    expect(snippet).toContain('token: \'abc123\'')
+    expect(snippet).toContain('isDev: true')
+    expect(snippet).toContain('name: "Alice"')
+    expect(snippet).toContain('count: "5"')
+    expect(snippet).toContain('background-color: #FF0000')
+  })
+
+  it('should generate an embedded script snippet with empty inputs comment', () => {
+    const snippet = getEmbeddedScriptSnippet({
+      url: 'https://example.com',
+      token: 'abc123',
+      primaryColor: '#1C64F2',
+      inputValues: {},
+    })
+
+    expect(snippet).toContain('// You can define the inputs from the Start node here')
+    expect(snippet).not.toContain('isDev: true')
+  })
+
+  it('should compress and encode base64 using CompressionStream when available', async () => {
+    const result = await compressAndEncodeBase64('hello')
+    expect(typeof result).toBe('string')
+    expect(result.length).toBeGreaterThan(0)
+  })
+
+  it('should fallback to plain base64 when CompressionStream is unavailable', async () => {
+    const original = globalThis.CompressionStream
+    // @ts-expect-error remove for test
+    delete globalThis.CompressionStream
+
+    const result = await compressAndEncodeBase64('hello')
+    expect(result).toBe(btoa('hello'))
+
+    globalThis.CompressionStream = original
+  })
+
+  it('should identify supported workflow launch input types', () => {
+    expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.textInput, hide: true, required: false })).toBe(true)
+    expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.paragraph, hide: true, required: false })).toBe(true)
+    expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.select, hide: true, required: false })).toBe(true)
+    expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.number, hide: true, required: false })).toBe(true)
+    expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.checkbox, hide: true, required: false })).toBe(true)
+    expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.json, hide: true, required: false })).toBe(true)
+    expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.jsonObject, hide: true, required: false })).toBe(true)
+    expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.url, hide: true, required: false })).toBe(true)
+    expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.files, hide: true, required: false })).toBe(false)
+    expect(isWorkflowLaunchInputSupported({ variable: 'v', label: 'V', type: InputVarType.singleFile, hide: true, required: false })).toBe(false)
+  })
+
+  it('should coerce numeric defaults to string in createWorkflowLaunchInitialValues', () => {
+    const result = createWorkflowLaunchInitialValues([
+      { variable: 'count', label: 'Count', type: InputVarType.number, hide: true, required: false, default: 42 },
+      { variable: 'empty', label: 'Empty', type: InputVarType.textInput, hide: true, required: false },
+    ])
+
+    expect(result).toEqual({ count: '42', empty: '' })
+  })
 })
diff --git a/web/app/components/app/overview/__tests__/app-card.spec.tsx b/web/app/components/app/overview/__tests__/app-card.spec.tsx
index 2f730ad278..a6bacce887 100644
--- a/web/app/components/app/overview/__tests__/app-card.spec.tsx
+++ b/web/app/components/app/overview/__tests__/app-card.spec.tsx
@@ -2,6 +2,7 @@ import type { ReactElement, ReactNode } from 'react'
 import type { AppDetailResponse } from '@/models/app'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { renderWithSystemFeatures } from '@/__tests__/utils/mock-system-features'
+import { InputVarType } from '@/app/components/workflow/types'
 import { AccessMode } from '@/models/access-control'
 import { AppModeEnum } from '@/types/app'
 import { basePath } from '@/utils/var'
@@ -17,7 +18,7 @@ const mockSetAppDetail = vi.fn()
 const mockOnChangeStatus = vi.fn()
 const mockOnGenerateCode = vi.fn()
 
-let mockWorkflow: { graph?: { nodes?: Array<{ data?: { type?: string } }> } } | null = null
+let mockWorkflow: { graph?: { nodes?: Array<{ data?: { type?: string, variables?: Array<Record<string, unknown>> } }> } } | null = null
 let mockAccessSubjects: { groups?: unknown[], members?: unknown[] } = { groups: [], members: [] }
 let mockAppDetail: AppDetailResponse | undefined
 
@@ -25,6 +26,7 @@ vi.mock('react-i18next', () => ({
   useTranslation: () => ({
     t: (key: string) => key,
   }),
+  Trans: ({ i18nKey }: { i18nKey?: string }) => i18nKey ?? null,
 }))
 
 vi.mock('@/context/app-context', () => ({
@@ -164,6 +166,182 @@ describe('AppCard', () => {
     expect(mockWindowOpen).toHaveBeenCalledWith(`https://example.com${basePath}/chat/access-token`, '_blank')
   })
 
+  it('should open the workflow web app directly when launch is clicked even with hidden inputs', () => {
+    mockWorkflow = {
+      graph: {
+        nodes: [{
+          data: {
+            type: 'start',
+            variables: [
+              {
+                variable: 'secret',
+                label: 'Secret',
+                type: InputVarType.textInput,
+                hide: true,
+                required: true,
+                default: '',
+              },
+            ],
+          },
+        }],
+      },
+    }
+
+    render(
+      <AppCard
+        appInfo={{
+          ...appInfo,
+          mode: AppModeEnum.WORKFLOW,
+        }}
+        onChangeStatus={mockOnChangeStatus}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('overview.appInfo.launch'))
+
+    expect(mockWindowOpen).toHaveBeenCalledWith(
+      `https://example.com${basePath}/workflow/access-token`,
+      '_blank',
+    )
+    expect(screen.queryByText('overview.appInfo.workflowLaunchHiddenInputs.title')).not.toBeInTheDocument()
+  })
+
+  it('should collect hidden workflow inputs from the config action before launching the workflow web app', async () => {
+    mockWorkflow = {
+      graph: {
+        nodes: [{
+          data: {
+            type: 'start',
+            variables: [
+              {
+                variable: 'secret',
+                label: 'Secret',
+                type: InputVarType.textInput,
+                hide: true,
+                required: true,
+                default: '',
+              },
+            ],
+          },
+        }],
+      },
+    }
+
+    render(
+      <AppCard
+        appInfo={{
+          ...appInfo,
+          mode: AppModeEnum.WORKFLOW,
+        }}
+        onChangeStatus={mockOnChangeStatus}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'operation.config' }))
+
+    expect(screen.getByText('overview.appInfo.workflowLaunchHiddenInputs.title')).toBeInTheDocument()
+
+    fireEvent.change(screen.getByLabelText('Secret'), {
+      target: { value: 'top-secret' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'overview.appInfo.launch' }))
+
+    await waitFor(() => {
+      expect(mockWindowOpen).toHaveBeenCalledWith(
+        `https://example.com${basePath}/workflow/access-token?secret=${encodeURIComponent('top-secret')}`,
+        '_blank',
+      )
+    })
+  })
+
+  it('should open the chat web app directly when launch is clicked even with hidden inputs', () => {
+    mockWorkflow = {
+      graph: {
+        nodes: [{
+          data: {
+            type: 'start',
+            variables: [
+              {
+                variable: 'chat_secret',
+                label: 'Chat Secret',
+                type: InputVarType.textInput,
+                hide: true,
+                required: true,
+                default: '',
+              },
+            ],
+          },
+        }],
+      },
+    }
+
+    render(
+      <AppCard
+        appInfo={{
+          ...appInfo,
+          mode: AppModeEnum.ADVANCED_CHAT,
+        } as AppDetailResponse}
+        onChangeStatus={mockOnChangeStatus}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('overview.appInfo.launch'))
+
+    expect(mockWindowOpen).toHaveBeenCalledWith(
+      `https://example.com${basePath}/chat/access-token`,
+      '_blank',
+    )
+    expect(screen.queryByText('overview.appInfo.workflowLaunchHiddenInputs.title')).not.toBeInTheDocument()
+  })
+
+  it('should collect hidden chatflow inputs from the config action before launching the chat web app', async () => {
+    mockWorkflow = {
+      graph: {
+        nodes: [{
+          data: {
+            type: 'start',
+            variables: [
+              {
+                variable: 'chat_secret',
+                label: 'Chat Secret',
+                type: InputVarType.textInput,
+                hide: true,
+                required: true,
+                default: '',
+              },
+            ],
+          },
+        }],
+      },
+    }
+
+    render(
+      <AppCard
+        appInfo={{
+          ...appInfo,
+          mode: AppModeEnum.ADVANCED_CHAT,
+        } as AppDetailResponse}
+        onChangeStatus={mockOnChangeStatus}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'operation.config' }))
+
+    expect(screen.getByText('overview.appInfo.workflowLaunchHiddenInputs.title')).toBeInTheDocument()
+
+    fireEvent.change(screen.getByLabelText('Chat Secret'), {
+      target: { value: 'chat-secret' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'overview.appInfo.launch' }))
+
+    await waitFor(() => {
+      expect(mockWindowOpen).toHaveBeenCalledWith(
+        `https://example.com${basePath}/chat/access-token?chat_secret=${encodeURIComponent('chat-secret')}`,
+        '_blank',
+      )
+    })
+  })
+
   it('should show the access-control not-set badge when specific access has no subjects', () => {
     render(
       <AppCard
@@ -302,7 +480,7 @@ describe('AppCard', () => {
   })
 
   it('should report refresh failures from access control updates', async () => {
-    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => { })
     mockFetchAppDetailDirect.mockRejectedValueOnce(new Error('refresh failed'))
 
     render(
diff --git a/web/app/components/app/overview/__tests__/workflow-hidden-input-fields.spec.tsx b/web/app/components/app/overview/__tests__/workflow-hidden-input-fields.spec.tsx
new file mode 100644
index 0000000000..309df540a6
--- /dev/null
+++ b/web/app/components/app/overview/__tests__/workflow-hidden-input-fields.spec.tsx
@@ -0,0 +1,214 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { InputVarType } from '@/app/components/workflow/types'
+import WorkflowHiddenInputFields from '../workflow-hidden-input-fields'
+
+describe('WorkflowHiddenInputFields', () => {
+  const onValueChange = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render a text input with label and placeholder', () => {
+    render(
+      <WorkflowHiddenInputFields
+        hiddenVariables={[{
+          variable: 'name',
+          label: 'Full Name',
+          type: InputVarType.textInput,
+          hide: true,
+          required: true,
+        }]}
+        values={{ name: 'Alice' }}
+        onValueChange={onValueChange}
+      />,
+    )
+
+    const input = screen.getByLabelText('Full Name')
+    expect(input).toHaveValue('Alice')
+
+    fireEvent.change(input, { target: { value: 'Bob' } })
+    expect(onValueChange).toHaveBeenCalledWith('name', 'Bob')
+  })
+
+  it('should render a number input for number-typed variables', () => {
+    render(
+      <WorkflowHiddenInputFields
+        hiddenVariables={[{
+          variable: 'count',
+          label: 'Count',
+          type: InputVarType.number,
+          hide: true,
+          required: false,
+        }]}
+        values={{ count: '5' }}
+        onValueChange={onValueChange}
+      />,
+    )
+
+    const input = screen.getByLabelText('Count')
+    expect(input).toHaveAttribute('type', 'number')
+
+    fireEvent.change(input, { target: { value: '10' } })
+    expect(onValueChange).toHaveBeenCalledWith('count', '10')
+  })
+
+  it('should render a checkbox input without a separate label element above', () => {
+    render(
+      <WorkflowHiddenInputFields
+        hiddenVariables={[{
+          variable: 'enabled',
+          label: 'Enable Feature',
+          type: InputVarType.checkbox,
+          hide: true,
+          required: false,
+        }]}
+        values={{ enabled: true }}
+        onValueChange={onValueChange}
+      />,
+    )
+
+    const checkbox = screen.getByRole('checkbox')
+    expect(checkbox).toBeChecked()
+    expect(screen.getByText('Enable Feature')).toBeInTheDocument()
+
+    fireEvent.click(checkbox)
+    expect(onValueChange).toHaveBeenCalledWith('enabled', false)
+  })
+
+  it('should render a select dropdown for select-typed variables', () => {
+    render(
+      <WorkflowHiddenInputFields
+        hiddenVariables={[{
+          variable: 'color',
+          label: 'Color',
+          type: InputVarType.select,
+          hide: true,
+          required: false,
+          options: ['red', 'green', 'blue'],
+        }]}
+        values={{ color: 'red' }}
+        onValueChange={onValueChange}
+      />,
+    )
+
+    expect(screen.getByRole('combobox', { name: 'Color' })).toBeInTheDocument()
+  })
+
+  it('should render a textarea for paragraph-typed variables', () => {
+    render(
+      <WorkflowHiddenInputFields
+        hiddenVariables={[{
+          variable: 'description',
+          label: 'Description',
+          type: InputVarType.paragraph,
+          hide: true,
+          required: false,
+          max_length: 500,
+        }]}
+        values={{ description: 'Hello world' }}
+        onValueChange={onValueChange}
+      />,
+    )
+
+    const textarea = screen.getByPlaceholderText('Description')
+    expect(textarea).toHaveValue('Hello world')
+
+    fireEvent.change(textarea, { target: { value: 'Updated' } })
+    expect(onValueChange).toHaveBeenCalledWith('description', 'Updated')
+  })
+
+  it('should render a textarea for json-typed variables', () => {
+    render(
+      <WorkflowHiddenInputFields
+        hiddenVariables={[{
+          variable: 'config',
+          label: 'Config JSON',
+          type: InputVarType.json,
+          hide: true,
+          required: false,
+        }]}
+        values={{ config: '{"key": "value"}' }}
+        onValueChange={onValueChange}
+      />,
+    )
+
+    const textarea = screen.getByPlaceholderText('Config JSON')
+    expect(textarea).toHaveValue('{"key": "value"}')
+  })
+
+  it('should render a textarea for jsonObject-typed variables', () => {
+    render(
+      <WorkflowHiddenInputFields
+        hiddenVariables={[{
+          variable: 'schema',
+          label: 'Schema',
+          type: InputVarType.jsonObject,
+          hide: true,
+          required: false,
+        }]}
+        values={{ schema: '{}' }}
+        onValueChange={onValueChange}
+      />,
+    )
+
+    const textarea = screen.getByPlaceholderText('Schema')
+    expect(textarea).toHaveValue('{}')
+  })
+
+  it('should use the variable key as label when label is not a string', () => {
+    render(
+      <WorkflowHiddenInputFields
+        hiddenVariables={[{
+          variable: 'my_var',
+          label: { nodeType: 'start' as never, nodeName: 'Start', variable: 'my_var' },
+          type: InputVarType.textInput,
+          hide: true,
+          required: false,
+        }]}
+        values={{ my_var: '' }}
+        onValueChange={onValueChange}
+      />,
+    )
+
+    expect(screen.getByText('my_var')).toBeInTheDocument()
+  })
+
+  it('should use the custom fieldIdPrefix for element ids', () => {
+    const { container } = render(
+      <WorkflowHiddenInputFields
+        hiddenVariables={[{
+          variable: 'token',
+          label: 'Token',
+          type: InputVarType.textInput,
+          hide: true,
+          required: false,
+        }]}
+        values={{ token: 'abc' }}
+        onValueChange={onValueChange}
+        fieldIdPrefix="custom-prefix"
+      />,
+    )
+
+    expect(container.querySelector('#custom-prefix-token')).toBeInTheDocument()
+  })
+
+  it('should render empty string for non-string fieldValue in text inputs', () => {
+    render(
+      <WorkflowHiddenInputFields
+        hiddenVariables={[{
+          variable: 'flag',
+          label: 'Flag',
+          type: InputVarType.textInput,
+          hide: true,
+          required: false,
+        }]}
+        values={{ flag: true as never }}
+        onValueChange={onValueChange}
+      />,
+    )
+
+    const input = screen.getByLabelText('Flag')
+    expect(input).toHaveValue('')
+  })
+})
diff --git a/web/app/components/app/overview/app-card-sections.tsx b/web/app/components/app/overview/app-card-sections.tsx
index 8fef355f34..8db5193f2d 100644
--- a/web/app/components/app/overview/app-card-sections.tsx
+++ b/web/app/components/app/overview/app-card-sections.tsx
@@ -1,7 +1,11 @@
 /* eslint-disable react-refresh/only-export-components */
 import type { TFunction } from 'i18next'
-import type { ComponentType, ReactNode } from 'react'
-import type { OverviewOperationKey } from './app-card-utils'
+import type { ComponentType, FormEvent, ReactNode } from 'react'
+import type {
+  OverviewOperationKey,
+  WorkflowHiddenStartVariable,
+  WorkflowLaunchInputValue,
+} from './app-card-utils'
 import type { ConfigParams } from './settings'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppSSO } from '@/types/app'
@@ -15,12 +19,19 @@ import {
   AlertDialogTitle,
 } from '@langgenius/dify-ui/alert-dialog'
 import { Button } from '@langgenius/dify-ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from '@langgenius/dify-ui/dialog'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@langgenius/dify-ui/tooltip'
-import { RiArrowRightSLine, RiBookOpenLine, RiBuildingLine, RiEqualizer2Line, RiExternalLinkLine, RiGlobalLine, RiLockLine, RiPaintBrushLine, RiVerifiedBadgeLine, RiWindowLine } from '@remixicon/react'
+import { RiArrowRightSLine, RiBookOpenLine, RiBuildingLine, RiEqualizer2Line, RiExternalLinkLine, RiGlobalLine, RiLockLine, RiPaintBrushLine, RiSettings2Line, RiVerifiedBadgeLine, RiWindowLine } from '@remixicon/react'
+import { Trans } from 'react-i18next'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Divider from '@/app/components/base/divider'
 import ShareQRCode from '@/app/components/base/qrcode'
@@ -31,6 +42,7 @@ import CustomizeModal from './customize'
 import EmbeddedModal from './embedded'
 import SettingsModal from './settings'
 import style from './style.module.css'
+import WorkflowHiddenInputFields from './workflow-hidden-input-fields'
 
 type AppInfo = AppDetailResponse & Partial<AppSSO>
 
@@ -50,6 +62,12 @@ type AppCardOperation = {
   onClick: () => void
 }
 
+type LaunchConfigAction = {
+  label: string
+  disabled: boolean
+  onClick: () => void
+}
+
 const OPERATION_ICON_MAP: Record<OverviewOperationKey, OperationIcon> = {
   launch: RiExternalLinkLine,
   embedded: RiWindowLine,
@@ -96,6 +114,65 @@ const MaybeTooltip = ({
   )
 }
 
+export const WorkflowLaunchDialog = ({
+  t,
+  open,
+  hiddenVariables,
+  unsupportedVariables,
+  values,
+  onOpenChange,
+  onValueChange,
+  onSubmit,
+}: {
+  t: TFunction
+  open: boolean
+  hiddenVariables: WorkflowHiddenStartVariable[]
+  unsupportedVariables: WorkflowHiddenStartVariable[]
+  values: Record<string, WorkflowLaunchInputValue>
+  onOpenChange: (open: boolean) => void
+  onValueChange: (variable: string, value: WorkflowLaunchInputValue) => void
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void
+}) => {
+  if (!hiddenVariables.length && !unsupportedVariables.length)
+    return null
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-[560px]! max-w-[calc(100vw-2rem)]! p-0!">
+        <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+          <DialogTitle className="title-2xl-semi-bold text-text-primary">
+            {t('overview.appInfo.workflowLaunchHiddenInputs.title', { ns: 'appOverview' })}
+          </DialogTitle>
+          <DialogDescription className="system-md-regular text-text-tertiary">
+            <Trans
+              i18nKey="overview.appInfo.workflowLaunchHiddenInputs.description"
+              ns="appOverview"
+              components={{ bold: <span className="system-md-medium" /> }}
+            />
+          </DialogDescription>
+        </div>
+        <form onSubmit={onSubmit}>
+          <div className="space-y-4 px-6 pb-4">
+            <WorkflowHiddenInputFields
+              hiddenVariables={hiddenVariables}
+              values={values}
+              onValueChange={onValueChange}
+            />
+          </div>
+          <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-divider-subtle px-6 py-4">
+            <Button onClick={() => onOpenChange(false)}>
+              {t('operation.cancel', { ns: 'common' })}
+            </Button>
+            <Button type="submit" variant="primary">
+              {t('overview.appInfo.launch', { ns: 'appOverview' })}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
 export const createAppCardOperations = ({
   operationKeys,
   t,
@@ -251,20 +328,15 @@ export const AppCardAccessControlSection = ({
 export const AppCardOperations = ({
   t,
   operations,
+  launchConfigAction,
 }: {
   t: TFunction
   operations: AppCardOperation[]
+  launchConfigAction?: LaunchConfigAction
 }) => (
   <>
-    {operations.map(({ key, label, Icon, disabled, onClick }) => (
-      <Button
-        className="mr-1 min-w-[88px]"
-        size="small"
-        variant="ghost"
-        key={key}
-        onClick={onClick}
-        disabled={disabled}
-      >
+    {operations.map(({ key, label, Icon, disabled, onClick }) => {
+      const buttonContent = (
         <MaybeTooltip
           content={t('overview.appInfo.preUseReminder', { ns: 'appOverview' }) ?? ''}
           tooltipClassName="mt-[-8px]"
@@ -275,8 +347,72 @@ export const AppCardOperations = ({
             <div className={`${disabled ? 'text-components-button-ghost-text-disabled' : 'text-text-tertiary'} px-[3px] system-xs-medium`}>{label}</div>
           </div>
         </MaybeTooltip>
-      </Button>
-    ))}
+      )
+
+      if (key === 'launch' && launchConfigAction) {
+        return (
+          <MaybeTooltip
+            key={key}
+            content={t('overview.appInfo.preUseReminder', { ns: 'appOverview' }) ?? ''}
+            tooltipClassName="mt-[-8px]"
+            show={disabled}
+          >
+            <Button
+              className="mr-1 border-0 px-0 py-0 shadow-none backdrop-blur-none hover:bg-components-button-secondary-bg"
+              size="small"
+              variant="secondary"
+              onClick={onClick}
+              disabled={disabled}
+            >
+              <div className="flex h-full min-w-[88px] items-center justify-center rounded-l-md px-2 hover:bg-components-button-secondary-bg-hover">
+                <div className="flex items-center justify-center gap-px">
+                  <Icon className="h-3.5 w-3.5" />
+                  <div className="px-[3px] system-xs-medium">{label}</div>
+                </div>
+              </div>
+              <div
+                aria-hidden="true"
+                className="h-4 w-px shrink-0 bg-divider-regular opacity-100"
+              />
+              <div
+                className="flex h-full w-8 shrink-0 items-center justify-center rounded-r-md hover:bg-components-button-secondary-bg-hover"
+                onClick={(event) => {
+                  event.stopPropagation()
+                  launchConfigAction.onClick()
+                }}
+                aria-label={launchConfigAction.label}
+                role="button"
+                tabIndex={disabled ? -1 : 0}
+                onKeyDown={(event) => {
+                  if (disabled)
+                    return
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    launchConfigAction.onClick()
+                  }
+                }}
+              >
+                <RiSettings2Line className="h-3.5 w-3.5" />
+              </div>
+            </Button>
+          </MaybeTooltip>
+        )
+      }
+
+      return (
+        <Button
+          className="mr-1 min-w-[88px]"
+          size="small"
+          variant="ghost"
+          key={key}
+          onClick={onClick}
+          disabled={disabled}
+        >
+          {buttonContent}
+        </Button>
+      )
+    })}
   </>
 )
 
@@ -295,6 +431,7 @@ export const AppCardDialogs = ({
   onCloseAccessControl,
   onSaveSiteConfig,
   onConfirmAccessControl,
+  hiddenInputs,
 }: {
   isApp: boolean
   appInfo: AppInfo
@@ -310,6 +447,7 @@ export const AppCardDialogs = ({
   onCloseAccessControl: () => void
   onSaveSiteConfig?: (params: ConfigParams) => Promise<void>
   onConfirmAccessControl: () => Promise<void>
+  hiddenInputs?: WorkflowHiddenStartVariable[]
 }) => {
   if (!isApp)
     return null
@@ -329,6 +467,7 @@ export const AppCardDialogs = ({
         onClose={onCloseEmbedded}
         appBaseUrl={appInfo.site?.app_base_url}
         accessToken={appInfo.site?.access_token}
+        hiddenInputs={hiddenInputs}
       />
       <CustomizeModal
         isShow={showCustomizeModal}
diff --git a/web/app/components/app/overview/app-card-utils.ts b/web/app/components/app/overview/app-card-utils.ts
index 345531091d..c08fa73b18 100644
--- a/web/app/components/app/overview/app-card-utils.ts
+++ b/web/app/components/app/overview/app-card-utils.ts
@@ -1,6 +1,8 @@
+import type { InputVar } from '@/app/components/workflow/types'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppSSO } from '@/types/app'
-import { BlockEnum } from '@/app/components/workflow/types'
+import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
+import { IS_CE_EDITION } from '@/config'
 import { AccessMode } from '@/models/access-control'
 import { AppModeEnum } from '@/types/app'
 import { basePath } from '@/utils/var'
@@ -8,6 +10,11 @@ import { basePath } from '@/utils/var'
 type OverviewCardType = 'api' | 'webapp'
 
 export type OverviewOperationKey = 'launch' | 'embedded' | 'customize' | 'settings' | 'develop'
+export type WorkflowLaunchInputValue = string | boolean
+export type WorkflowHiddenStartVariable = Pick<
+  InputVar,
+  'default' | 'hide' | 'label' | 'max_length' | 'options' | 'required' | 'type' | 'variable'
+>
 
 type AppInfo = AppDetailResponse & Partial<AppSSO>
 
@@ -16,6 +23,7 @@ type WorkflowLike = {
     nodes?: Array<{
       data?: {
         type?: string
+        variables?: InputVar[]
       }
     }>
   }
@@ -42,10 +50,173 @@ const getCardAppMode = (mode: AppModeEnum) => {
   return (mode !== AppModeEnum.COMPLETION && mode !== AppModeEnum.WORKFLOW) ? AppModeEnum.CHAT : mode
 }
 
+const SUPPORTED_WORKFLOW_LAUNCH_INPUT_TYPES = new Set<InputVarType>([
+  InputVarType.textInput,
+  InputVarType.paragraph,
+  InputVarType.select,
+  InputVarType.number,
+  InputVarType.checkbox,
+  InputVarType.json,
+  InputVarType.jsonObject,
+  InputVarType.url,
+])
+
+const coerceWorkflowLaunchDefaultValue = (variable: WorkflowHiddenStartVariable): WorkflowLaunchInputValue => {
+  if (variable.type === InputVarType.checkbox) {
+    if (typeof variable.default === 'boolean')
+      return variable.default
+
+    return String(variable.default).toLowerCase() === 'true'
+  }
+
+  if (typeof variable.default === 'number')
+    return String(variable.default)
+
+  return String(variable.default ?? '')
+}
+
 export const hasWorkflowStartNode = (currentWorkflow: WorkflowLike) => {
   return currentWorkflow?.graph?.nodes?.some(node => node.data?.type === BlockEnum.Start) ?? false
 }
 
+export const getWorkflowHiddenStartVariables = (currentWorkflow: WorkflowLike): WorkflowHiddenStartVariable[] => {
+  const startNode = currentWorkflow?.graph?.nodes?.find(node => node.data?.type === BlockEnum.Start)
+  return (startNode?.data?.variables ?? []).filter(variable => variable.hide === true)
+}
+
+export const getAppHiddenLaunchVariables = ({
+  appInfo,
+  currentWorkflow,
+}: {
+  appInfo: AppInfo
+  currentWorkflow: WorkflowLike
+}) => {
+  if ([AppModeEnum.WORKFLOW, AppModeEnum.ADVANCED_CHAT].includes(appInfo.mode))
+    return getWorkflowHiddenStartVariables(currentWorkflow)
+}
+
+export const isWorkflowLaunchInputSupported = (variable: WorkflowHiddenStartVariable) => {
+  return SUPPORTED_WORKFLOW_LAUNCH_INPUT_TYPES.has(variable.type)
+}
+
+export const createWorkflowLaunchInitialValues = (variables: WorkflowHiddenStartVariable[]) => {
+  return variables.reduce<Record<string, WorkflowLaunchInputValue>>((acc, variable) => {
+    acc[variable.variable] = coerceWorkflowLaunchDefaultValue(variable)
+    return acc
+  }, {})
+}
+
+export const buildWorkflowLaunchUrl = async ({
+  accessibleUrl,
+  variables,
+  values,
+}: {
+  accessibleUrl: string
+  variables: WorkflowHiddenStartVariable[]
+  values: Record<string, WorkflowLaunchInputValue>
+}) => {
+  const targetUrl = new URL(accessibleUrl, window.location.origin)
+  variables.forEach((variable) => {
+    const rawValue = values[variable.variable]
+    const serializedValue = variable.type === InputVarType.checkbox
+      ? String(Boolean(rawValue))
+      : String(rawValue ?? '')
+
+    targetUrl.searchParams.set(variable.variable, serializedValue)
+  })
+
+  return targetUrl.toString()
+}
+
+export const getEmbeddedIframeSnippet = (iframeUrl: string) =>
+  `<iframe
+ src="${iframeUrl}"
+ style="width: 100%; height: 100%; min-height: 700px"
+ frameborder="0"
+ allow="microphone">
+</iframe>`
+
+const getScriptInputsContent = (values: Record<string, WorkflowLaunchInputValue>) => {
+  const entries = Object.entries(values)
+
+  if (!entries.length) {
+    return `{
+    // You can define the inputs from the Start node here
+    // key is the variable name
+    // e.g.
+    // name: "NAME"
+  }`
+  }
+
+  return `{
+${entries.map(([key, value]) => `    ${key}: ${JSON.stringify(value)},`).join('\n')}
+  }`
+}
+
+export const getEmbeddedScriptSnippet = ({
+  url,
+  token,
+  primaryColor,
+  isTestEnv,
+  inputValues,
+}: {
+  url: string
+  token: string
+  primaryColor: string
+  isTestEnv?: boolean
+  inputValues: Record<string, WorkflowLaunchInputValue>
+}) =>
+  `<script>
+ window.difyChatbotConfig = {
+  token: '${token}'${isTestEnv
+    ? `,
+  isDev: true`
+    : ''}${IS_CE_EDITION
+    ? `,
+  baseUrl: '${url}${basePath}'`
+    : ''},
+  inputs: ${getScriptInputsContent(inputValues)},
+  systemVariables: {
+    // user_id: 'YOU CAN DEFINE USER ID HERE',
+    // conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
+  },
+  userVariables: {
+    // avatar_url: 'YOU CAN DEFINE USER AVATAR URL HERE',
+    // name: 'YOU CAN DEFINE USER NAME HERE',
+  },
+ }
+</script>
+<script
+ src="${url}${basePath}/embed.min.js"
+ id="${token}"
+ defer>
+</script>
+<style>
+  #dify-chatbot-bubble-button {
+    background-color: ${primaryColor} !important;
+  }
+  #dify-chatbot-bubble-window {
+    width: 24rem !important;
+    height: 40rem !important;
+  }
+</style>`
+
+export const getChromePluginContent = (iframeUrl: string) => `ChatBot URL: ${iframeUrl}`
+
+export const compressAndEncodeBase64 = async (input: string) => {
+  const uint8Array = new TextEncoder().encode(input)
+  if (typeof CompressionStream === 'undefined')
+    return btoa(String.fromCharCode(...uint8Array))
+
+  const compressedStream = new Response(
+    new Blob([uint8Array])
+      .stream()
+      .pipeThrough(new CompressionStream('gzip')),
+  ).arrayBuffer()
+  const compressedUint8Array = new Uint8Array(await compressedStream)
+  return btoa(String.fromCharCode(...compressedUint8Array))
+}
+
 export const getAppCardDisplayState = ({
   appInfo,
   cardType,
diff --git a/web/app/components/app/overview/app-card.tsx b/web/app/components/app/overview/app-card.tsx
index b7ec4a2d81..9b1fc3a032 100644
--- a/web/app/components/app/overview/app-card.tsx
+++ b/web/app/components/app/overview/app-card.tsx
@@ -1,4 +1,5 @@
 'use client'
+import type { WorkflowLaunchInputValue } from './app-card-utils'
 import type { ConfigParams } from './settings'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppSSO } from '@/types/app'
@@ -28,11 +29,16 @@ import {
   AppCardOperations,
   AppCardUrlSection,
   createAppCardOperations,
+  WorkflowLaunchDialog,
 } from './app-card-sections'
 import {
+  buildWorkflowLaunchUrl,
+  createWorkflowLaunchInitialValues,
   getAppCardDisplayState,
   getAppCardOperationKeys,
+  getAppHiddenLaunchVariables,
   isAppAccessConfigured,
+  isWorkflowLaunchInputSupported,
 } from './app-card-utils'
 
 export type IAppCardProps = {
@@ -63,7 +69,8 @@ function AppCard({
   const router = useRouter()
   const pathname = usePathname()
   const { isCurrentWorkspaceManager, isCurrentWorkspaceEditor } = useAppContext()
-  const { data: currentWorkflow } = useAppWorkflow(appInfo.mode === AppModeEnum.WORKFLOW ? appInfo.id : '')
+  const shouldFetchWorkflow = appInfo.mode === AppModeEnum.WORKFLOW || appInfo.mode === AppModeEnum.ADVANCED_CHAT
+  const { data: currentWorkflow } = useAppWorkflow(shouldFetchWorkflow ? appInfo.id : '')
   const docLink = useDocLink()
   const appDetail = useAppStore(state => state.appDetail)
   const setAppDetail = useAppStore(state => state.setAppDetail)
@@ -73,6 +80,8 @@ function AppCard({
   const [genLoading, setGenLoading] = useState(false)
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
   const [showAccessControl, setShowAccessControl] = useState(false)
+  const [showWorkflowLaunchDialog, setShowWorkflowLaunchDialog] = useState(false)
+  const [workflowLaunchValues, setWorkflowLaunchValues] = useState<Record<string, WorkflowLaunchInputValue>>({})
   const { t } = useTranslation()
   const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
   const { data: appAccessSubjects } = useAppWhiteListSubjects(
@@ -98,6 +107,25 @@ function AppCard({
     () => isAppAccessConfigured(appDetail, appAccessSubjects),
     [appAccessSubjects, appDetail],
   )
+  const hiddenLaunchVariables = useMemo(
+    () => getAppHiddenLaunchVariables({
+      appInfo,
+      currentWorkflow,
+    }) || [],
+    [appInfo, currentWorkflow],
+  )
+  const supportedWorkflowLaunchVariables = useMemo(
+    () => hiddenLaunchVariables.filter(isWorkflowLaunchInputSupported),
+    [hiddenLaunchVariables],
+  )
+  const unsupportedWorkflowLaunchVariables = useMemo(
+    () => hiddenLaunchVariables.filter(variable => !isWorkflowLaunchInputSupported(variable)),
+    [hiddenLaunchVariables],
+  )
+  const initialWorkflowLaunchValues = useMemo(
+    () => createWorkflowLaunchInitialValues(supportedWorkflowLaunchVariables),
+    [supportedWorkflowLaunchVariables],
+  )
 
   const onGenCode = async () => {
     if (!onGenerateCode)
@@ -139,6 +167,31 @@ function AppCard({
     window.open(cardState.accessibleUrl, '_blank')
   }, [cardState.accessibleUrl])
 
+  const handleOpenWorkflowLaunchDialog = useCallback(() => {
+    setWorkflowLaunchValues(initialWorkflowLaunchValues)
+    setShowWorkflowLaunchDialog(true)
+  }, [initialWorkflowLaunchValues])
+
+  const handleWorkflowLaunchValueChange = useCallback((variable: string, value: WorkflowLaunchInputValue) => {
+    setWorkflowLaunchValues(prev => ({
+      ...prev,
+      [variable]: value,
+    }))
+  }, [])
+
+  const handleWorkflowLaunchConfirm = useCallback(async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    const targetUrl = await buildWorkflowLaunchUrl({
+      accessibleUrl: cardState.accessibleUrl,
+      variables: supportedWorkflowLaunchVariables,
+      values: workflowLaunchValues,
+    })
+
+    window.open(targetUrl, '_blank')
+    setShowWorkflowLaunchDialog(false)
+  }, [cardState.accessibleUrl, supportedWorkflowLaunchVariables, workflowLaunchValues])
+
   const handleOpenCustomize = useCallback(() => {
     setShowCustomizeModal(true)
   }, [])
@@ -304,7 +357,17 @@ function AppCard({
         {!cardState.isMinimalState && (
           <div className="flex items-center gap-1 self-stretch p-3">
             {!isApp && <SecretKeyButton appId={appInfo.id} />}
-            <AppCardOperations t={t} operations={operations} />
+            <AppCardOperations
+              t={t}
+              operations={operations}
+              launchConfigAction={hiddenLaunchVariables.length > 0
+                ? {
+                    label: t('operation.config', { ns: 'common' }),
+                    disabled: triggerModeDisabled || !cardState.runningStatus,
+                    onClick: handleOpenWorkflowLaunchDialog,
+                  }
+                : undefined}
+            />
           </div>
         )}
       </div>
@@ -323,6 +386,17 @@ function AppCard({
         onCloseAccessControl={() => setShowAccessControl(false)}
         onSaveSiteConfig={onSaveSiteConfig}
         onConfirmAccessControl={handleAccessControlUpdate}
+        hiddenInputs={hiddenLaunchVariables}
+      />
+      <WorkflowLaunchDialog
+        t={t}
+        open={showWorkflowLaunchDialog}
+        hiddenVariables={supportedWorkflowLaunchVariables}
+        unsupportedVariables={unsupportedWorkflowLaunchVariables}
+        values={workflowLaunchValues}
+        onOpenChange={setShowWorkflowLaunchDialog}
+        onValueChange={handleWorkflowLaunchValueChange}
+        onSubmit={handleWorkflowLaunchConfirm}
       />
     </div>
   )
diff --git a/web/app/components/app/overview/embedded/__tests__/index.spec.tsx b/web/app/components/app/overview/embedded/__tests__/index.spec.tsx
index 0a843c26fd..a6e391cb0e 100644
--- a/web/app/components/app/overview/embedded/__tests__/index.spec.tsx
+++ b/web/app/components/app/overview/embedded/__tests__/index.spec.tsx
@@ -1,10 +1,11 @@
 import type { SiteInfo } from '@/models/share'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
-
 import { act } from 'react'
-import { afterAll, afterEach, describe, expect, it, vi } from 'vitest'
+
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+import { InputVarType } from '@/app/components/workflow/types'
 import Embedded from '../index'
 
 vi.mock('../style.module.css', () => ({
@@ -46,6 +47,7 @@ vi.mock('@/context/app-context', () => ({
 }))
 const mockWindowOpen = vi.spyOn(window, 'open').mockImplementation(() => null)
 const mockedCopy = vi.mocked(copy)
+const originalCompressionStream = globalThis.CompressionStream
 
 const siteInfo: SiteInfo = {
   title: 'test site',
@@ -70,6 +72,22 @@ const getCopyButton = () => {
 }
 
 describe('Embedded', () => {
+  beforeAll(() => {
+    class MockCompressionStream {
+      readable: ReadableStream<Uint8Array>
+      writable: WritableStream<Uint8Array>
+
+      constructor() {
+        const transformStream = new TransformStream<Uint8Array, Uint8Array>()
+        this.readable = transformStream.readable
+        this.writable = transformStream.writable
+      }
+    }
+
+    // @ts-expect-error test polyfill
+    globalThis.CompressionStream = MockCompressionStream
+  })
+
   afterEach(() => {
     vi.clearAllMocks()
     mockWindowOpen.mockClear()
@@ -77,6 +95,7 @@ describe('Embedded', () => {
 
   afterAll(() => {
     mockWindowOpen.mockRestore()
+    globalThis.CompressionStream = originalCompressionStream
   })
 
   it('builds theme and copies iframe snippet', async () => {
@@ -84,14 +103,20 @@ describe('Embedded', () => {
       render(<Embedded {...baseProps} />)
     })
 
+    await waitFor(() => {
+      expect(screen.getByText((content, node) => node?.tagName.toLowerCase() === 'pre' && content.includes('/chatbot/token'))).toBeInTheDocument()
+    })
+
     const actionButton = getCopyButton()
     const innerDiv = actionButton.querySelector('div')
-    act(() => {
+    await act(async () => {
       fireEvent.click(innerDiv ?? actionButton)
     })
 
     expect(mockThemeBuilder.buildTheme).toHaveBeenCalledWith(siteInfo.chat_color_theme, siteInfo.chat_color_theme_inverted)
-    expect(mockedCopy).toHaveBeenCalledWith(expect.stringContaining('/chatbot/token'))
+    await waitFor(() => {
+      expect(mockedCopy).toHaveBeenCalledWith(expect.stringContaining('/chatbot/token'))
+    })
   })
 
   it('opens chrome plugin store link when chrome option selected', async () => {
@@ -116,4 +141,106 @@ describe('Embedded', () => {
       'noopener,noreferrer',
     )
   })
+
+  it('keeps hidden inputs collapsed by default and updates iframe and script content when values change', async () => {
+    render(
+      <Embedded
+        {...baseProps}
+        hiddenInputs={[{
+          variable: 'secret',
+          label: 'Secret',
+          type: InputVarType.textInput,
+          hide: true,
+          required: true,
+          default: '',
+        }]}
+      />,
+    )
+
+    expect(screen.queryByLabelText('Secret')).not.toBeInTheDocument()
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('appOverview.overview.appInfo.embedded.hiddenInputs.title').closest('button')!)
+    })
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Secret')).toBeInTheDocument()
+    })
+
+    await act(async () => {
+      fireEvent.change(screen.getByLabelText('Secret'), {
+        target: { value: 'top-secret' },
+      })
+    })
+
+    expect(document.querySelector('pre')?.textContent ?? '').toContain('/chatbot/token')
+
+    await waitFor(() => {
+      const codeBlock = document.querySelector('pre')
+      expect(codeBlock?.textContent ?? '').toContain('/chatbot/token?secret=dG9wLXNlY3JldA%3D%3D')
+    })
+
+    const optionButtons = document.body.querySelectorAll('[class*="option"]')
+    act(() => {
+      fireEvent.click(optionButtons[1]!)
+    })
+
+    await waitFor(() => {
+      const codeBlock = document.querySelector('pre')
+      expect(codeBlock?.textContent ?? '').toContain('secret: "top-secret"')
+    })
+  })
+
+  it('copies script content when scripts option is selected', async () => {
+    await act(async () => {
+      render(<Embedded {...baseProps} />)
+    })
+
+    const optionButtons = document.body.querySelectorAll('[class*="option"]')
+    act(() => {
+      fireEvent.click(optionButtons[1]!)
+    })
+
+    await waitFor(() => {
+      const codeBlock = document.querySelector('pre')
+      expect(codeBlock?.textContent ?? '').toContain('token: \'token\'')
+    })
+
+    const actionButton = getCopyButton()
+    const innerDiv = actionButton.querySelector('div')
+    await act(async () => {
+      fireEvent.click(innerDiv ?? actionButton)
+    })
+
+    await waitFor(() => {
+      expect(mockedCopy).toHaveBeenCalledWith(expect.stringContaining('token: \'token\''))
+    })
+  })
+
+  it('copies chrome plugin URL (without prefix) when chromePlugin option is selected', async () => {
+    await act(async () => {
+      render(<Embedded {...baseProps} />)
+    })
+
+    const optionButtons = document.body.querySelectorAll('[class*="option"]')
+    act(() => {
+      fireEvent.click(optionButtons[2]!)
+    })
+
+    await waitFor(() => {
+      const codeBlock = document.querySelector('pre')
+      expect(codeBlock?.textContent ?? '').toContain('ChatBot URL:')
+    })
+
+    const actionButton = getCopyButton()
+    const innerDiv = actionButton.querySelector('div')
+    await act(async () => {
+      fireEvent.click(innerDiv ?? actionButton)
+    })
+
+    await waitFor(() => {
+      expect(mockedCopy).toHaveBeenCalledWith(expect.stringContaining('/chatbot/token'))
+      expect(mockedCopy).not.toHaveBeenCalledWith(expect.stringContaining('ChatBot URL:'))
+    })
+  })
 })
diff --git a/web/app/components/app/overview/embedded/index.tsx b/web/app/components/app/overview/embedded/index.tsx
index 12203178f1..112848760b 100644
--- a/web/app/components/app/overview/embedded/index.tsx
+++ b/web/app/components/app/overview/embedded/index.tsx
@@ -1,88 +1,46 @@
+import type { MutableRefObject } from 'react'
+import type { WorkflowHiddenStartVariable, WorkflowLaunchInputValue } from '../app-card-utils'
 import type { SiteInfo } from '@/models/share'
 import { cn } from '@langgenius/dify-ui/cn'
 import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
+import {
+  RiArrowDownSLine,
+  RiArrowRightSLine,
+} from '@remixicon/react'
 import copy from 'copy-to-clipboard'
-import * as React from 'react'
-import { useState } from 'react'
+import { Suspense, use, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { useThemeContext } from '@/app/components/base/chat/embedded-chatbot/theme/theme-context'
-import { IS_CE_EDITION } from '@/config'
+import { InputVarType } from '@/app/components/workflow/types'
 import { useAppContext } from '@/context/app-context'
 import { basePath } from '@/utils/var'
+import {
+  compressAndEncodeBase64,
+  createWorkflowLaunchInitialValues,
+  getChromePluginContent,
+  getEmbeddedIframeSnippet,
+  getEmbeddedScriptSnippet,
+  isWorkflowLaunchInputSupported,
+} from '../app-card-utils'
+import WorkflowHiddenInputFields from '../workflow-hidden-input-fields'
 import style from './style.module.css'
 
 type Props = {
   siteInfo?: SiteInfo
   isShow: boolean
   onClose: () => void
-  accessToken: string
-  appBaseUrl: string
+  accessToken?: string
+  appBaseUrl?: string
+  hiddenInputs?: WorkflowHiddenStartVariable[]
   className?: string
 }
 
-const OPTION_MAP = {
-  iframe: {
-    getContent: (url: string, token: string) =>
-      `<iframe
- src="${url}${basePath}/chatbot/${token}"
- style="width: 100%; height: 100%; min-height: 700px"
- frameborder="0"
- allow="microphone">
-</iframe>`,
-  },
-  scripts: {
-    getContent: (url: string, token: string, primaryColor: string, isTestEnv?: boolean) =>
-      `<script>
- window.difyChatbotConfig = {
-  token: '${token}'${isTestEnv
-    ? `,
-  isDev: true`
-    : ''}${IS_CE_EDITION
-    ? `,
-  baseUrl: '${url}${basePath}'`
-    : ''},
-  inputs: {
-    // You can define the inputs from the Start node here
-    // key is the variable name
-    // e.g.
-    // name: "NAME"
-  },
-  systemVariables: {
-    // user_id: 'YOU CAN DEFINE USER ID HERE',
-    // conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
-  },
-  userVariables: {
-    // avatar_url: 'YOU CAN DEFINE USER AVATAR URL HERE',
-    // name: 'YOU CAN DEFINE USER NAME HERE',
-  },
- }
-</script>
-<script
- src="${url}${basePath}/embed.min.js"
- id="${token}"
- defer>
-</script>
-<style>
-  #dify-chatbot-bubble-button {
-    background-color: ${primaryColor} !important;
-  }
-  #dify-chatbot-bubble-window {
-    width: 24rem !important;
-    height: 40rem !important;
-  }
-</style>`,
-  },
-  chromePlugin: {
-    getContent: (url: string, token: string) => `ChatBot URL: ${url}${basePath}/chatbot/${token}`,
-  },
-}
+const OPTION_KEYS = ['iframe', 'scripts', 'chromePlugin'] as const
 const prefixEmbedded = 'overview.appInfo.embedded'
 
-type Option = keyof typeof OPTION_MAP
-
-const OPTIONS: Option[] = ['iframe', 'scripts', 'chromePlugin']
+type Option = typeof OPTION_KEYS[number]
 
 const optionIconClassName: Record<Option, string> = {
   iframe: style.iframeIcon!,
@@ -90,38 +48,274 @@ const optionIconClassName: Record<Option, string> = {
   chromePlugin: style.chromePluginIcon!,
 }
 
-const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, className }: Props) => {
+const getSerializedHiddenInputValue = (
+  variable: WorkflowHiddenStartVariable,
+  values: Record<string, WorkflowLaunchInputValue>,
+) => {
+  const rawValue = values[variable.variable]
+  if (variable.type === InputVarType.checkbox)
+    return String(Boolean(rawValue))
+
+  return String(rawValue ?? '')
+}
+
+const buildEmbeddedIframeUrl = async ({
+  appBaseUrl,
+  accessToken,
+  variables,
+  values,
+}: {
+  appBaseUrl: string
+  accessToken: string
+  variables: WorkflowHiddenStartVariable[]
+  values: Record<string, WorkflowLaunchInputValue>
+}) => {
+  const iframeUrl = new URL(`${appBaseUrl}${basePath}/chatbot/${accessToken}`, window.location.origin)
+
+  await Promise.all(variables.map(async (variable) => {
+    iframeUrl.searchParams.set(variable.variable, await compressAndEncodeBase64(getSerializedHiddenInputValue(variable, values)))
+  }))
+
+  return iframeUrl.toString()
+}
+
+const AsyncEmbeddedOptionContent = ({
+  option,
+  iframeUrlPromise,
+  latestResolvedIframeUrlRef,
+}: {
+  option: Option
+  iframeUrlPromise: Promise<string>
+  latestResolvedIframeUrlRef: MutableRefObject<string>
+}) => {
+  const iframeUrl = use(iframeUrlPromise)
+  latestResolvedIframeUrlRef.current = iframeUrl
+
+  if (option === 'chromePlugin')
+    return getChromePluginContent(iframeUrl)
+
+  return getEmbeddedIframeSnippet(iframeUrl)
+}
+
+const EmbeddedContent = ({
+  siteInfo,
+  appBaseUrl,
+  accessToken,
+  hiddenInputs,
+}: Required<Pick<Props, 'accessToken' | 'appBaseUrl'>> & Pick<Props, 'siteInfo' | 'hiddenInputs'>) => {
   const { t } = useTranslation()
+  const supportedHiddenInputs = useMemo<WorkflowHiddenStartVariable[]>(
+    () => (hiddenInputs ?? []).filter(isWorkflowLaunchInputSupported),
+    [hiddenInputs],
+  )
+  const initialHiddenInputValues = useMemo(
+    () => createWorkflowLaunchInitialValues(supportedHiddenInputs),
+    [supportedHiddenInputs],
+  )
   const [option, setOption] = useState<Option>('iframe')
   const [copiedOption, setCopiedOption] = useState<Option | null>(null)
+  const [hiddenInputsCollapsed, setHiddenInputsCollapsed] = useState(true)
+  const [hiddenInputValues, setHiddenInputValues] = useState<Record<string, WorkflowLaunchInputValue>>(
+    () => initialHiddenInputValues,
+  )
+  const [previewIframeUrlPromise, setPreviewIframeUrlPromise] = useState<Promise<string>>(
+    () => buildEmbeddedIframeUrl({
+      appBaseUrl,
+      accessToken,
+      variables: supportedHiddenInputs,
+      values: initialHiddenInputValues,
+    }),
+  )
+  const latestResolvedIframeUrlRef = useRef('')
 
   const { langGeniusVersionInfo } = useAppContext()
   const themeBuilder = useThemeContext()
-  themeBuilder.buildTheme(siteInfo?.chat_color_theme ?? null, siteInfo?.chat_color_theme_inverted ?? false)
   const isTestEnv = langGeniusVersionInfo.current_env === 'TESTING' || langGeniusVersionInfo.current_env === 'DEVELOPMENT'
-  const onClickCopy = () => {
+
+  const handleHiddenInputValueChange = (variable: string, value: WorkflowLaunchInputValue) => {
+    const nextHiddenInputValues = {
+      ...hiddenInputValues,
+      [variable]: value,
+    }
+
+    setCopiedOption(null)
+    setHiddenInputValues(nextHiddenInputValues)
+    setPreviewIframeUrlPromise(buildEmbeddedIframeUrl({
+      appBaseUrl,
+      accessToken,
+      variables: supportedHiddenInputs,
+      values: nextHiddenInputValues,
+    }))
+  }
+  const scriptsContent = useMemo(() => getEmbeddedScriptSnippet({
+    url: appBaseUrl,
+    token: accessToken,
+    primaryColor: themeBuilder.theme?.primaryColor ?? '#1C64F2',
+    isTestEnv,
+    inputValues: hiddenInputValues,
+  }), [accessToken, appBaseUrl, hiddenInputValues, isTestEnv, themeBuilder.theme?.primaryColor])
+
+  const onClickCopy = async () => {
+    const latestIframeUrl = await buildEmbeddedIframeUrl({
+      appBaseUrl,
+      accessToken,
+      variables: supportedHiddenInputs,
+      values: hiddenInputValues,
+    })
+
     if (option === 'chromePlugin') {
-      const splitUrl = OPTION_MAP[option].getContent(appBaseUrl, accessToken).split(': ')
+      const splitUrl = getChromePluginContent(latestIframeUrl).split(': ')
       if (splitUrl.length > 1)
         copy(splitUrl[1]!)
     }
+    else if (option === 'iframe') {
+      copy(getEmbeddedIframeSnippet(latestIframeUrl))
+    }
     else {
-      copy(OPTION_MAP[option].getContent(appBaseUrl, accessToken, themeBuilder.theme?.primaryColor ?? '#1C64F2', isTestEnv))
+      copy(scriptsContent)
     }
     setCopiedOption(option)
   }
+  const previewFallback = latestResolvedIframeUrlRef.current
+    ? (option === 'chromePlugin'
+        ? getChromePluginContent(latestResolvedIframeUrlRef.current)
+        : getEmbeddedIframeSnippet(latestResolvedIframeUrlRef.current))
+    : ''
 
   const navigateToChromeUrl = () => {
     window.open('https://chrome.google.com/webstore/detail/dify-chatbot/ceehdapohffmjmkdcifjofadiaoeggaf', '_blank', 'noopener,noreferrer')
   }
 
+  useEffect(() => {
+    themeBuilder.buildTheme(siteInfo?.chat_color_theme ?? null, siteInfo?.chat_color_theme_inverted ?? false)
+  }, [siteInfo?.chat_color_theme, siteInfo?.chat_color_theme_inverted, themeBuilder])
+
+  return (
+    <>
+      <div className="mt-8 mb-4 system-sm-medium text-text-primary">
+        {t(`${prefixEmbedded}.explanation`, { ns: 'appOverview' })}
+      </div>
+      {supportedHiddenInputs.length > 0 && (
+        <div className="mb-6 rounded-xl border-[0.5px] border-components-panel-border bg-background-section">
+          <button
+            type="button"
+            className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left"
+            onClick={() => setHiddenInputsCollapsed(prev => !prev)}
+          >
+            <div>
+              <div className="system-sm-medium text-text-primary">
+                {t(`${prefixEmbedded}.hiddenInputs.title`, { ns: 'appOverview' })}
+              </div>
+              <div className="mt-1 system-xs-regular text-text-tertiary">
+                {t(`${prefixEmbedded}.hiddenInputs.description`, { ns: 'appOverview' })}
+              </div>
+            </div>
+            {hiddenInputsCollapsed
+              ? <RiArrowRightSLine className="h-4 w-4 shrink-0 text-text-tertiary" />
+              : <RiArrowDownSLine className="h-4 w-4 shrink-0 text-text-tertiary" />}
+          </button>
+          {!hiddenInputsCollapsed && (
+            <div className="max-h-72 space-y-4 overflow-y-auto border-t-[0.5px] border-divider-subtle px-4 py-4">
+              <WorkflowHiddenInputFields
+                hiddenVariables={supportedHiddenInputs}
+                values={hiddenInputValues}
+                onValueChange={handleHiddenInputValueChange}
+                fieldIdPrefix="embedded-hidden-input"
+              />
+            </div>
+          )}
+        </div>
+      )}
+      <div className="flex flex-wrap items-center justify-between gap-y-2">
+        {OPTION_KEYS.map((v) => {
+          return (
+            <button
+              type="button"
+              key={v}
+              aria-label={t(`${prefixEmbedded}.${v}`, { ns: 'appOverview' }) || v}
+              className={cn(
+                style.option,
+                optionIconClassName[v],
+                option === v && style.active,
+              )}
+              onClick={() => {
+                setOption(v)
+                setCopiedOption(null)
+              }}
+            >
+            </button>
+          )
+        })}
+      </div>
+      {option === 'chromePlugin' && (
+        <div className="mt-6 w-full">
+          <button
+            type="button"
+            className={cn('inline-flex w-full items-center justify-center gap-2 rounded-lg py-3', 'shrink-0 bg-primary-600 text-white hover:bg-primary-600/75 hover:shadow-sm')}
+            onClick={navigateToChromeUrl}
+          >
+            <div className={`relative h-4 w-4 ${style.pluginInstallIcon}`}></div>
+            <div className="font-['Inter'] text-sm leading-tight font-medium text-white">{t(`${prefixEmbedded}.chromePlugin`, { ns: 'appOverview' })}</div>
+          </button>
+        </div>
+      )}
+      <div className={cn('inline-flex w-full flex-col items-start justify-start rounded-lg border-[0.5px] border-components-panel-border bg-background-section', 'mt-6')}>
+        <div className="inline-flex items-center justify-start gap-2 self-stretch rounded-t-lg bg-background-section-burn py-1 pr-1 pl-3">
+          <div className="shrink-0 grow system-sm-medium text-text-secondary">
+            {t(`${prefixEmbedded}.${option}`, { ns: 'appOverview' })}
+          </div>
+          <Tooltip>
+            <TooltipTrigger
+              render={(
+                <ActionButton
+                  aria-label={(copiedOption === option
+                    ? t(`${prefixEmbedded}.copied`, { ns: 'appOverview' })
+                    : t(`${prefixEmbedded}.copy`, { ns: 'appOverview' })) || ''}
+                  onClick={() => void onClickCopy()}
+                >
+                  {copiedOption === option && <span aria-hidden="true" className="i-ri-clipboard-fill h-4 w-4" />}
+                  {copiedOption !== option && <span aria-hidden="true" className="i-ri-clipboard-line h-4 w-4" />}
+                </ActionButton>
+              )}
+            />
+            <TooltipContent>
+              {(copiedOption === option
+                ? t(`${prefixEmbedded}.copied`, { ns: 'appOverview' })
+                : t(`${prefixEmbedded}.copy`, { ns: 'appOverview' })) || ''}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+        <div className="flex max-h-[clamp(180px,calc(100dvh-320px),360px)] w-full items-start justify-start gap-2 overflow-auto p-3">
+          <div className="shrink grow basis-0 font-mono text-[13px] leading-tight text-text-secondary">
+            <pre className="select-text">
+              {option === 'scripts'
+                ? scriptsContent
+                : (
+                    <Suspense fallback={previewFallback}>
+                      <AsyncEmbeddedOptionContent
+                        option={option}
+                        iframeUrlPromise={previewIframeUrlPromise}
+                        latestResolvedIframeUrlRef={latestResolvedIframeUrlRef}
+                      />
+                    </Suspense>
+                  )}
+            </pre>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, hiddenInputs, className }: Props) => {
+  const { t } = useTranslation()
+
   return (
     <Dialog
       open={isShow}
       onOpenChange={(open) => {
         if (open)
           return
-        setCopiedOption(null)
         onClose()
       }}
     >
@@ -130,73 +324,16 @@ const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, classNam
           {t(`${prefixEmbedded}.title`, { ns: 'appOverview' })}
         </DialogTitle>
         <DialogCloseButton />
-        <div className="mt-8 mb-4 system-sm-medium text-text-primary">
-          {t(`${prefixEmbedded}.explanation`, { ns: 'appOverview' })}
-        </div>
-        <div className="flex flex-wrap items-center justify-between gap-y-2">
-          {OPTIONS.map((v) => {
-            return (
-              <button
-                type="button"
-                key={v}
-                aria-label={t(`${prefixEmbedded}.${v}`, { ns: 'appOverview' }) || v}
-                className={cn(
-                  style.option,
-                  optionIconClassName[v],
-                  option === v && style.active,
-                )}
-                onClick={() => {
-                  setOption(v)
-                  setCopiedOption(null)
-                }}
-              >
-              </button>
-            )
-          })}
-        </div>
-        {option === 'chromePlugin' && (
-          <div className="mt-6 w-full">
-            <button
-              type="button"
-              className={cn('inline-flex w-full items-center justify-center gap-2 rounded-lg py-3', 'shrink-0 bg-primary-600 text-white hover:bg-primary-600/75 hover:shadow-sm')}
-              onClick={navigateToChromeUrl}
-            >
-              <div className={`relative h-4 w-4 ${style.pluginInstallIcon}`}></div>
-              <div className="font-['Inter'] text-sm leading-tight font-medium text-white">{t(`${prefixEmbedded}.chromePlugin`, { ns: 'appOverview' })}</div>
-            </button>
-          </div>
-        )}
-        <div className={cn('inline-flex w-full flex-col items-start justify-start rounded-lg border-[0.5px] border-components-panel-border bg-background-section', 'mt-6')}>
-          <div className="inline-flex items-center justify-start gap-2 self-stretch rounded-t-lg bg-background-section-burn py-1 pr-1 pl-3">
-            <div className="shrink-0 grow system-sm-medium text-text-secondary">
-              {t(`${prefixEmbedded}.${option}`, { ns: 'appOverview' })}
-            </div>
-            <Tooltip>
-              <TooltipTrigger
-                render={(
-                  <ActionButton
-                    aria-label={(copiedOption === option
-                      ? t(`${prefixEmbedded}.copied`, { ns: 'appOverview' })
-                      : t(`${prefixEmbedded}.copy`, { ns: 'appOverview' })) || ''}
-                    onClick={onClickCopy}
-                  >
-                    {copiedOption === option && <span aria-hidden="true" className="i-ri-clipboard-fill h-4 w-4" />}
-                    {copiedOption !== option && <span aria-hidden="true" className="i-ri-clipboard-line h-4 w-4" />}
-                  </ActionButton>
-                )}
-              />
-              <TooltipContent>
-                {(copiedOption === option
-                  ? t(`${prefixEmbedded}.copied`, { ns: 'appOverview' })
-                  : t(`${prefixEmbedded}.copy`, { ns: 'appOverview' })) || ''}
-              </TooltipContent>
-            </Tooltip>
-          </div>
-          <div className="flex max-h-[clamp(180px,calc(100dvh-320px),360px)] w-full items-start justify-start gap-2 overflow-auto p-3">
-            <div className="shrink grow basis-0 font-mono text-[13px] leading-tight text-text-secondary">
-              <pre className="select-text">{OPTION_MAP[option].getContent(appBaseUrl, accessToken, themeBuilder.theme?.primaryColor ?? '#1C64F2', isTestEnv)}</pre>
-            </div>
-          </div>
+        <div className="max-h-[calc(90vh-88px)] overflow-y-auto">
+          {isShow && (
+            <EmbeddedContent
+              key={`${appBaseUrl ?? ''}:${accessToken ?? ''}:${JSON.stringify(hiddenInputs ?? [])}`}
+              siteInfo={siteInfo}
+              appBaseUrl={appBaseUrl ?? ''}
+              accessToken={accessToken ?? ''}
+              hiddenInputs={hiddenInputs}
+            />
+          )}
         </div>
       </DialogContent>
     </Dialog>
diff --git a/web/app/components/app/overview/workflow-hidden-input-fields.tsx b/web/app/components/app/overview/workflow-hidden-input-fields.tsx
new file mode 100644
index 0000000000..3983087e1c
--- /dev/null
+++ b/web/app/components/app/overview/workflow-hidden-input-fields.tsx
@@ -0,0 +1,116 @@
+import type { ChangeEvent } from 'react'
+import type { WorkflowHiddenStartVariable, WorkflowLaunchInputValue } from './app-card-utils'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@langgenius/dify-ui/select'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
+
+import { InputVarType } from '@/app/components/workflow/types'
+
+type WorkflowHiddenInputFieldsProps = {
+  hiddenVariables: WorkflowHiddenStartVariable[]
+  values: Record<string, WorkflowLaunchInputValue>
+  onValueChange: (variable: string, value: WorkflowLaunchInputValue) => void
+  fieldIdPrefix?: string
+}
+
+const WorkflowHiddenInputFields = ({
+  hiddenVariables,
+  values,
+  onValueChange,
+  fieldIdPrefix = 'workflow-launch-hidden-input',
+}: WorkflowHiddenInputFieldsProps) => {
+  const renderField = (variable: WorkflowHiddenStartVariable) => {
+    const fieldId = `${fieldIdPrefix}-${variable.variable}`
+    const fieldValue = values[variable.variable]
+    const label = typeof variable.label === 'string' ? variable.label : variable.variable
+
+    if (variable.type === InputVarType.select) {
+      return (
+        <Select
+          value={typeof fieldValue === 'string' ? fieldValue : ''}
+          onValueChange={value => onValueChange(variable.variable, value ?? '')}
+        >
+          <SelectTrigger className="w-full" aria-label={label}>
+            <SelectValue placeholder={label} />
+          </SelectTrigger>
+          <SelectContent>
+            {(variable.options ?? []).map(option => (
+              <SelectItem key={option} value={option}>
+                {option}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )
+    }
+
+    if (variable.type === InputVarType.checkbox) {
+      return (
+        <label className="flex min-h-10 w-full cursor-pointer items-center gap-3 rounded-lg bg-components-input-bg-normal px-3 py-2">
+          <input
+            id={fieldId}
+            type="checkbox"
+            checked={Boolean(fieldValue)}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => onValueChange(variable.variable, event.target.checked)}
+            className="h-4 w-4 rounded border-divider-subtle"
+          />
+          <span className="system-sm-regular text-text-secondary">{label}</span>
+        </label>
+      )
+    }
+
+    if (
+      variable.type === InputVarType.paragraph
+      || variable.type === InputVarType.json
+      || variable.type === InputVarType.jsonObject
+    ) {
+      return (
+        <Textarea
+          id={fieldId}
+          value={typeof fieldValue === 'string' ? fieldValue : ''}
+          onChange={(event: ChangeEvent<HTMLTextAreaElement>) => onValueChange(variable.variable, event.target.value)}
+          placeholder={label}
+          maxLength={variable.max_length}
+          className="min-h-24"
+        />
+      )
+    }
+
+    return (
+      <Input
+        id={fieldId}
+        type={variable.type === InputVarType.number ? 'number' : 'text'}
+        value={typeof fieldValue === 'string' ? fieldValue : ''}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => onValueChange(variable.variable, event.target.value)}
+        placeholder={label}
+        maxLength={variable.max_length}
+      />
+    )
+  }
+
+  return (
+    <>
+      {hiddenVariables.map(variable => (
+        <div key={variable.variable} className="space-y-1.5">
+          {variable.type !== InputVarType.checkbox && (
+            <label
+              htmlFor={`${fieldIdPrefix}-${variable.variable}`}
+              className="block system-sm-medium text-text-secondary"
+            >
+              {typeof variable.label === 'string' ? variable.label : variable.variable}
+            </label>
+          )}
+          {renderField(variable)}
+        </div>
+      ))}
+    </>
+  )
+}
+
+export default WorkflowHiddenInputFields
diff --git a/web/app/components/base/chat/__tests__/utils.spec.ts b/web/app/components/base/chat/__tests__/utils.spec.ts
index 0951880f9c..4cf20f716a 100644
--- a/web/app/components/base/chat/__tests__/utils.spec.ts
+++ b/web/app/components/base/chat/__tests__/utils.spec.ts
@@ -321,47 +321,86 @@ describe('chat utils - url params and answer helpers', () => {
       expect(res).toEqual({ custom: '123', encoded: 'a b' })
     })
 
+    it('getRawInputsFromUrlParams keeps encoded launch params as decoded plain values', async () => {
+      setSearch(`?custom=${encodeURIComponent('YWJjZA==')}`)
+      const res = await getRawInputsFromUrlParams()
+      expect(res).toEqual({ custom: 'YWJjZA==' })
+    })
+
     it('getRawUserVariablesFromUrlParams extracts only user. prefixed params', async () => {
       setSearch('?custom=123&sys.param=456&user.param=789&user.encoded=a%20b')
       const res = await getRawUserVariablesFromUrlParams()
       expect(res).toEqual({ param: '789', encoded: 'a b' })
     })
 
+    it('getRawUserVariablesFromUrlParams keeps encoded user values as decoded plain values', async () => {
+      setSearch(`?user.param=${encodeURIComponent('YWJjZA==')}`)
+      const res = await getRawUserVariablesFromUrlParams()
+      expect(res).toEqual({ param: 'YWJjZA==' })
+    })
+
     it('getProcessedInputsFromUrlParams decompresses base64 inputs', async () => {
-      setSearch('?custom=123&sys.param=456&user.param=789')
+      setSearch(`?custom=${encodeURIComponent('YWJjZA==')}&sys.param=456&user.param=789`)
       const res = await getProcessedInputsFromUrlParams()
       expect(res).toEqual({ custom: 'decompressed_text' })
     })
 
+    it('getProcessedInputsFromUrlParams returns undefined for plain decoded values', async () => {
+      vi.stubGlobal('atob', () => {
+        throw new Error('invalid')
+      })
+      setSearch('?custom=a%20b')
+      const res = await getProcessedInputsFromUrlParams()
+      expect(res).toEqual({ custom: undefined })
+    })
+
     it('getProcessedSystemVariablesFromUrlParams decompresses sys. prefixed params', async () => {
-      setSearch('?custom=123&sys.param=456&user.param=789')
+      setSearch(`?custom=123&sys.param=${encodeURIComponent('YWJjZA==')}&user.param=789`)
       const res = await getProcessedSystemVariablesFromUrlParams()
       expect(res).toEqual({ param: 'decompressed_text' })
     })
 
+    it('getProcessedSystemVariablesFromUrlParams returns undefined for plain decoded values', async () => {
+      vi.stubGlobal('atob', () => {
+        throw new Error('invalid')
+      })
+      setSearch('?sys.param=a%20b')
+      const res = await getProcessedSystemVariablesFromUrlParams()
+      expect(res).toEqual({ param: undefined })
+    })
+
     it('getProcessedSystemVariablesFromUrlParams parses redirect_url without query string', async () => {
-      setSearch(`?redirect_url=${encodeURIComponent('http://example.com')}&sys.param=456`)
+      setSearch(`?redirect_url=${encodeURIComponent('http://example.com')}&sys.param=${encodeURIComponent('YWJjZA==')}`)
       const res = await getProcessedSystemVariablesFromUrlParams()
       expect(res).toEqual({ param: 'decompressed_text' })
     })
 
     it('getProcessedSystemVariablesFromUrlParams parses redirect_url', async () => {
-      setSearch(`?redirect_url=${encodeURIComponent('http://example.com?sys.redirected=abc')}&sys.param=456`)
+      setSearch(`?redirect_url=${encodeURIComponent(`http://example.com?sys.redirected=${encodeURIComponent('YWJjZA==')}`)}&sys.param=${encodeURIComponent('YWJjZA==')}`)
       const res = await getProcessedSystemVariablesFromUrlParams()
       expect(res).toEqual({ param: 'decompressed_text', redirected: 'decompressed_text' })
     })
 
     it('getProcessedUserVariablesFromUrlParams decompresses user. prefixed params', async () => {
-      setSearch('?custom=123&sys.param=456&user.param=789')
+      setSearch(`?custom=123&sys.param=456&user.param=${encodeURIComponent('YWJjZA==')}`)
       const res = await getProcessedUserVariablesFromUrlParams()
       expect(res).toEqual({ param: 'decompressed_text' })
     })
 
+    it('getProcessedUserVariablesFromUrlParams returns undefined for plain decoded values', async () => {
+      vi.stubGlobal('atob', () => {
+        throw new Error('invalid')
+      })
+      setSearch('?user.param=a%20b')
+      const res = await getProcessedUserVariablesFromUrlParams()
+      expect(res).toEqual({ param: undefined })
+    })
+
     it('decodeBase64AndDecompress failure returns undefined softly', async () => {
       vi.stubGlobal('atob', () => {
         throw new Error('invalid')
       })
-      setSearch('?custom=invalid_base64')
+      setSearch(`?custom=${encodeURIComponent('YWJjZA==')}`)
       const res = await getProcessedInputsFromUrlParams()
       expect(res).toEqual({ custom: undefined })
     })
diff --git a/web/app/components/base/chat/utils.ts b/web/app/components/base/chat/utils.ts
index ff9085c4e6..1b2574a6e0 100644
--- a/web/app/components/base/chat/utils.ts
+++ b/web/app/components/base/chat/utils.ts
@@ -19,11 +19,13 @@ async function getRawInputsFromUrlParams(): Promise<Record<string, any>> {
   const urlParams = new URLSearchParams(window.location.search)
   const inputs: Record<string, any> = {}
   const entriesArray = Array.from(urlParams.entries())
-  entriesArray.forEach(([key, value]) => {
+  await Promise.all(entriesArray.map(async ([key, value]) => {
     const prefixArray = ['sys.', 'user.']
-    if (!prefixArray.some(prefix => key.startsWith(prefix)))
-      inputs[key] = decodeURIComponent(value)
-  })
+    if (prefixArray.some(prefix => key.startsWith(prefix)))
+      return
+
+    inputs[key] = decodeURIComponent(value)
+  }))
   return inputs
 }
 
@@ -81,10 +83,12 @@ async function getRawUserVariablesFromUrlParams(): Promise<Record<string, any>>
   const urlParams = new URLSearchParams(window.location.search)
   const userVariables: Record<string, any> = {}
   const entriesArray = Array.from(urlParams.entries())
-  entriesArray.forEach(([key, value]) => {
-    if (key.startsWith('user.'))
-      userVariables[key.slice(5)] = decodeURIComponent(value)
-  })
+  await Promise.all(entriesArray.map(async ([key, value]) => {
+    if (!key.startsWith('user.'))
+      return
+
+    userVariables[key.slice(5)] = decodeURIComponent(value)
+  }))
   return userVariables
 }
 
diff --git a/web/app/components/share/text-generation/hooks/__tests__/use-text-generation-app-state.spec.ts b/web/app/components/share/text-generation/hooks/__tests__/use-text-generation-app-state.spec.ts
index df8dcf3f98..67fbe59339 100644
--- a/web/app/components/share/text-generation/hooks/__tests__/use-text-generation-app-state.spec.ts
+++ b/web/app/components/share/text-generation/hooks/__tests__/use-text-generation-app-state.spec.ts
@@ -11,6 +11,7 @@ const renderHook = <Result, Props = void>(callback: (props: Props) => Result) =>
 const {
   changeLanguageMock,
   fetchSavedMessageMock,
+  getRawInputsFromUrlParamsMock,
   notifyMock,
   removeMessageMock,
   saveMessageMock,
@@ -19,6 +20,7 @@ const {
 } = vi.hoisted(() => ({
   changeLanguageMock: vi.fn(() => Promise.resolve()),
   fetchSavedMessageMock: vi.fn(),
+  getRawInputsFromUrlParamsMock: vi.fn(),
   notifyMock: vi.fn(),
   removeMessageMock: vi.fn(),
   saveMessageMock: vi.fn(),
@@ -50,6 +52,10 @@ vi.mock('@/i18n-config/client', () => ({
   changeLanguage: changeLanguageMock,
 }))
 
+vi.mock('@/app/components/base/chat/utils', () => ({
+  getRawInputsFromUrlParams: getRawInputsFromUrlParamsMock,
+}))
+
 vi.mock('@/service/share', async () => {
   const actual = await vi.importActual<typeof import('@/service/share')>('@/service/share')
   return {
@@ -102,7 +108,7 @@ const defaultAppParams = {
         hide: false,
       },
     },
-  ],
+  ] as Record<string, Record<string, unknown>>[],
   more_like_this: {
     enabled: true,
   },
@@ -175,6 +181,7 @@ describe('useTextGenerationAppState', () => {
     })
     removeMessageMock.mockResolvedValue(undefined)
     saveMessageMock.mockResolvedValue(undefined)
+    getRawInputsFromUrlParamsMock.mockResolvedValue({})
   })
 
   it('should initialize app state and fetch saved messages for non-workflow web apps', async () => {
@@ -295,4 +302,239 @@ describe('useTextGenerationAppState', () => {
       enable: false,
     }))
   })
+
+  it('should apply workflow launch inputs from the url to hidden prompt variables', async () => {
+    mockWebAppState.appParams = {
+      ...defaultAppParams,
+      user_input_form: [
+        {
+          'text-input': {
+            label: 'Visible',
+            variable: 'visible',
+            required: true,
+            max_length: 48,
+            default: 'Shown',
+            hide: false,
+          },
+        },
+        {
+          'text-input': {
+            label: 'Hidden Secret',
+            variable: 'secret',
+            required: true,
+            max_length: 48,
+            default: '',
+            hide: true,
+          },
+        },
+      ],
+    }
+    getRawInputsFromUrlParamsMock.mockResolvedValue({
+      secret: 'prefilled-secret',
+    })
+
+    const { result } = renderHook(() => useTextGenerationAppState({
+      isInstalledApp: false,
+      isWorkflow: true,
+    }))
+
+    await waitFor(() => {
+      expect(result.current.promptConfig?.prompt_variables).toEqual(expect.arrayContaining([
+        expect.objectContaining({
+          key: 'visible',
+          default: 'Shown',
+        }),
+        expect.objectContaining({
+          key: 'secret',
+          hide: true,
+          default: 'prefilled-secret',
+        }),
+      ]))
+    })
+
+    expect(getRawInputsFromUrlParamsMock).toHaveBeenCalled()
+    expect(fetchSavedMessageMock).not.toHaveBeenCalled()
+  })
+
+  it('should coerce checkbox url defaults from string and boolean values', async () => {
+    mockWebAppState.appParams = {
+      ...defaultAppParams,
+      user_input_form: [
+        {
+          checkbox: {
+            label: 'Bool True',
+            variable: 'bool_true',
+            required: false,
+            default: false,
+            hide: true,
+          },
+        },
+        {
+          checkbox: {
+            label: 'String True',
+            variable: 'str_true',
+            required: false,
+            default: false,
+            hide: true,
+          },
+        },
+        {
+          checkbox: {
+            label: 'String False',
+            variable: 'str_false',
+            required: false,
+            default: true,
+            hide: true,
+          },
+        },
+        {
+          checkbox: {
+            label: 'Invalid',
+            variable: 'invalid_cb',
+            required: false,
+            default: false,
+            hide: true,
+          },
+        },
+      ],
+    }
+    getRawInputsFromUrlParamsMock.mockResolvedValue({
+      bool_true: true,
+      str_true: 'true',
+      str_false: 'false',
+      invalid_cb: 'invalid',
+    })
+
+    const { result } = renderHook(() => useTextGenerationAppState({
+      isInstalledApp: false,
+      isWorkflow: true,
+    }))
+
+    await waitFor(() => {
+      expect(result.current.promptConfig?.prompt_variables).toEqual(expect.arrayContaining([
+        expect.objectContaining({ key: 'bool_true', default: true }),
+        expect.objectContaining({ key: 'str_true', default: true }),
+        expect.objectContaining({ key: 'str_false', default: false }),
+        expect.objectContaining({ key: 'invalid_cb', default: false }),
+      ]))
+    })
+  })
+
+  it('should coerce number url defaults and ignore NaN values', async () => {
+    mockWebAppState.appParams = {
+      ...defaultAppParams,
+      user_input_form: [
+        {
+          number: {
+            label: 'Valid Number',
+            variable: 'num_valid',
+            required: false,
+            default: 0,
+            hide: true,
+          },
+        },
+        {
+          number: {
+            label: 'NaN Number',
+            variable: 'num_nan',
+            required: false,
+            default: 0,
+            hide: true,
+          },
+        },
+      ],
+    }
+    getRawInputsFromUrlParamsMock.mockResolvedValue({
+      num_valid: '42',
+      num_nan: 'not-a-number',
+    })
+
+    const { result } = renderHook(() => useTextGenerationAppState({
+      isInstalledApp: false,
+      isWorkflow: true,
+    }))
+
+    await waitFor(() => {
+      expect(result.current.promptConfig?.prompt_variables).toEqual(expect.arrayContaining([
+        expect.objectContaining({ key: 'num_valid', default: 42 }),
+        expect.objectContaining({ key: 'num_nan', default: 0 }),
+      ]))
+    })
+  })
+
+  it('should coerce select url defaults and ignore invalid options', async () => {
+    mockWebAppState.appParams = {
+      ...defaultAppParams,
+      user_input_form: [
+        {
+          select: {
+            label: 'Valid Option',
+            variable: 'sel_valid',
+            required: false,
+            default: '',
+            options: ['alpha', 'beta'],
+            hide: true,
+          },
+        },
+        {
+          select: {
+            label: 'Invalid Option',
+            variable: 'sel_invalid',
+            required: false,
+            default: 'alpha',
+            options: ['alpha', 'beta'],
+            hide: true,
+          },
+        },
+      ],
+    }
+    getRawInputsFromUrlParamsMock.mockResolvedValue({
+      sel_valid: 'beta',
+      sel_invalid: 'gamma',
+    })
+
+    const { result } = renderHook(() => useTextGenerationAppState({
+      isInstalledApp: false,
+      isWorkflow: true,
+    }))
+
+    await waitFor(() => {
+      expect(result.current.promptConfig?.prompt_variables).toEqual(expect.arrayContaining([
+        expect.objectContaining({ key: 'sel_valid', default: 'beta' }),
+        expect.objectContaining({ key: 'sel_invalid', default: 'alpha' }),
+      ]))
+    })
+  })
+
+  it('should ignore non-string url values for text inputs', async () => {
+    mockWebAppState.appParams = {
+      ...defaultAppParams,
+      user_input_form: [
+        {
+          'text-input': {
+            label: 'Text Field',
+            variable: 'text_field',
+            required: false,
+            max_length: 48,
+            default: 'original',
+            hide: true,
+          },
+        },
+      ],
+    }
+    getRawInputsFromUrlParamsMock.mockResolvedValue({
+      text_field: 12345,
+    })
+
+    const { result } = renderHook(() => useTextGenerationAppState({
+      isInstalledApp: false,
+      isWorkflow: true,
+    }))
+
+    await waitFor(() => {
+      expect(result.current.promptConfig?.prompt_variables).toEqual(expect.arrayContaining([
+        expect.objectContaining({ key: 'text_field', default: 'original' }),
+      ]))
+    })
+  })
 })
diff --git a/web/app/components/share/text-generation/hooks/use-text-generation-app-state.ts b/web/app/components/share/text-generation/hooks/use-text-generation-app-state.ts
index f56efc3902..12e0f22d16 100644
--- a/web/app/components/share/text-generation/hooks/use-text-generation-app-state.ts
+++ b/web/app/components/share/text-generation/hooks/use-text-generation-app-state.ts
@@ -6,6 +6,7 @@ import { toast } from '@langgenius/dify-ui/toast'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { getRawInputsFromUrlParams } from '@/app/components/base/chat/utils'
 import { useWebAppStore } from '@/context/web-app-context'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
 import useDocumentTitle from '@/hooks/use-document-title'
@@ -31,6 +32,44 @@ type ShareAppParams = {
     image_file_size_limit?: number
   }
 }
+
+const coerceWorkflowUrlDefault = (
+  promptVariable: NonNullable<PromptConfig['prompt_variables']>[number],
+  rawValue: unknown,
+) => {
+  if (rawValue === undefined || rawValue === null)
+    return undefined
+
+  if (promptVariable.type === 'checkbox') {
+    if (typeof rawValue === 'boolean')
+      return rawValue
+
+    const normalized = String(rawValue).toLowerCase()
+    if (normalized === 'true')
+      return true
+    if (normalized === 'false')
+      return false
+
+    return undefined
+  }
+
+  if (promptVariable.type === 'number') {
+    const numericValue = Number(rawValue)
+    return Number.isNaN(numericValue) ? undefined : numericValue
+  }
+
+  if (typeof rawValue !== 'string')
+    return undefined
+
+  if (promptVariable.type === 'select')
+    return promptVariable.options?.includes(rawValue) ? rawValue : undefined
+
+  if (promptVariable.max_length)
+    return rawValue.slice(0, promptVariable.max_length)
+
+  return rawValue
+}
+
 export const useTextGenerationAppState = ({ isInstalledApp, isWorkflow }: UseTextGenerationAppStateOptions) => {
   const { t } = useTranslation()
   const appSourceType = isInstalledApp ? AppSourceType.installedApp : AppSourceType.webApp
@@ -84,6 +123,15 @@ export const useTextGenerationAppState = ({ isInstalledApp, isWorkflow }: UseTex
       setCustomConfig((custom_config || null) as TextGenerationCustomConfig | null)
       await changeLanguage(site.default_language)
       const { user_input_form, more_like_this, file_upload, text_to_speech } = appParams as unknown as ShareAppParams
+      const promptVariables = userInputsFormToPromptVariables(user_input_form)
+      if (isWorkflow && !isInstalledApp) {
+        const workflowUrlInputs = await getRawInputsFromUrlParams()
+        promptVariables.forEach((promptVariable) => {
+          const workflowDefault = coerceWorkflowUrlDefault(promptVariable, workflowUrlInputs[promptVariable.key])
+          if (workflowDefault !== undefined)
+            promptVariable.default = workflowDefault
+        })
+      }
       if (cancelled)
         return
       setVisionConfig({
@@ -94,7 +142,7 @@ export const useTextGenerationAppState = ({ isInstalledApp, isWorkflow }: UseTex
       } as VisionSettings)
       setPromptConfig({
         prompt_template: '',
-        prompt_variables: userInputsFormToPromptVariables(user_input_form),
+        prompt_variables: promptVariables,
       } as PromptConfig)
       setMoreLikeThisConfig(more_like_this)
       setTextToSpeechConfig(text_to_speech)
@@ -105,7 +153,7 @@ export const useTextGenerationAppState = ({ isInstalledApp, isWorkflow }: UseTex
     return () => {
       cancelled = true
     }
-  }, [appData, appParams, fetchSavedMessages, isWorkflow])
+  }, [appData, appParams, fetchSavedMessages, isInstalledApp, isWorkflow])
   useDocumentTitle(siteInfo?.title || t('generation.title', { ns: 'share' }))
   useAppFavicon({
     enable: !isInstalledApp,
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index fa1b26074e..77457b379f 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -214,7 +214,7 @@ export type InputVar = {
   }
   variable: string
   max_length?: number
-  default?: string | number
+  default?: string | number | boolean
   required: boolean
   hint?: string
   options?: string[]
diff --git a/web/i18n/en-US/app-debug.json b/web/i18n/en-US/app-debug.json
index f010bbd92e..75f131f825 100644
--- a/web/i18n/en-US/app-debug.json
+++ b/web/i18n/en-US/app-debug.json
@@ -337,6 +337,8 @@
   "variableConfig.file.image.name": "Image",
   "variableConfig.file.supportFileTypes": "Support File Types",
   "variableConfig.file.video.name": "Video",
+  "variableConfig.hidden": "Hidden & Pre-Filled",
+  "variableConfig.hiddenDescription": "Hide this field from end users and supply its value yourself. Mutually exclusive with Required. <docLink>Learn more</docLink>",
   "variableConfig.hide": "Hide",
   "variableConfig.inputPlaceholder": "Please input",
   "variableConfig.json": "JSON Code",
diff --git a/web/i18n/en-US/app-overview.json b/web/i18n/en-US/app-overview.json
index 81256a769c..2b2a550631 100644
--- a/web/i18n/en-US/app-overview.json
+++ b/web/i18n/en-US/app-overview.json
@@ -56,6 +56,8 @@
   "overview.appInfo.embedded.copy": "Copy",
   "overview.appInfo.embedded.entry": "Embedded",
   "overview.appInfo.embedded.explanation": "Choose the way to embed chat app to your website",
+  "overview.appInfo.embedded.hiddenInputs.description": "Enter values for the hidden fields. The values are added to the iframe URL or the script's inputs object.",
+  "overview.appInfo.embedded.hiddenInputs.title": "Pre-Fill Hidden Fields",
   "overview.appInfo.embedded.iframe": "To add the chat app any where on your website, add this iframe to your html code.",
   "overview.appInfo.embedded.scripts": "To add a chat app to the bottom right of your website add this code to your html.",
   "overview.appInfo.embedded.title": "Embed on website",
@@ -104,6 +106,8 @@
   "overview.appInfo.settings.workflow.subTitle": "Workflow Details",
   "overview.appInfo.settings.workflow.title": "Workflow",
   "overview.appInfo.title": "Web App",
+  "overview.appInfo.workflowLaunchHiddenInputs.description": "Enter values for the hidden fields, then click <bold>Launch</bold> to open the WebApp with the values.",
+  "overview.appInfo.workflowLaunchHiddenInputs.title": "Pre-Fill Hidden Fields",
   "overview.disableTooltip.triggerMode": "The {{feature}} feature is not supported in Trigger Node mode.",
   "overview.status.disable": "Disabled",
   "overview.status.running": "In Service",
diff --git a/web/i18n/ja-JP/app-debug.json b/web/i18n/ja-JP/app-debug.json
index 8a37ccee9d..f4c58ea5a4 100644
--- a/web/i18n/ja-JP/app-debug.json
+++ b/web/i18n/ja-JP/app-debug.json
@@ -337,6 +337,8 @@
   "variableConfig.file.image.name": "画像",
   "variableConfig.file.supportFileTypes": "サポートされたファイルタイプ",
   "variableConfig.file.video.name": "映像",
+  "variableConfig.hidden": "非表示・事前入力",
+  "variableConfig.hiddenDescription": "エンドユーザーには非表示にし、値はご自身で入力します。必須 とは併用できません。<docLink>詳細はこちら</docLink>",
   "variableConfig.hide": "非表示",
   "variableConfig.inputPlaceholder": "入力してください",
   "variableConfig.json": "JSONコード",
diff --git a/web/i18n/ja-JP/app-overview.json b/web/i18n/ja-JP/app-overview.json
index 107d805dda..745f02273c 100644
--- a/web/i18n/ja-JP/app-overview.json
+++ b/web/i18n/ja-JP/app-overview.json
@@ -56,6 +56,8 @@
   "overview.appInfo.embedded.copy": "コピー",
   "overview.appInfo.embedded.entry": "埋め込み",
   "overview.appInfo.embedded.explanation": "チャットアプリをウェブサイトに埋め込む方法を選択します。",
+  "overview.appInfo.embedded.hiddenInputs.description": "非表示フィールドに値を入力します。これらの値は iframe の URL または埋め込みスクリプトの inputs オブジェクトに追加されます。",
+  "overview.appInfo.embedded.hiddenInputs.title": "非表示フィールドを事前入力",
   "overview.appInfo.embedded.iframe": "ウェブサイトの任意の場所にチャットアプリを追加するには、この iframe を HTML コードに追加してください。",
   "overview.appInfo.embedded.scripts": "ウェブサイトの右下にチャットアプリを追加するには、このコードを HTML に追加してください。",
   "overview.appInfo.embedded.title": "ウェブサイトに埋め込む",
@@ -104,6 +106,8 @@
   "overview.appInfo.settings.workflow.subTitle": "ワークフローの詳細",
   "overview.appInfo.settings.workflow.title": "ワークフローステップ",
   "overview.appInfo.title": "Web App",
+  "overview.appInfo.workflowLaunchHiddenInputs.description": "非表示フィールドに値を入力後、<bold>起動</bold>をクリックすると、事前入力された値が適用された WebApp が開きます。",
+  "overview.appInfo.workflowLaunchHiddenInputs.title": "非表示フィールドを事前入力",
   "overview.disableTooltip.triggerMode": "トリガーノードモードでは{{feature}}機能を使用できません。",
   "overview.status.disable": "無効",
   "overview.status.running": "稼働中",
diff --git a/web/i18n/zh-Hans/app-debug.json b/web/i18n/zh-Hans/app-debug.json
index d44af6754a..e9eec99bd9 100644
--- a/web/i18n/zh-Hans/app-debug.json
+++ b/web/i18n/zh-Hans/app-debug.json
@@ -337,6 +337,8 @@
   "variableConfig.file.image.name": "图片",
   "variableConfig.file.supportFileTypes": "支持的文件类型",
   "variableConfig.file.video.name": "视频",
+  "variableConfig.hidden": "隐藏并预填",
+  "variableConfig.hiddenDescription": "对终端用户隐藏此字段，并由你预填字段值。与 必填 互斥。<docLink>了解更多</docLink>",
   "variableConfig.hide": "隐藏",
   "variableConfig.inputPlaceholder": "请输入",
   "variableConfig.json": "JSON",
diff --git a/web/i18n/zh-Hans/app-overview.json b/web/i18n/zh-Hans/app-overview.json
index 03a26cb32c..e4d410ad2e 100644
--- a/web/i18n/zh-Hans/app-overview.json
+++ b/web/i18n/zh-Hans/app-overview.json
@@ -56,6 +56,8 @@
   "overview.appInfo.embedded.copy": "复制",
   "overview.appInfo.embedded.entry": "嵌入",
   "overview.appInfo.embedded.explanation": "选择一种方式将聊天应用嵌入到你的网站中",
+  "overview.appInfo.embedded.hiddenInputs.description": "为隐藏字段输入值。这些值将被添加到 iframe URL 或嵌入脚本的 inputs 对象中。",
+  "overview.appInfo.embedded.hiddenInputs.title": "预填隐藏字段",
   "overview.appInfo.embedded.iframe": "将以下 iframe 嵌入到你的网站中的目标位置",
   "overview.appInfo.embedded.scripts": "将以下代码嵌入到你的网站中",
   "overview.appInfo.embedded.title": "嵌入到网站中",
@@ -104,6 +106,8 @@
   "overview.appInfo.settings.workflow.subTitle": "工作流详情",
   "overview.appInfo.settings.workflow.title": "工作流",
   "overview.appInfo.title": "Web App",
+  "overview.appInfo.workflowLaunchHiddenInputs.description": "为隐藏字段输入值后，点击 <bold>启动</bold> 即可打开已应用这些值的 WebApp。",
+  "overview.appInfo.workflowLaunchHiddenInputs.title": "预填隐藏字段",
   "overview.disableTooltip.triggerMode": "触发节点模式下不支持{{feature}}功能。",
   "overview.status.disable": "已停用",
   "overview.status.running": "运行中",
diff --git a/web/models/debug.ts b/web/models/debug.ts
index a0dc9831ee..b069c8252f 100644
--- a/web/models/debug.ts
+++ b/web/models/debug.ts
@@ -52,7 +52,7 @@ export type PromptVariable = {
   key: string
   name: string
   type: string // "string" | "number" | "select",
-  default?: string | number
+  default?: string | number | boolean
   required?: boolean
   options?: string[]
   max_length?: number