@picked/client 0.0.1-dev.1785305085063 → 0.0.1-dev.1785908062293
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.tsbuildinfo +1 -0
- package/dist/api-03c5jvVk.js +38 -0
- package/dist/api-CQxCVIrm.cjs +1 -0
- package/dist/cjs/form/index.js +1 -1
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/plugins/dom-observer/index.js +1 -1
- package/dist/cjs/plugins/dynamic-experiences/index.js +1 -1
- package/dist/cjs/server/index.js +1 -1
- package/dist/docs/explanation/conditions-and-the-logic-engine.md +94 -0
- package/dist/docs/explanation/feature-flag-allocation.md +176 -0
- package/dist/docs/explanation/how-picked-works.md +124 -0
- package/dist/docs/explanation/how-pickedql-works.md +76 -0
- package/dist/docs/explanation/pages-and-flows.md +64 -0
- package/dist/docs/explanation/the-content-model.md +77 -0
- package/dist/docs/explanation/the-two-apis.md +68 -0
- package/dist/docs/explanation/why-server-side-rendering.md +76 -0
- package/dist/docs/explanation/workspaces-and-versions.md +71 -0
- package/dist/docs/how-to/add-a-step-field-or-action.md +43 -0
- package/dist/docs/{pickedql/examples.md → how-to/analytics/index.md} +53 -28
- package/dist/docs/how-to/archive-or-delete-a-workspace.md +46 -0
- package/dist/docs/how-to/authenticate-with-a-magic-link.md +40 -0
- package/dist/docs/how-to/authenticate-with-a-password.md +51 -0
- package/dist/docs/how-to/authenticate-with-an-api-key.md +51 -0
- package/dist/docs/how-to/authenticate-with-oauth.md +40 -0
- package/dist/docs/how-to/build-a-flow.md +83 -0
- package/dist/docs/how-to/connect-the-mcp-server.md +38 -0
- package/dist/docs/how-to/create-a-project.md +29 -0
- package/dist/docs/how-to/create-an-experience.md +42 -0
- package/dist/docs/how-to/create-and-revoke-an-api-key.md +37 -0
- package/dist/docs/how-to/debug-with-the-chrome-extension.md +57 -0
- package/dist/docs/how-to/define-a-page-layout.md +39 -0
- package/dist/docs/how-to/fill-and-publish-a-page.md +50 -0
- package/dist/docs/how-to/install-the-gtm-template.md +84 -0
- package/dist/docs/how-to/install-the-sdk.md +68 -0
- package/dist/docs/how-to/install-the-vite-plugin.md +56 -0
- package/dist/docs/how-to/invite-and-remove-members.md +34 -0
- package/dist/docs/how-to/preview-a-workspace.md +28 -0
- package/dist/docs/how-to/publish-a-workspace.md +30 -0
- package/dist/docs/how-to/read-a-feature-flag.md +101 -0
- package/dist/docs/how-to/register-a-component.md +55 -0
- package/dist/docs/how-to/register-an-action-handler.md +67 -0
- package/dist/docs/how-to/render-a-step-form.md +132 -0
- package/dist/docs/how-to/render-an-unpublished-preview.md +41 -0
- package/dist/docs/how-to/reuse-a-section.md +37 -0
- package/dist/docs/how-to/reuse-a-step-field-or-action.md +28 -0
- package/dist/docs/how-to/roll-back-a-published-version.md +26 -0
- package/dist/docs/how-to/run-an-ab-test.md +49 -0
- package/dist/docs/how-to/run-code-on-a-form-submission.md +125 -0
- package/dist/docs/how-to/server-render-a-page.md +81 -0
- package/dist/docs/how-to/set-a-content-security-policy.md +32 -0
- package/dist/docs/how-to/set-up-mfa.md +69 -0
- package/dist/docs/how-to/upload-and-use-an-asset.mdx +73 -0
- package/dist/docs/how-to/validate-a-field.md +52 -0
- package/dist/docs/how-to/write-a-condition.md +45 -0
- package/dist/docs/how-to/write-a-predicate.md +60 -0
- package/dist/docs/index.md +41 -59
- package/dist/docs/reference/dashboard/actions.mdx +53 -0
- package/dist/docs/reference/dashboard/api-keys.mdx +37 -0
- package/dist/docs/reference/dashboard/conditions.mdx +42 -0
- package/dist/docs/reference/dashboard/content/asset-library.mdx +63 -0
- package/dist/docs/reference/dashboard/content/content-entries.mdx +44 -0
- package/dist/docs/reference/dashboard/content/layouts.mdx +62 -0
- package/dist/docs/reference/dashboard/content/pages.mdx +35 -0
- package/dist/docs/reference/dashboard/content/sections.mdx +28 -0
- package/dist/docs/reference/dashboard/experiences.mdx +51 -0
- package/dist/docs/reference/dashboard/features.mdx +114 -0
- package/dist/docs/reference/dashboard/fields.mdx +100 -0
- package/dist/docs/reference/dashboard/flow-builder/canvas.mdx +58 -0
- package/dist/docs/reference/dashboard/flow-builder/condition-builder.md +57 -0
- package/dist/docs/reference/dashboard/flow-builder/keyboard-shortcuts.md +72 -0
- package/dist/docs/reference/dashboard/flow-builder/nodes.md +63 -0
- package/dist/docs/reference/dashboard/projects.mdx +44 -0
- package/dist/docs/reference/dashboard/reports.mdx +43 -0
- package/dist/docs/reference/dashboard/steps.mdx +37 -0
- package/dist/docs/reference/dashboard/team-management.md +29 -0
- package/dist/docs/reference/dashboard/workspace-versioning.mdx +30 -0
- package/dist/docs/reference/dashboard/workspaces.mdx +76 -0
- package/dist/docs/{delivery-api → reference/delivery-api}/experience-content.md +17 -5
- package/dist/docs/reference/delivery-api/index.md +45 -0
- package/dist/docs/reference/delivery-api/preview-caching-crawling.md +79 -0
- package/dist/docs/{delivery-api → reference/delivery-api}/project-config.md +15 -6
- package/dist/docs/reference/glossary.md +173 -0
- package/dist/docs/reference/management-api/authentication.md +74 -0
- package/dist/docs/{api → reference/management-api}/authorization-and-scopes.md +70 -47
- package/dist/docs/reference/management-api/error-handling.md +233 -0
- package/dist/docs/{api → reference/management-api}/pagination.md +36 -20
- package/dist/docs/reference/pickedql/data-sources.md +174 -0
- package/dist/docs/reference/pickedql/dimensions.md +87 -0
- package/dist/docs/{pickedql → reference/pickedql}/filtering.md +17 -6
- package/dist/docs/reference/pickedql/index.md +18 -0
- package/dist/docs/reference/pickedql/schema.md +172 -0
- package/dist/docs/reference/pickedql/virtual-functions.md +237 -0
- package/dist/docs/reference/sdk/actions.md +30 -0
- package/dist/docs/{sdk → reference/sdk}/conditions.md +15 -5
- package/dist/docs/reference/sdk/content-security-policy.md +21 -0
- package/dist/docs/reference/sdk/experiences.md +51 -0
- package/dist/docs/reference/sdk/features.md +233 -0
- package/dist/docs/reference/sdk/fields.md +209 -0
- package/dist/docs/reference/sdk/index.md +68 -0
- package/dist/docs/{sdk → reference/sdk}/plugins/create-experience.md +25 -34
- package/dist/docs/reference/sdk/plugins/dynamic-experiences.md +74 -0
- package/dist/docs/reference/sdk/plugins/index.md +29 -0
- package/dist/docs/{sdk → reference/sdk}/plugins/window-object.md +6 -0
- package/dist/docs/reference/sdk/predicates.md +43 -0
- package/dist/docs/reference/sdk/ssr/index.md +33 -0
- package/dist/docs/reference/sdk/ssr/rendering-and-hydration.md +103 -0
- package/dist/docs/reference/sdk/ssr/serialize.md +77 -0
- package/dist/docs/reference/sdk/ssr/slots-and-placements.md +59 -0
- package/dist/docs/reference/sdk/steps.md +87 -0
- package/dist/docs/reference/tools/chrome-extension.md +16 -0
- package/dist/docs/reference/tools/image-optimisation-service.md +104 -0
- package/dist/docs/reference/tools/mcp.md +88 -0
- package/dist/docs/reference/tools/vite-plugin.md +88 -0
- package/dist/docs/tutorials/first-api-call.md +228 -0
- package/dist/docs/tutorials/first-experience-in-the-dashboard.mdx +143 -0
- package/dist/docs/tutorials/first-experience.mdx +255 -0
- package/dist/docs/tutorials/first-server-rendered-page.mdx +186 -0
- package/dist/{dom-BwmTHeT7.js → dom-BqcToNL0.js} +1 -3
- package/dist/{dom-CDrHc_j9.cjs → dom-DlLH3FxV.cjs} +1 -1
- package/dist/esm/form/index.js +2 -4
- package/dist/esm/index.js +225 -186
- package/dist/esm/plugins/dom-observer/index.js +1 -1
- package/dist/esm/plugins/dynamic-experiences/index.js +3 -3
- package/dist/esm/preview/index.js +1 -1
- package/dist/esm/server/index.js +33 -31
- package/dist/{experience-instance-DOJShRk5.js → experience-instance-DGk11d8a.js} +3 -3
- package/dist/experience-instance-Dej3P1sE.cjs +1 -0
- package/dist/plugin-CHOVsx7Z.js +287 -0
- package/dist/plugin-DsaGXQHx.cjs +1 -0
- package/dist/{preview-channel-DW9J8t4B.js → preview-channel-CSr96XAo.js} +1 -1
- package/dist/{protocol-DSqOlW2r.js → protocol-C5KkkiZc.js} +1 -1
- package/dist/types/client.d.ts +7 -6
- package/dist/types/data-source/api.d.ts +60 -0
- package/dist/types/data-source/api.d.ts.map +1 -0
- package/dist/types/data-source/provider.d.ts +97 -0
- package/dist/types/data-source/provider.d.ts.map +1 -0
- package/dist/types/entities/action/action.d.ts +5 -4
- package/dist/types/entities/action/action.d.ts.map +1 -1
- package/dist/types/entities/component/component.d.ts +6 -5
- package/dist/types/entities/component/component.d.ts.map +1 -1
- package/dist/types/entities/condition/condition.d.ts +5 -5
- package/dist/types/entities/content/content.d.ts +4 -3
- package/dist/types/entities/experience/experience.d.ts +11 -10
- package/dist/types/entities/experience/experience.d.ts.map +1 -1
- package/dist/types/entities/experience-instance/experience-instance.d.ts +10 -9
- package/dist/types/entities/feature/feature.d.ts +19 -2
- package/dist/types/entities/feature/feature.d.ts.map +1 -1
- package/dist/types/entities/field/field.d.ts +7 -6
- package/dist/types/entities/framework/framework.d.ts +7 -6
- package/dist/types/entities/framework/framework.d.ts.map +1 -1
- package/dist/types/entities/history/history.d.ts +6 -6
- package/dist/types/entities/plugin/plugin.d.ts +3 -2
- package/dist/types/entities/plugin/plugin.d.ts.map +1 -1
- package/dist/types/entities/predicate/predicate.d.ts +4 -3
- package/dist/types/entities/predicate/predicate.d.ts.map +1 -1
- package/dist/types/entities/response/response-validation.d.ts +3 -2
- package/dist/types/entities/response/response.d.ts +12 -11
- package/dist/types/entities/session/session.d.ts +2 -1
- package/dist/types/entities/step/step.d.ts +6 -5
- package/dist/types/exports.d.ts +2 -1
- package/dist/types/exports.d.ts.map +1 -1
- package/dist/types/form/build-responses.d.ts +2 -1
- package/dist/types/form/create-field-evaluator.d.ts +4 -3
- package/dist/types/form/create-field-validation.d.ts +5 -4
- package/dist/types/form/create-form.d.ts +7 -6
- package/dist/types/form/create-submit-pipeline.d.ts +7 -6
- package/dist/types/form/get-step-fields.d.ts +3 -2
- package/dist/types/lifecycle/condition-selection.d.ts +14 -4
- package/dist/types/lifecycle/lifecycle.d.ts +4 -3
- package/dist/types/lifecycle/rules-logic.d.ts +4 -3
- package/dist/types/lifecycle/state-snapshot.d.ts +4 -3
- package/dist/types/picked.d.ts +79 -62
- package/dist/types/picked.d.ts.map +1 -1
- package/dist/types/ping.d.ts +1 -1
- package/dist/types/ping.d.ts.map +1 -1
- package/dist/types/plugins/create-experience/create-experience.d.ts +9 -8
- package/dist/types/plugins/create-experience/create-experience.d.ts.map +1 -1
- package/dist/types/plugins/create-experience/plugin.d.ts +3 -2
- package/dist/types/plugins/create-experience/plugin.d.ts.map +1 -1
- package/dist/types/plugins/create-experience/serialization.d.ts.map +1 -1
- package/dist/types/plugins/dom-observer/plugin.d.ts +1 -1
- package/dist/types/plugins/dynamic-experiences/hash.d.ts +40 -5
- package/dist/types/plugins/dynamic-experiences/hash.d.ts.map +1 -1
- package/dist/types/plugins/dynamic-experiences/index.d.ts +2 -0
- package/dist/types/plugins/dynamic-experiences/index.d.ts.map +1 -1
- package/dist/types/plugins/dynamic-experiences/plugin.d.ts +4 -36
- package/dist/types/plugins/dynamic-experiences/plugin.d.ts.map +1 -1
- package/dist/types/plugins/dynamic-experiences/types.d.ts +42 -11
- package/dist/types/plugins/dynamic-experiences/types.d.ts.map +1 -1
- package/dist/types/plugins/experience-browser-storage/plugin.d.ts +1 -1
- package/dist/types/plugins/experience-browser-storage/plugin.d.ts.map +1 -1
- package/dist/types/plugins/history-browser-storage/plugin.d.ts +1 -1
- package/dist/types/plugins/history-browser-storage/plugin.d.ts.map +1 -1
- package/dist/types/plugins/responses-browser-storage/plugin.d.ts +1 -1
- package/dist/types/plugins/responses-browser-storage/plugin.d.ts.map +1 -1
- package/dist/types/plugins/responses-indexeddb/plugin.d.ts +1 -1
- package/dist/types/plugins/single-page-app/plugin.d.ts +1 -1
- package/dist/types/plugins/single-page-app/plugin.d.ts.map +1 -1
- package/dist/types/plugins/web-components/plugin.d.ts +2 -1
- package/dist/types/plugins/window-object/plugin.d.ts +2 -2
- package/dist/types/preview-channel.d.ts +5 -1
- package/dist/types/preview-receiver/index.d.ts +18 -1
- package/dist/types/preview-receiver/protocol.d.ts +10 -1
- package/dist/types/server/index.d.ts +3 -3
- package/dist/types/server/serialize.d.ts +8 -2
- package/dist/types/server/serialize.d.ts.map +1 -1
- package/dist/types/utils/dom.d.ts +2 -1
- package/dist/types/utils/events.d.ts +6 -6
- package/dist/types/utils/events.d.ts.map +1 -1
- package/dist/types/utils/global-obj.d.ts +1 -1
- package/dist/types/utils/global-obj.d.ts.map +1 -1
- package/dist/types/utils/id.d.ts.map +1 -1
- package/dist/types/utils/logger.d.ts +2 -1
- package/dist/types/utils/logger.d.ts.map +1 -1
- package/dist/types/utils/node-tree/get-next-node-from-action.d.ts +2 -1
- package/dist/types/utils/node-tree/get-next-node-from-condition.d.ts +2 -1
- package/dist/types/utils/node-tree/get-next-node.d.ts +1 -1
- package/dist/types/utils/node-tree/get-next-node.d.ts.map +1 -1
- package/dist/types/utils/node-tree/get-origin-node.d.ts +1 -1
- package/dist/types/utils/node-tree/get-origin-node.d.ts.map +1 -1
- package/dist/types/utils/node-tree/min-max-steps-to-leaf.d.ts +1 -1
- package/dist/types/utils/node-tree/min-max-steps-to-leaf.d.ts.map +1 -1
- package/dist/types/utils/node-tree/min-max-steps-to-origin.d.ts +1 -1
- package/dist/types/utils/node-tree/min-max-steps-to-origin.d.ts.map +1 -1
- package/dist/types/utils/node-tree/next-reachable-step-nodes.d.ts +1 -1
- package/dist/types/utils/node-tree/next-reachable-step-nodes.d.ts.map +1 -1
- package/dist/types/utils/nodes.d.ts +1 -1
- package/dist/types/utils/picked-config.d.ts +2 -1
- package/dist/types/utils/rehydrate-scripts.d.ts +6 -0
- package/dist/types/utils/rehydrate-scripts.d.ts.map +1 -1
- package/dist/types/utils/rules-logic.d.ts +6 -2
- package/dist/types/utils/storage.d.ts +1 -1
- package/dist/types/utils/storage.d.ts.map +1 -1
- package/package.json +22 -23
- package/dist/api-CPL40b7A.js +0 -40
- package/dist/api-Dz5rgRgQ.cjs +0 -1
- package/dist/docs/actions.mdx +0 -78
- package/dist/docs/api/authentication.md +0 -376
- package/dist/docs/api/error-handling.md +0 -211
- package/dist/docs/api/index.md +0 -197
- package/dist/docs/api-keys.mdx +0 -40
- package/dist/docs/chrome-extension.md +0 -51
- package/dist/docs/conditions.mdx +0 -59
- package/dist/docs/content/asset-library.mdx +0 -93
- package/dist/docs/content/content-entries.mdx +0 -30
- package/dist/docs/content/layouts.mdx +0 -70
- package/dist/docs/content/pages.mdx +0 -67
- package/dist/docs/content/sections.mdx +0 -33
- package/dist/docs/delivery-api/index.md +0 -46
- package/dist/docs/delivery-api/preview-caching-crawling.md +0 -59
- package/dist/docs/experiences.mdx +0 -42
- package/dist/docs/features.mdx +0 -58
- package/dist/docs/fields.mdx +0 -79
- package/dist/docs/flow-builder/building-flows.md +0 -61
- package/dist/docs/flow-builder/condition-builder.md +0 -54
- package/dist/docs/flow-builder/keyboard-shortcuts.md +0 -66
- package/dist/docs/flow-builder/nodes.md +0 -43
- package/dist/docs/flow-builder/overview.mdx +0 -50
- package/dist/docs/gtm-template.md +0 -69
- package/dist/docs/guides/build-a-personalized-page.mdx +0 -143
- package/dist/docs/image-optimisation-service.md +0 -80
- package/dist/docs/mcp.md +0 -120
- package/dist/docs/pickedql/data-sources.md +0 -145
- package/dist/docs/pickedql/dimensions.md +0 -65
- package/dist/docs/pickedql/index.md +0 -36
- package/dist/docs/pickedql/schema.md +0 -156
- package/dist/docs/pickedql/virtual-functions.md +0 -204
- package/dist/docs/projects.mdx +0 -37
- package/dist/docs/reports.mdx +0 -18
- package/dist/docs/sdk/actions.md +0 -66
- package/dist/docs/sdk/content-security-policy.md +0 -32
- package/dist/docs/sdk/experiences.md +0 -46
- package/dist/docs/sdk/features.md +0 -212
- package/dist/docs/sdk/fields.md +0 -263
- package/dist/docs/sdk/index.md +0 -83
- package/dist/docs/sdk/plugins/dynamic-experiences.md +0 -58
- package/dist/docs/sdk/plugins/index.md +0 -9
- package/dist/docs/sdk/predicates.md +0 -112
- package/dist/docs/sdk/ssr/index.md +0 -62
- package/dist/docs/sdk/ssr/rendering-and-hydration.md +0 -141
- package/dist/docs/sdk/ssr/serialize.md +0 -86
- package/dist/docs/sdk/ssr/slots-and-placements.md +0 -35
- package/dist/docs/sdk/steps.md +0 -434
- package/dist/docs/steps.mdx +0 -44
- package/dist/docs/team-management.md +0 -40
- package/dist/docs/vite-plugin.md +0 -82
- package/dist/docs/workspace-versioning.mdx +0 -28
- package/dist/docs/workspaces.mdx +0 -102
- package/dist/experience-instance-DurC3pE-.cjs +0 -1
- package/dist/plugin-CFXwbXeM.js +0 -247
- package/dist/plugin-m4qekgtA.cjs +0 -1
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: docs
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
import { Screenshot } from '../../../components/Screenshot'
|
|
6
|
-
|
|
7
|
-
# Page & Step Layouts
|
|
8
|
-
|
|
9
|
-
Layouts are reusable JSON schemas. Page Layouts back standalone Pages; Step Layouts back individual Steps inside a Flow.
|
|
10
|
-
|
|
11
|
-
<Screenshot
|
|
12
|
-
route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/models"
|
|
13
|
-
alt="The layouts list in the schema builder on the Picked dashboard"
|
|
14
|
-
/>
|
|
15
|
-
|
|
16
|
-
## What a layout is
|
|
17
|
-
|
|
18
|
-
A layout is a reusable schema that defines the fields a piece of content can hold. It holds no data itself: a [Content Entry](/content/content-entries) instantiates the layout and fills it in. The dashboard groups both kinds of layout under **Models**.
|
|
19
|
-
|
|
20
|
-
## Page layouts vs step layouts
|
|
21
|
-
|
|
22
|
-
A layout has a fixed category that decides what it backs:
|
|
23
|
-
|
|
24
|
-
| Layout | Backs | Used by |
|
|
25
|
-
| --- | --- | --- |
|
|
26
|
-
| **Page Layout** | A standalone [Page](/content/pages). | The SDK renders the bound entry on your server. |
|
|
27
|
-
| **Step Layout** | A single [Step](/steps) inside a Flow. | The Step renders the bound entry in the browser. |
|
|
28
|
-
|
|
29
|
-
## Create a layout
|
|
30
|
-
|
|
31
|
-
1. Open your workspace and click **Models** in the sidebar.
|
|
32
|
-
2. Click **New Model** and choose the category, **Page Layout** or **Step Layout**.
|
|
33
|
-
3. Enter a name and a **Key**. The Key is a unique, stable identifier used in SDK code and API references.
|
|
34
|
-
4. Add fields (see below) and save.
|
|
35
|
-
|
|
36
|
-
The category is fixed at creation and cannot be changed later.
|
|
37
|
-
|
|
38
|
-
## Field types
|
|
39
|
-
|
|
40
|
-
A layout is built from fields. Each field has a type that decides its editor and the shape of the value it stores.
|
|
41
|
-
|
|
42
|
-
| Type | Stores | Use it for |
|
|
43
|
-
| --- | --- | --- |
|
|
44
|
-
| **Single-line text** | A short string. | Titles, labels, short headlines. |
|
|
45
|
-
| **Multi-line text** | A longer plain string. | Descriptions, paragraphs without formatting. |
|
|
46
|
-
| **Markdown** | A Markdown string. | Rich body copy with formatting. |
|
|
47
|
-
| **Slug** | A URL-safe string. | Path segments, identifiers. |
|
|
48
|
-
| **Number** | A numeric value. | Prices, counts, ratings. |
|
|
49
|
-
| **Boolean** | A true/false value. | Toggles, flags. |
|
|
50
|
-
| **Date** | A date value. | Publish dates, deadlines. |
|
|
51
|
-
| **Color** | A color value. | Theme accents, swatches. |
|
|
52
|
-
| **JSON** | An arbitrary JSON value. | Structured data with no dedicated editor. |
|
|
53
|
-
| **Group** | A nested object of fields. | Grouping related fields together. |
|
|
54
|
-
| **Section** | An embedded [Section](/content/sections) schema. | Reusing a shared schema fragment. |
|
|
55
|
-
| **Asset** | A reference to an [Asset Library](/content/asset-library) item. | Images, video, documents. |
|
|
56
|
-
| **HTML asset** | A reference to an uploaded `.html` file. | Pre-built HTML embedded into content. |
|
|
57
|
-
|
|
58
|
-
## Repeatable and grouped fields
|
|
59
|
-
|
|
60
|
-
Any field can be made **repeatable**, which renders as a sortable list of values rather than a single value. Use it for galleries, feature lists, or any collection.
|
|
61
|
-
|
|
62
|
-
A **Group** field nests a set of fields under one key, producing a structured object. Combine repeatable with a group to model a list of objects, such as a list of feature cards.
|
|
63
|
-
|
|
64
|
-
## Composing with sections
|
|
65
|
-
|
|
66
|
-
A **Section** field embeds a reusable [Section](/content/sections) schema inside the layout. Define a common structure, such as a hero or a feature list, once as a Section, then reference it from any Page or Step Layout.
|
|
67
|
-
|
|
68
|
-
## Changing a schema
|
|
69
|
-
|
|
70
|
-
Editing a layout's schema can leave existing Content Entries out of date. After a schema change, revalidate the entries that use the layout and fix any per-field errors before publishing.
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: docs
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
import { Screenshot } from '../../../components/Screenshot'
|
|
6
|
-
|
|
7
|
-
# Pages
|
|
8
|
-
|
|
9
|
-
A Page is a standalone, server-rendered experience backed by CMS content, built for SEO-critical landing pages.
|
|
10
|
-
|
|
11
|
-
<Screenshot
|
|
12
|
-
route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/experiences"
|
|
13
|
-
alt="The experiences list, where Pages and Flows are created on the Picked dashboard"
|
|
14
|
-
/>
|
|
15
|
-
|
|
16
|
-
## Pages vs flows
|
|
17
|
-
|
|
18
|
-
Picked has two kinds of experience:
|
|
19
|
-
|
|
20
|
-
| Experience | What it is | Use it for |
|
|
21
|
-
| --- | --- | --- |
|
|
22
|
-
| **Page** | A standalone experience rendered on your server, backed by a Content Entry. | SEO-critical landing pages, campaign pages, content the crawler must see. |
|
|
23
|
-
| **Flow** | A multi-step, interactive experience rendered in the browser. | Quizzes, surveys, product finders, multi-step onboarding. |
|
|
24
|
-
|
|
25
|
-
Reach for a **Page** when the content must appear in the server HTML for search engines and social unfurls. Reach for a **Flow** when the value is in the interaction, and client-side rendering is fine. See [Experiences](/experiences) for the wider model.
|
|
26
|
-
|
|
27
|
-
## How a page fits together
|
|
28
|
-
|
|
29
|
-
Four pieces back every Page:
|
|
30
|
-
|
|
31
|
-
1. A **Page Layout** defines the shape: the fields a page can hold. See [Page & Step Layouts](/content/layouts).
|
|
32
|
-
2. A **Content Entry** fills that shape with real data. See [Content Entries](/content/content-entries).
|
|
33
|
-
3. A **Page** binds one entry so the SDK can render it.
|
|
34
|
-
4. The **SDK** fetches the entry and renders it on your server. See [Server-Side Rendering](/sdk/ssr).
|
|
35
|
-
|
|
36
|
-
A layout defines the shape, a content entry fills it with data, a Page binds an entry so the SDK can render it. Step Layouts do the same for individual Steps inside a Flow.
|
|
37
|
-
|
|
38
|
-
```
|
|
39
|
-
Author (dashboard) -> Publish -> Delivery API (config + content)
|
|
40
|
-
-> serialize() on server -> Provider seeds client -> ExperienceSlot renders -> hydrate
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## Create a page
|
|
44
|
-
|
|
45
|
-
1. Open your project and select a workspace.
|
|
46
|
-
2. Click **Experiences** in the sidebar.
|
|
47
|
-
3. Click **New Experience** and choose the **Page** type.
|
|
48
|
-
4. Pick a **Page Layout**. The layout determines which fields the page holds.
|
|
49
|
-
5. Click **Create**.
|
|
50
|
-
|
|
51
|
-
A Content Entry is created and linked to the page on its first save, so the page always has somewhere to store its data.
|
|
52
|
-
|
|
53
|
-
## Edit page content
|
|
54
|
-
|
|
55
|
-
The Page editor has a **Properties** tab for the page's content and a **Settings** tab for its name, condition, and layout. Fill in the fields on the **Properties** tab. The inspector on the right edits the selected field, and the preview panel shows the page as it fills in.
|
|
56
|
-
|
|
57
|
-
## Change or remove the layout
|
|
58
|
-
|
|
59
|
-
Use the change-layout control on the **Settings** tab to switch the page to a different Page Layout. Unlinking a layout detaches the Content Entry from the page. The entry is not deleted, but the page no longer has content to render until you bind a layout again.
|
|
60
|
-
|
|
61
|
-
## Validate and publish
|
|
62
|
-
|
|
63
|
-
Invalid fields surface inline as per-field errors while you edit, so you can fix them before publishing. When the page is valid, publish the workspace to make it live. Publishing produces the version the Delivery API serves to anonymous readers.
|
|
64
|
-
|
|
65
|
-
## Render a page
|
|
66
|
-
|
|
67
|
-
A published Page is rendered by the SDK on your server. See the [Build a Personalized Page](/guides/build-a-personalized-page) guide for the end-to-end walkthrough, and [Server-Side Rendering](/sdk/ssr) for the SDK reference.
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: docs
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
import { Screenshot } from '../../../components/Screenshot'
|
|
6
|
-
|
|
7
|
-
# Sections
|
|
8
|
-
|
|
9
|
-
Sections are reusable schema fragments you embed inside layouts, so common structures such as a hero or a feature list are defined once.
|
|
10
|
-
|
|
11
|
-
<Screenshot
|
|
12
|
-
route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/blocks"
|
|
13
|
-
alt="The sections list in the schema builder on the Picked dashboard"
|
|
14
|
-
/>
|
|
15
|
-
|
|
16
|
-
## What a section is
|
|
17
|
-
|
|
18
|
-
A Section is a reusable fragment of schema with its own **Key**. Where a [layout](/content/layouts) backs a whole Page or Step, a Section is a piece you compose into one or more layouts. Define the shape once, reuse it everywhere.
|
|
19
|
-
|
|
20
|
-
## Create a section
|
|
21
|
-
|
|
22
|
-
1. Open your workspace and click **Sections** in the sidebar.
|
|
23
|
-
2. Click **New Section**.
|
|
24
|
-
3. Enter a name and a **Key**. The Key is a unique, stable identifier used in SDK code and API references.
|
|
25
|
-
4. Add fields and save.
|
|
26
|
-
|
|
27
|
-
## Use a section in a layout
|
|
28
|
-
|
|
29
|
-
Add a **Section** field to a Page or Step Layout and point it at the Section you want to embed. The layout then carries the Section's fields wherever that field appears. A Content Entry built from the layout fills the Section's fields like any others.
|
|
30
|
-
|
|
31
|
-
## Changing a section
|
|
32
|
-
|
|
33
|
-
Editing a Section does not automatically migrate the entries that already use it. After changing a Section, revalidate the affected [Content Entries](/content/content-entries) and resolve any per-field errors before publishing.
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: docs
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# Delivery API
|
|
6
|
-
|
|
7
|
-
The Delivery API is a public, read-only REST API that serves your published project config and page content. It is separate from the GraphQL management API.
|
|
8
|
-
|
|
9
|
-
## Delivery API vs the management API
|
|
10
|
-
|
|
11
|
-
Picked has two HTTP APIs. Use the one that fits the job:
|
|
12
|
-
|
|
13
|
-
| | Delivery API | Management API |
|
|
14
|
-
| --- | --- | --- |
|
|
15
|
-
| Style | REST | GraphQL |
|
|
16
|
-
| Access | Public, anonymous | Authenticated |
|
|
17
|
-
| Operations | Read-only | Read and write |
|
|
18
|
-
| Use for | Serving published config and content to your app | Managing projects, experiences, and content |
|
|
19
|
-
|
|
20
|
-
The management API is documented under [API Reference](/api). This section covers the Delivery API.
|
|
21
|
-
|
|
22
|
-
## Base URL and versioning
|
|
23
|
-
|
|
24
|
-
All Delivery API routes are versioned under `/api/v1`:
|
|
25
|
-
|
|
26
|
-
```
|
|
27
|
-
https://api.picked.app/api/v1
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
## Published vs preview
|
|
31
|
-
|
|
32
|
-
Each endpoint serves two surfaces:
|
|
33
|
-
|
|
34
|
-
- **Published** content is anonymous. Anyone can read your published config and content.
|
|
35
|
-
- **Preview** content is gated by a `preview_token` query parameter, so you can render unpublished drafts before going live.
|
|
36
|
-
|
|
37
|
-
A workspace's preview token is available as the `previewToken` field on the workspace in the management API, and the dashboard preview action issues one for you.
|
|
38
|
-
|
|
39
|
-
## Endpoints
|
|
40
|
-
|
|
41
|
-
| Endpoint | Description |
|
|
42
|
-
| --- | --- |
|
|
43
|
-
| [Project Config](/delivery-api/project-config) | `GET /api/v1/projects/:projectId` returns the published project config, including each step's content link. |
|
|
44
|
-
| [Experience Content](/delivery-api/experience-content) | `GET /api/v1/projects/:projectId/experiences/:id/content` returns the Content Entries that back an experience. |
|
|
45
|
-
|
|
46
|
-
For the operational details shared by both endpoints, see [Preview, Caching & Crawling](/delivery-api/preview-caching-crawling).
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: docs
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# Preview, Caching & Crawling
|
|
6
|
-
|
|
7
|
-
The operational surface shared by both Delivery API endpoints: preview tokens, caching, CORS, and crawling.
|
|
8
|
-
|
|
9
|
-
## Preview tokens
|
|
10
|
-
|
|
11
|
-
Pass `?preview_token=<token>` to read unpublished content. Both endpoints accept it, and both return `versionId: null` on the preview surface. An invalid token returns `401`.
|
|
12
|
-
|
|
13
|
-
```bash
|
|
14
|
-
curl "https://api.picked.app/api/v1/projects/proj_123?preview_token=<token>"
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
A workspace's preview token is available as the `previewToken` field on the workspace in the [management API](/api), and the dashboard preview action issues one for you. Use the same token for the project config and the experience content requests so both come from the same preview surface.
|
|
18
|
-
|
|
19
|
-
## Caching
|
|
20
|
-
|
|
21
|
-
Caching depends on the surface and the requesting client. The SDK sends a `Picked-Client: sdk` request header:
|
|
22
|
-
|
|
23
|
-
| Request | `Cache-Control` |
|
|
24
|
-
| --- | --- |
|
|
25
|
-
| Published, `Picked-Client: sdk` | `public, s-maxage=60, stale-while-revalidate=86400` |
|
|
26
|
-
| Published, other clients | `private, no-store` |
|
|
27
|
-
| Preview | `no-store` |
|
|
28
|
-
|
|
29
|
-
Cacheable published responses also send `Vary: Picked-Client`, so a shared cache keys on the client header and never serves an SDK-cached body to a non-SDK request.
|
|
30
|
-
|
|
31
|
-
## CORS
|
|
32
|
-
|
|
33
|
-
Both endpoints are cross-origin readable. An `OPTIONS` preflight returns `204` with the CORS headers:
|
|
34
|
-
|
|
35
|
-
| Header | Value |
|
|
36
|
-
| --- | --- |
|
|
37
|
-
| `Access-Control-Allow-Origin` | `*` |
|
|
38
|
-
| `Access-Control-Allow-Methods` | `GET, OPTIONS` |
|
|
39
|
-
| `Access-Control-Allow-Headers` | `Content-Type, Picked-Client, Picked-Version, traceparent, tracestate` |
|
|
40
|
-
|
|
41
|
-
## Crawling and SEO
|
|
42
|
-
|
|
43
|
-
Both endpoints are crawlable so search engines can read your published content. Preview URLs are disallowed, so drafts never reach the index. The `robots.txt` rules:
|
|
44
|
-
|
|
45
|
-
```
|
|
46
|
-
User-agent: *
|
|
47
|
-
|
|
48
|
-
# Allow crawling of the public project config and experience content endpoints
|
|
49
|
-
Allow: /api/v1/projects
|
|
50
|
-
Allow: /api/v1/projects/*/experiences/*/content
|
|
51
|
-
|
|
52
|
-
# Keep preview (draft) responses out of crawlers
|
|
53
|
-
Disallow: /api/v1/projects/*preview_token=
|
|
54
|
-
|
|
55
|
-
# Everything else (GraphQL, MCP, internal, ping) stays disallowed
|
|
56
|
-
Disallow: /
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
See [Project Config](/delivery-api/project-config) and [Experience Content](/delivery-api/experience-content) for the endpoints themselves.
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: docs
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
import { Screenshot } from '../../components/Screenshot'
|
|
6
|
-
|
|
7
|
-
# Experiences
|
|
8
|
-
|
|
9
|
-
An experience is a personalized experience delivered to visitors on your site. Each experience maps to a component registered in your application.
|
|
10
|
-
|
|
11
|
-
Picked has two kinds of experience. A **Flow** is a multi-step, interactive experience rendered in the browser, covered on this page. A **Page** is a standalone, server-rendered experience backed by CMS content, built for SEO-critical landing pages. See [Pages](/content/pages) for that kind.
|
|
12
|
-
|
|
13
|
-
<Screenshot
|
|
14
|
-
route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/experiences"
|
|
15
|
-
alt="The experiences list for a workspace on the Picked dashboard"
|
|
16
|
-
/>
|
|
17
|
-
|
|
18
|
-
## Create an experience
|
|
19
|
-
|
|
20
|
-
1. Open your project.
|
|
21
|
-
2. Click **Experiences** in the sidebar.
|
|
22
|
-
3. Click **New Experience**.
|
|
23
|
-
4. Enter a name and a component name. The component name must match a component registered in your application. See [SDK Experiences](/sdk/experiences) for details on registering components.
|
|
24
|
-
5. Click **Create**.
|
|
25
|
-
|
|
26
|
-
The flow editor opens with an empty canvas. See [Building Flows](/flow-builder/building-flows) to start adding nodes.
|
|
27
|
-
|
|
28
|
-
## Experience settings
|
|
29
|
-
|
|
30
|
-
Select no nodes on the canvas (or click the canvas background) to open the experience inspector in the right panel.
|
|
31
|
-
|
|
32
|
-
**Name**: The display name shown in the dashboard. Visitors don't see this.
|
|
33
|
-
|
|
34
|
-
**Component Name**: The identifier that maps this experience to a registered component in your application.
|
|
35
|
-
|
|
36
|
-
**Condition**: An optional activation condition. When set, the experience only activates for visitors who match the condition logic. See [Condition Builder](/flow-builder/condition-builder) for details on configuring conditions. Leave blank to activate for all visitors.
|
|
37
|
-
|
|
38
|
-
**Initialize Open**: An optional condition that controls whether the experience opens automatically on page load. When blank, the experience loads but stays closed until opened.
|
|
39
|
-
|
|
40
|
-
## Experience list
|
|
41
|
-
|
|
42
|
-
The experiences list shows all experiences in the current project. Click any experience to open it in the flow builder.
|
package/dist/docs/features.mdx
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: docs
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
import { Screenshot } from '../../components/Screenshot'
|
|
6
|
-
|
|
7
|
-
# Features
|
|
8
|
-
|
|
9
|
-
Features let you run A/B tests and feature flags. Control which visitors see which variant of your site without deploying code changes.
|
|
10
|
-
|
|
11
|
-
<Screenshot
|
|
12
|
-
route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/features"
|
|
13
|
-
alt="The features list for a workspace on the Picked dashboard"
|
|
14
|
-
/>
|
|
15
|
-
|
|
16
|
-
## Create a feature
|
|
17
|
-
|
|
18
|
-
1. Open your project.
|
|
19
|
-
2. Click **Features** in the sidebar.
|
|
20
|
-
3. Click **New Feature**.
|
|
21
|
-
4. Enter a name.
|
|
22
|
-
5. Click **Create**.
|
|
23
|
-
|
|
24
|
-
## Keys
|
|
25
|
-
|
|
26
|
-
Each feature has a unique key. Use this key in your application to check which variant a visitor is assigned to. The key is set when you create the feature and cannot be changed later.
|
|
27
|
-
|
|
28
|
-
## Configure variants
|
|
29
|
-
|
|
30
|
-
Each feature has one or more variants. Visitors are assigned to a variant based on the rules you define.
|
|
31
|
-
|
|
32
|
-
Configure variant allocation, targeting rules, and rollout percentages from the feature detail page.
|
|
33
|
-
|
|
34
|
-
## How visitors are bucketed
|
|
35
|
-
|
|
36
|
-
Visitors are assigned to variants using weight-based probabilistic rollout. Each variant has a weight from 0 to 100, representing the percentage of traffic it receives.
|
|
37
|
-
|
|
38
|
-
For example, with two variants weighted 50/50, roughly half of visitors see each variant. A variant weighted at 0 receives no traffic.
|
|
39
|
-
|
|
40
|
-
Bucketing is deterministic — the same visitor sees the same variant on repeat visits, unless the feature version changes.
|
|
41
|
-
|
|
42
|
-
## Feature versions
|
|
43
|
-
|
|
44
|
-
Each feature has a version number (starting at 1). Incrementing the version resets all visitor assignments, so every visitor is re-evaluated as if they were seeing the feature for the first time.
|
|
45
|
-
|
|
46
|
-
### What happens when you increment the version
|
|
47
|
-
|
|
48
|
-
- **All visitors are re-allocated.** Every visitor currently allocated to this feature will be re-evaluated against the new version. A visitor who was in the control group may end up in a variant, and vice versa.
|
|
49
|
-
- **Cached decisions are invalidated.** The SDK caches allocation decisions in browser storage using a key that includes the version. When the version changes, the old cache entry no longer matches, forcing a fresh evaluation on the next page load.
|
|
50
|
-
- **This is irreversible.** You cannot decrement a version. Once incremented, the previous allocation assignments are lost.
|
|
51
|
-
|
|
52
|
-
### When to increment
|
|
53
|
-
|
|
54
|
-
Increment the version when you have changed the weight or allocation and want all visitors — including those already allocated — to be re-evaluated from scratch.
|
|
55
|
-
|
|
56
|
-
### When not to increment
|
|
57
|
-
|
|
58
|
-
If you only want changes to affect new visitors (those who haven't been allocated yet), update the weight without incrementing the version. Existing visitors will keep their current assignment.
|
package/dist/docs/fields.mdx
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: docs
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
import { Screenshot } from '../../components/Screenshot'
|
|
6
|
-
|
|
7
|
-
# Fields
|
|
8
|
-
|
|
9
|
-
A field is a data input shown to visitors inside a step. Fields collect information like names, email addresses, preferences, or selections.
|
|
10
|
-
|
|
11
|
-
These are experience Fields, which collect visitor input. They are distinct from the Content Fields that make up a CMS layout's schema, covered in [Page & Step Layouts](/content/layouts).
|
|
12
|
-
|
|
13
|
-
<Screenshot
|
|
14
|
-
route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/fields"
|
|
15
|
-
alt="The fields list for a workspace on the Picked dashboard"
|
|
16
|
-
/>
|
|
17
|
-
|
|
18
|
-
## Create a field
|
|
19
|
-
|
|
20
|
-
1. Open your project.
|
|
21
|
-
2. Click **Fields** in the sidebar.
|
|
22
|
-
3. Click **New Field**.
|
|
23
|
-
4. Enter a name, key, and label.
|
|
24
|
-
5. Select a type.
|
|
25
|
-
6. Click **Create**.
|
|
26
|
-
|
|
27
|
-
## Field types
|
|
28
|
-
|
|
29
|
-
Fields support many types. Here are some common examples:
|
|
30
|
-
|
|
31
|
-
`TEXT`: A string input. Use for names, emails, free-form text.
|
|
32
|
-
|
|
33
|
-
`NUMBER`: A numeric input. Use for quantities, ratings, ages.
|
|
34
|
-
|
|
35
|
-
`BOOLEAN`: A true/false toggle. Use for checkboxes, opt-ins, consent.
|
|
36
|
-
|
|
37
|
-
`OBJECT`: A structured data input. Use for complex or nested data.
|
|
38
|
-
|
|
39
|
-
## Configuration
|
|
40
|
-
|
|
41
|
-
**Name**: Display name in the dashboard. Not visible to visitors.
|
|
42
|
-
|
|
43
|
-
**Key**: Programmatic identifier. Set once, can't change. Not visible to visitors.
|
|
44
|
-
|
|
45
|
-
**Label**: The label visitors see next to the field.
|
|
46
|
-
|
|
47
|
-
**Placeholder**: Hint text shown inside the input when empty.
|
|
48
|
-
|
|
49
|
-
**Description**: A longer description of the field's purpose. Shown in the dashboard, not to visitors.
|
|
50
|
-
|
|
51
|
-
**Help Text**: Assistive text shown to visitors below the field.
|
|
52
|
-
|
|
53
|
-
**Default Value**: The initial value when the field loads.
|
|
54
|
-
|
|
55
|
-
## Validation
|
|
56
|
-
|
|
57
|
-
**Required**: When enabled, visitors must fill in this field before proceeding.
|
|
58
|
-
|
|
59
|
-
**Validation rules**: Define conditions for advanced constraints like minimum/maximum values, patterns, or custom logic. See [Condition Builder](/flow-builder/condition-builder) for details on building validation rules.
|
|
60
|
-
|
|
61
|
-
## Multiple values
|
|
62
|
-
|
|
63
|
-
Enable **Multiple** to allow visitors to submit more than one value for this field. Useful for multi-select inputs or tag-style fields.
|
|
64
|
-
|
|
65
|
-
## Options
|
|
66
|
-
|
|
67
|
-
For fields that present a fixed set of choices (like dropdowns or radio buttons), add options. Each option has a value that gets submitted with the response.
|
|
68
|
-
|
|
69
|
-
Each option can also have a condition applied. When a condition is set, the option only appears to visitors who match the condition logic. See [Condition Builder](/flow-builder/condition-builder) for details.
|
|
70
|
-
|
|
71
|
-
## Privacy
|
|
72
|
-
|
|
73
|
-
**Do Not Track**: When enabled, this field's data is excluded from analytics tracking.
|
|
74
|
-
|
|
75
|
-
**Do Not Store**: When enabled, this field's data is processed but not persisted. Use for sensitive information like passwords or payment details.
|
|
76
|
-
|
|
77
|
-
## Reuse fields
|
|
78
|
-
|
|
79
|
-
Fields are project-level entities. Assign the same field to multiple steps across different experiences. Changes to a field's configuration apply everywhere it's used.
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: docs
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# Building flows
|
|
6
|
-
|
|
7
|
-
Build flows by dragging blocks onto the canvas, connecting nodes with arrows, and configuring each node in the inspector.
|
|
8
|
-
|
|
9
|
-
## Add nodes
|
|
10
|
-
|
|
11
|
-
Drag a step, action, or condition from the entity browser onto the canvas. A new node appears where you drop it.
|
|
12
|
-
|
|
13
|
-
You can also drop a block directly onto an existing arrow. The node inserts inline — the original arrow splits into two arrows with the new node in between. A **+** indicator appears when you hover over a valid arrow.
|
|
14
|
-
|
|
15
|
-
## Connect nodes
|
|
16
|
-
|
|
17
|
-
Click and drag from a node's output handle (right side) to another node's input handle (left side). An arrow appears connecting them.
|
|
18
|
-
|
|
19
|
-
The flow follows arrows from left to right, starting at the origin. Every node downstream of the origin is part of the experience flow.
|
|
20
|
-
|
|
21
|
-
## Branch with conditions
|
|
22
|
-
|
|
23
|
-
Connect the origin (or any node) to a condition node. The condition evaluates its logic and routes the flow down one of two paths.
|
|
24
|
-
|
|
25
|
-
Connect the green (true) handle to the nodes that should run when the condition passes. Connect the red (false) handle to the alternative path. Either path can lead to more steps, actions, or further conditions.
|
|
26
|
-
|
|
27
|
-
## Assign fields to steps
|
|
28
|
-
|
|
29
|
-
Drag a field from the entity browser and drop it onto a step node. The field is now assigned to that step.
|
|
30
|
-
|
|
31
|
-
You can assign multiple fields to a single step. The step node shows a count of assigned fields. To see which fields are assigned, select the step and check the **Assigned Fields** section in the inspector.
|
|
32
|
-
|
|
33
|
-
## Select nodes
|
|
34
|
-
|
|
35
|
-
Click a node to select it. Its inspector opens in the right panel.
|
|
36
|
-
|
|
37
|
-
Drag on empty canvas to marquee-select multiple nodes. Press `Cmd/Ctrl+A` to select all nodes.
|
|
38
|
-
|
|
39
|
-
When multiple nodes are selected, the inspector shows a count and grouped list. Click any item in the list to navigate to its inspector.
|
|
40
|
-
|
|
41
|
-
## Move nodes
|
|
42
|
-
|
|
43
|
-
Drag a selected node to reposition it. Nodes snap to the grid automatically.
|
|
44
|
-
|
|
45
|
-
Use arrow keys to nudge selected nodes. Hold `Shift` for larger nudges.
|
|
46
|
-
|
|
47
|
-
## Delete nodes
|
|
48
|
-
|
|
49
|
-
Select one or more nodes and press `Delete` or `Backspace`. The nodes and their connected arrows are removed.
|
|
50
|
-
|
|
51
|
-
## Duplicate nodes
|
|
52
|
-
|
|
53
|
-
Select one or more nodes and press `Cmd/Ctrl+D`. Copies appear offset from the originals.
|
|
54
|
-
|
|
55
|
-
## Undo and redo
|
|
56
|
-
|
|
57
|
-
Press `Cmd/Ctrl+Z` to undo. Press `Cmd/Ctrl+Shift+Z` to redo. The undo stack tracks node additions, deletions, connections, and position changes.
|
|
58
|
-
|
|
59
|
-
---
|
|
60
|
-
|
|
61
|
-
[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · **Building Flows** · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · [Condition Builder](/flow-builder/condition-builder)
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: docs
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# Condition builder
|
|
6
|
-
|
|
7
|
-
The condition builder is a visual rule editor used across the dashboard. It lets you define logic without writing code.
|
|
8
|
-
|
|
9
|
-
## Where it appears
|
|
10
|
-
|
|
11
|
-
The condition builder is used in several places:
|
|
12
|
-
|
|
13
|
-
- **Condition nodes** — define branching logic in the [flow builder](/flow-builder/overview)
|
|
14
|
-
- **Experience conditions** — control when an experience activates for a visitor
|
|
15
|
-
- **Initialize open conditions** — control when an experience opens automatically on page load
|
|
16
|
-
- **Field option conditions** — show or hide individual options based on visitor state
|
|
17
|
-
|
|
18
|
-
## Rule structure
|
|
19
|
-
|
|
20
|
-
Rules are organized into groups. Each group uses either **AND** (all rules must match) or **OR** (any rule must match).
|
|
21
|
-
|
|
22
|
-
A single rule has three parts:
|
|
23
|
-
|
|
24
|
-
1. **Field** — the data source to evaluate
|
|
25
|
-
2. **Operator** — how to compare (equals, not equals, greater than, contains, etc.)
|
|
26
|
-
3. **Value** — the target value to compare against
|
|
27
|
-
|
|
28
|
-
You can nest groups inside other groups to create complex logic. For example, an AND group containing two OR groups.
|
|
29
|
-
|
|
30
|
-
## Available data sources
|
|
31
|
-
|
|
32
|
-
When building rules, you can reference these data sources:
|
|
33
|
-
|
|
34
|
-
**Responses** — values visitors have submitted through form fields in the current experience. Each field you create in your project appears here by its name.
|
|
35
|
-
|
|
36
|
-
**Actions** — references to actions that have been triggered during the flow.
|
|
37
|
-
|
|
38
|
-
**Features** — the state of feature flags in your project. Use this to branch based on which variant a visitor is assigned to.
|
|
39
|
-
|
|
40
|
-
**Location** — properties of the visitor's current page URL, including pathname, search parameters, hostname, and hash.
|
|
41
|
-
|
|
42
|
-
## Example
|
|
43
|
-
|
|
44
|
-
To show a step only to visitors on a specific page who opted into marketing:
|
|
45
|
-
|
|
46
|
-
1. Create an AND group.
|
|
47
|
-
2. Add a rule: **Location → pathname** equals `/pricing`.
|
|
48
|
-
3. Add a rule: **Responses → marketing_opt_in** equals `true`.
|
|
49
|
-
|
|
50
|
-
Both conditions must be true for the rule group to match.
|
|
51
|
-
|
|
52
|
-
---
|
|
53
|
-
|
|
54
|
-
[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · [Building Flows](/flow-builder/building-flows) · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · **Condition Builder**
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: docs
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# Keyboard shortcuts
|
|
6
|
-
|
|
7
|
-
These shortcuts are available when the flow builder canvas is focused.
|
|
8
|
-
|
|
9
|
-
## Canvas tools
|
|
10
|
-
|
|
11
|
-
| Shortcut (Mac) | Shortcut (PC) | Action |
|
|
12
|
-
| --- | --- | --- |
|
|
13
|
-
| `V` | `V` | Select tool |
|
|
14
|
-
| `H` | `H` | Hand tool (pan) |
|
|
15
|
-
| `Space` (hold) | `Space` (hold) | Temporary hand tool |
|
|
16
|
-
|
|
17
|
-
## Layout
|
|
18
|
-
|
|
19
|
-
| Shortcut (Mac) | Shortcut (PC) | Action |
|
|
20
|
-
| --- | --- | --- |
|
|
21
|
-
| `Shift+L` | `Shift+L` | Auto-layout |
|
|
22
|
-
|
|
23
|
-
## Selection
|
|
24
|
-
|
|
25
|
-
| Shortcut (Mac) | Shortcut (PC) | Action |
|
|
26
|
-
| --- | --- | --- |
|
|
27
|
-
| `Cmd+A` | `Ctrl+A` | Select all nodes |
|
|
28
|
-
| `Escape` | `Escape` | Deselect all |
|
|
29
|
-
|
|
30
|
-
## Editing
|
|
31
|
-
|
|
32
|
-
| Shortcut (Mac) | Shortcut (PC) | Action |
|
|
33
|
-
| --- | --- | --- |
|
|
34
|
-
| `Cmd+D` | `Ctrl+D` | Duplicate selected nodes |
|
|
35
|
-
| `Delete` / `Backspace` | `Delete` / `Backspace` | Delete selected nodes |
|
|
36
|
-
| `Cmd+Z` | `Ctrl+Z` | Undo |
|
|
37
|
-
| `Cmd+Shift+Z` | `Ctrl+Shift+Z` | Redo |
|
|
38
|
-
|
|
39
|
-
## Movement
|
|
40
|
-
|
|
41
|
-
| Shortcut (Mac) | Shortcut (PC) | Action |
|
|
42
|
-
| --- | --- | --- |
|
|
43
|
-
| Arrow keys | Arrow keys | Nudge selected nodes |
|
|
44
|
-
| `Shift`+Arrow keys | `Shift`+Arrow keys | Large nudge |
|
|
45
|
-
|
|
46
|
-
## Zoom
|
|
47
|
-
|
|
48
|
-
| Shortcut (Mac) | Shortcut (PC) | Action |
|
|
49
|
-
| --- | --- | --- |
|
|
50
|
-
| Scroll | Scroll | Zoom in/out |
|
|
51
|
-
| Pinch | Pinch | Zoom in/out (trackpad) |
|
|
52
|
-
| `Cmd+=` | `Ctrl+=` | Zoom in |
|
|
53
|
-
| `Cmd+-` | `Ctrl+-` | Zoom out |
|
|
54
|
-
| `Shift+1` | `Shift+1` | Fit view |
|
|
55
|
-
| `Shift+0` | `Shift+0` | Zoom to 100% |
|
|
56
|
-
|
|
57
|
-
## Panels
|
|
58
|
-
|
|
59
|
-
| Shortcut (Mac) | Shortcut (PC) | Action |
|
|
60
|
-
| --- | --- | --- |
|
|
61
|
-
| `Cmd+\` | `Ctrl+\` | Toggle both side panels |
|
|
62
|
-
| `?` | `?` | Toggle shortcuts |
|
|
63
|
-
|
|
64
|
-
---
|
|
65
|
-
|
|
66
|
-
[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · [Building Flows](/flow-builder/building-flows) · **Keyboard Shortcuts** · [Condition Builder](/flow-builder/condition-builder)
|