StartDock Lead Router

Scenario Demo & Implementation Reference

This page shows one popup example and one inline embed example for each scenario. It is meant to be a copy-paste reference, not a generic integration sketch.

1. Asset Loading

Use one script include. The loader injects runtime CSS and loads runtime JS automatically.

Blade / Vite assets

blade

<script src="https://contact.startdock.nl/lead-router/webc?v=2d5a09bcc365"></script>

2. Scenario Matrix

Each card below uses a different scenario and a different configuration mix so the runtime behavior stays tied to the actual scenario setup.

Workspace Meeting Rooms Event Spaces Virtual Offices Startup Visa Program

Scenario

Workspace

A guided workspace request with city and workspace type prefilled.

Popup Inline embed Dutch Prefill

Popup example

data-startdock-open

Open the same scenario as a popup with a different mix of quick actions, language controls, and prefill rules.

Popup snippet

html

<button
    type="button"
    data-startdock-open
    data-startdock-scenario="workspace"
    data-startdock-language="nl"
    data-startdock-show-quick-actions="true"
    data-startdock-language-picker="true"
    data-startdock-show-field-placeholders="true"
    data-startdock-prefill='{"city":"rotterdam","workspace_type":"desks","workspace_desk_type":"flexible_desk","wants_tour_online":"yes"}'
>
    Open workspace popup
</button>

Embed example

data-startdock-embed

Mount the same scenario inline with a slightly different configuration surface to show the runtime stays scenario-aware.

Embed snippet

html

<x-startdock-lead-router
    scenario="workspace"
    mode="inline"
    language="nl"
    :quick-actions="true"
    :language-picker="true"
    :language-picker-inline="true"
    :show-field-placeholders="true"
    :prefill="['city' => 'rotterdam', 'workspace_type' => 'desks', 'workspace_desk_type' => 'flexible_desk', 'wants_tour_online' => 'yes']"
/>

Scenario

Meeting Rooms

A meeting request that keeps the popup focused while still showing key booking fields.

Popup Inline embed English No quick actions

Popup example

data-startdock-open

Open the same scenario as a popup with a different mix of quick actions, language controls, and prefill rules.

Popup snippet

html

<button
    type="button"
    data-startdock-open
    data-startdock-scenario="meeting-rooms"
    data-startdock-language="en"
    data-startdock-show-quick-actions="false"
    data-startdock-language-picker="true"
    data-startdock-show-field-placeholders="false"
    data-startdock-prefill='{"city":"amsterdam","number_of_people":8,"start_time":"09:00","date":"2026-05-18"}'
>
    Open meeting popup
</button>

Embed example

data-startdock-embed

Mount the same scenario inline with a slightly different configuration surface to show the runtime stays scenario-aware.

Embed snippet

html

<x-startdock-lead-router
    scenario="meeting-rooms"
    mode="inline"
    language="en"
    :quick-actions="false"
    :language-picker="true"
    :language-picker-inline="false"
    :show-field-placeholders="false"
    :prefill="['city' => 'amsterdam', 'number_of_people' => 12]"
/>

Scenario

Event Spaces

An event request flow with on-request availability, an included host, and event-specific spaces and copy.

Popup Inline embed English Events

Popup example

data-startdock-open

Open the same scenario as a popup with a different mix of quick actions, language controls, and prefill rules.

Popup snippet

html

<button
    type="button"
    data-startdock-open
    data-startdock-scenario="event-spaces"
    data-startdock-language="en"
    data-startdock-show-quick-actions="false"
    data-startdock-language-picker="true"
    data-startdock-show-field-placeholders="false"
    data-startdock-prefill='{"city":"amsterdam","meeting_space":"amsterdam_singel_126_rooftop","setup":"borrel_high_tables","number_of_people":18,"start_time":"10:00","date":"2026-05-23"}'
>
    Open event spaces popup
</button>

Embed example

data-startdock-embed

Mount the same scenario inline with a slightly different configuration surface to show the runtime stays scenario-aware.

Embed snippet

html

<x-startdock-lead-router
    scenario="event-spaces"
    mode="inline"
    language="en"
    :quick-actions="false"
    :language-picker="true"
    :language-picker-inline="false"
    :show-field-placeholders="false"
    :prefill="['city' => 'amsterdam', 'meeting_space' => 'amsterdam_singel_126_rooftop', 'setup' => 'borrel_high_tables', 'number_of_people' => 18]"
/>

Scenario

Virtual Offices

A short, direct request that demonstrates the shorthand field-prefill syntax.

Popup Inline embed Shorthand prefill No language picker

Popup example

data-startdock-open

Open the same scenario as a popup with a different mix of quick actions, language controls, and prefill rules.

Popup snippet

html

<button
    type="button"
    data-startdock-open
    data-startdock-scenario="virtual-office"
    data-startdock-language="nl"
    data-startdock-show-quick-actions="true"
    data-startdock-language-picker="false"
    data-startdock-show-field-placeholders="true"
    data-startdock-field-first-name="Sam"
    data-startdock-field-email="sam@example.test"
    data-startdock-field-city="amsterdam"
>
    Open virtual offices popup
</button>

Embed example

data-startdock-embed

Mount the same scenario inline with a slightly different configuration surface to show the runtime stays scenario-aware.

Embed snippet

html

<x-startdock-lead-router
    scenario="virtual-office"
    mode="inline"
    language="en"
    :quick-actions="true"
    :language-picker="false"
    :show-field-placeholders="true"
    :prefill="['city' => 'rotterdam', 'remarks' => 'Need help with remote setup']"
/>

Scenario

Startup Visa Program

A document-heavy scenario showing the same runtime shell with a different setup and consent state.

Popup Inline embed Documents Consent-aware

Popup example

data-startdock-open

Open the same scenario as a popup with a different mix of quick actions, language controls, and prefill rules.

Popup snippet

html

<button
    type="button"
    data-startdock-open
    data-startdock-scenario="startup-visa-program"
    data-startdock-language="en"
    data-startdock-show-quick-actions="false"
    data-startdock-language-picker="true"
    data-startdock-show-field-placeholders="false"
    data-startdock-prefill='{"first_name":"Amina","email":"amina@example.test"}'
>
    Open startup visa popup
</button>

Embed example

data-startdock-embed

Mount the same scenario inline with a slightly different configuration surface to show the runtime stays scenario-aware.

Embed snippet

html

<x-startdock-lead-router
    scenario="startup-visa-program"
    mode="inline"
    language="en"
    :quick-actions="false"
    :language-picker="true"
    :language-picker-inline="true"
    :show-field-placeholders="false"
    :analytics-consent-granted="false"
    :prefill="['first_name' => 'Amina', 'email' => 'amina@example.test']"
/>

3. Runtime Contract and Implementation Notes

Universal flow: Step 1 is universal intake, step 2 is scenario selection, step 3+ is scenario-specific and comes from runtime schema.

Language: pass language in frontend options or declarative attributes. Runtime resolves localized labels with backend fallback.

Admin vs code: fields, steps, scenarios, interactions, routing rules/actions, endpoints, and translations are configured in admin. Frontend code should only mount/open and optionally prefill.

Runtime API dependency: the frontend runtime depends on these backend endpoints:

GET /api/lead-router/runtime/{scenarioSlug?}
POST /api/lead-router/drafts
POST /api/lead-router/submit

4. Option Reference

The examples above exercise the main runtime switches, including popup-vs-inline behavior, language selection, quick actions, and prefill formats.

Popup-only examples: all four cards expose `data-startdock-open` with a scenario slug and a different set of popup controls.

Embed-only examples: all four cards mount <x-startdock-lead-router> inline with a different scenario and configuration mix.

Prefill styles: the cards include both `data-startdock-prefill` JSON and field-specific `data-startdock-field-*` shorthand.