@picked/client 0.0.70-next.6 → 0.0.71-next.1
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-CH2FNa6S.cjs +1 -0
- package/dist/api-CgqRvuKL.js +38 -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/actions.mdx +38 -18
- package/dist/docs/api/authentication.md +75 -48
- package/dist/docs/api/authorization-and-scopes.md +63 -47
- package/dist/docs/api/error-handling.md +70 -54
- package/dist/docs/api/index.md +41 -22
- package/dist/docs/api/pagination.md +30 -20
- package/dist/docs/api-keys.mdx +11 -6
- package/dist/docs/chrome-extension.md +22 -5
- package/dist/docs/conditions.mdx +32 -19
- package/dist/docs/content/asset-library.mdx +65 -34
- package/dist/docs/content/content-entries.mdx +8 -2
- package/dist/docs/content/layouts.mdx +45 -29
- package/dist/docs/content/pages.mdx +29 -14
- package/dist/docs/content/sections.mdx +19 -8
- package/dist/docs/delivery-api/experience-content.md +10 -5
- package/dist/docs/delivery-api/index.md +19 -12
- package/dist/docs/delivery-api/preview-caching-crawling.md +27 -14
- package/dist/docs/delivery-api/project-config.md +6 -4
- package/dist/docs/experiences.mdx +26 -10
- package/dist/docs/features.mdx +66 -25
- package/dist/docs/fields.mdx +42 -27
- package/dist/docs/flow-builder/building-flows.md +38 -20
- package/dist/docs/flow-builder/condition-builder.md +32 -21
- package/dist/docs/flow-builder/keyboard-shortcuts.md +18 -18
- package/dist/docs/flow-builder/nodes.md +26 -13
- package/dist/docs/flow-builder/overview.mdx +28 -15
- package/dist/docs/gtm-template.md +35 -26
- package/dist/docs/guides/build-a-personalized-page.mdx +36 -18
- package/dist/docs/image-optimisation-service.md +33 -17
- package/dist/docs/index.md +28 -17
- package/dist/docs/mcp.md +46 -38
- package/dist/docs/pickedql/data-sources.md +65 -43
- package/dist/docs/pickedql/dimensions.md +27 -12
- package/dist/docs/pickedql/examples.md +38 -26
- package/dist/docs/pickedql/filtering.md +10 -6
- package/dist/docs/pickedql/index.md +32 -14
- package/dist/docs/pickedql/schema.md +85 -76
- package/dist/docs/pickedql/virtual-functions.md +62 -36
- package/dist/docs/projects.mdx +14 -7
- package/dist/docs/reports.mdx +5 -3
- package/dist/docs/sdk/actions.md +33 -17
- package/dist/docs/sdk/conditions.md +8 -5
- package/dist/docs/sdk/content-security-policy.md +5 -4
- package/dist/docs/sdk/experiences.md +29 -11
- package/dist/docs/sdk/feature-allocation.md +79 -47
- package/dist/docs/sdk/features.md +130 -76
- package/dist/docs/sdk/fields.md +66 -42
- package/dist/docs/sdk/index.md +22 -13
- package/dist/docs/sdk/plugins/create-experience.md +18 -15
- package/dist/docs/sdk/plugins/dynamic-experiences.md +42 -16
- package/dist/docs/sdk/predicates.md +53 -37
- package/dist/docs/sdk/ssr/index.md +25 -8
- package/dist/docs/sdk/ssr/rendering-and-hydration.md +37 -16
- package/dist/docs/sdk/ssr/serialize.md +38 -20
- package/dist/docs/sdk/ssr/slots-and-placements.md +28 -10
- package/dist/docs/sdk/steps.md +100 -55
- package/dist/docs/steps.mdx +20 -11
- package/dist/docs/team-management.md +17 -11
- package/dist/docs/vite-plugin.md +26 -19
- package/dist/docs/workspace-versioning.mdx +14 -8
- package/dist/docs/workspaces.mdx +55 -24
- 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 +50 -45
- package/dist/esm/plugins/dom-observer/index.js +1 -1
- package/dist/esm/plugins/dynamic-experiences/index.js +2 -2
- package/dist/esm/preview/index.js +1 -1
- package/dist/esm/server/index.js +12 -10
- package/dist/{experience-instance-DOJShRk5.js → experience-instance-DGk11d8a.js} +3 -3
- package/dist/experience-instance-Dej3P1sE.cjs +1 -0
- package/dist/{plugin-BxMR7fOV.js → plugin-D2UqFikQ.js} +2 -2
- package/dist/plugin-DCW-tnjO.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/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 +3 -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 +64 -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/plugin.d.ts +3 -3
- package/dist/types/plugins/dynamic-experiences/types.d.ts +8 -5
- 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 +2 -2
- 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/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-CoUkIxIr.cjs +0 -1
- package/dist/api-ahdSBQ3Y.js +0 -40
- package/dist/experience-instance-DurC3pE-.cjs +0 -1
- package/dist/plugin-CASdGtTX.cjs +0 -1
|
@@ -2,23 +2,30 @@
|
|
|
2
2
|
layout: docs
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
# Preview,
|
|
5
|
+
# Preview, cache, and crawlers
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Both Delivery API endpoints share this behaviour: the preview token, the cache, CORS,
|
|
8
|
+
and what a crawler can read.
|
|
8
9
|
|
|
9
10
|
## Preview tokens
|
|
10
11
|
|
|
11
|
-
Pass `?preview_token=<token>` to read unpublished content. Both endpoints
|
|
12
|
+
Pass `?preview_token=<token>` to read unpublished content. Both endpoints take it,
|
|
13
|
+
and both return `versionId: null` for a preview. An invalid token returns `401`.
|
|
12
14
|
|
|
13
15
|
```bash
|
|
14
16
|
curl "https://api.picked.app/api/v1/projects/proj_123?preview_token=<token>"
|
|
15
17
|
```
|
|
16
18
|
|
|
17
|
-
|
|
19
|
+
The [management API](/api) holds the preview token of a workspace in the
|
|
20
|
+
`previewToken` field. The preview action in the dashboard also makes one for you.
|
|
18
21
|
|
|
19
|
-
|
|
22
|
+
Use the same token for the project options request and for the experience content
|
|
23
|
+
request. Both then come from the same preview.
|
|
20
24
|
|
|
21
|
-
|
|
25
|
+
## Cache
|
|
26
|
+
|
|
27
|
+
The cache rules depend on the surface and on the client that makes the request. The
|
|
28
|
+
SDK sends a `Picked-Client: sdk` request header:
|
|
22
29
|
|
|
23
30
|
| Request | `Cache-Control` |
|
|
24
31
|
| --- | --- |
|
|
@@ -26,11 +33,14 @@ Caching depends on the surface and the requesting client. The SDK sends a `Picke
|
|
|
26
33
|
| Published, other clients | `private, no-store` |
|
|
27
34
|
| Preview | `no-store` |
|
|
28
35
|
|
|
29
|
-
|
|
36
|
+
A published response that a cache can hold also sends `Vary: Picked-Client`. A shared
|
|
37
|
+
cache therefore keys on the client header. It never gives a body that it cached for
|
|
38
|
+
the SDK to a request from another client.
|
|
30
39
|
|
|
31
40
|
## CORS
|
|
32
41
|
|
|
33
|
-
Both endpoints
|
|
42
|
+
Both endpoints can be read from another origin. An `OPTIONS` preflight returns `204`
|
|
43
|
+
with the CORS headers:
|
|
34
44
|
|
|
35
45
|
| Header | Value |
|
|
36
46
|
| --- | --- |
|
|
@@ -38,22 +48,25 @@ Both endpoints are cross-origin readable. An `OPTIONS` preflight returns `204` w
|
|
|
38
48
|
| `Access-Control-Allow-Methods` | `GET, OPTIONS` |
|
|
39
49
|
| `Access-Control-Allow-Headers` | `Content-Type, Picked-Client, Picked-Version, traceparent, tracestate` |
|
|
40
50
|
|
|
41
|
-
##
|
|
51
|
+
## Crawlers and search rank
|
|
42
52
|
|
|
43
|
-
|
|
53
|
+
A crawler can read both endpoints, so a search engine can read your published
|
|
54
|
+
content. A preview URL is disallowed, so a draft never reaches the index. These are
|
|
55
|
+
the `robots.txt` rules:
|
|
44
56
|
|
|
45
57
|
```
|
|
46
58
|
User-agent: *
|
|
47
59
|
|
|
48
|
-
#
|
|
60
|
+
# Let a crawler read the public project options and experience content.
|
|
49
61
|
Allow: /api/v1/projects
|
|
50
62
|
Allow: /api/v1/projects/*/experiences/*/content
|
|
51
63
|
|
|
52
|
-
# Keep preview
|
|
64
|
+
# Keep a preview response, which is a draft, away from a crawler.
|
|
53
65
|
Disallow: /api/v1/projects/*preview_token=
|
|
54
66
|
|
|
55
|
-
# Everything else
|
|
67
|
+
# Everything else stays disallowed: GraphQL, MCP, internal routes, and the ping.
|
|
56
68
|
Disallow: /
|
|
57
69
|
```
|
|
58
70
|
|
|
59
|
-
See [Project Config](/delivery-api/project-config) and
|
|
71
|
+
See [Project Config](/delivery-api/project-config) and
|
|
72
|
+
[Experience Content](/delivery-api/experience-content) for the endpoints.
|
|
@@ -15,7 +15,7 @@ GET /api/v1/projects/:projectId
|
|
|
15
15
|
| Parameter | In | Description |
|
|
16
16
|
| --- | --- | --- |
|
|
17
17
|
| `projectId` | path | The project to fetch config for. |
|
|
18
|
-
| `preview_token` | query | Optional.
|
|
18
|
+
| `preview_token` | query | Optional. With it, the endpoint returns the preview options, which are unpublished. |
|
|
19
19
|
|
|
20
20
|
## Response
|
|
21
21
|
|
|
@@ -25,11 +25,13 @@ The response carries the project's experiences and steps. Each step includes `la
|
|
|
25
25
|
| --- | --- | --- |
|
|
26
26
|
| `id` | `string` | The project id. |
|
|
27
27
|
| `versionId` | `string \| null` | The published version id, or `null` on preview. |
|
|
28
|
-
| `steps[].layoutContentId` | `string \| null` | The Content Entry
|
|
28
|
+
| `steps[].layoutContentId` | `string \| null` | The Content Entry of this step, or `null` when the step has no content. |
|
|
29
29
|
|
|
30
|
-
## Published
|
|
30
|
+
## Published content and preview content
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
For published content, `versionId` holds the ID of the published version. For preview
|
|
33
|
+
content, which you read with `?preview_token=...`, `versionId` is `null`, because
|
|
34
|
+
there is no published version. See [Preview, cache, and crawlers](/delivery-api/preview-caching-crawling).
|
|
33
35
|
|
|
34
36
|
## Example
|
|
35
37
|
|
|
@@ -6,9 +6,14 @@ import { Screenshot } from '../../components/Screenshot'
|
|
|
6
6
|
|
|
7
7
|
# Experiences
|
|
8
8
|
|
|
9
|
-
An experience is
|
|
9
|
+
An experience is personalized content that Picked serves to the visitors on your
|
|
10
|
+
site. Each experience points at a component that you register in your application.
|
|
10
11
|
|
|
11
|
-
|
|
12
|
+
An experience is either a **Flow** or a **Page**. A **Flow** is an interactive
|
|
13
|
+
experience of more than one step, and the browser renders it. This page covers the
|
|
14
|
+
flow. A **Page** is a standalone experience that the server renders from CMS content,
|
|
15
|
+
for a landing page where the search rank matters. See [Pages](/content/pages) for
|
|
16
|
+
that kind.
|
|
12
17
|
|
|
13
18
|
<Screenshot
|
|
14
19
|
route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/experiences"
|
|
@@ -20,23 +25,34 @@ Picked has two kinds of experience. A **Flow** is a multi-step, interactive expe
|
|
|
20
25
|
1. Open your project.
|
|
21
26
|
2. Click **Experiences** in the sidebar.
|
|
22
27
|
3. Click **New Experience**.
|
|
23
|
-
4. Enter a name and a component name. The component name must match a component
|
|
28
|
+
4. Enter a name and a component name. The component name must match a component that
|
|
29
|
+
you register in your application. See [SDK Experiences](/sdk/experiences) for how
|
|
30
|
+
to register a component.
|
|
24
31
|
5. Click **Create**.
|
|
25
32
|
|
|
26
|
-
The flow editor opens with an empty canvas. See
|
|
33
|
+
The flow editor opens with an empty canvas. See
|
|
34
|
+
[Build Flows](/flow-builder/building-flows) to add your first node.
|
|
27
35
|
|
|
28
36
|
## Experience settings
|
|
29
37
|
|
|
30
|
-
|
|
38
|
+
Choose no node on the canvas, or click the canvas background, to open the experience
|
|
39
|
+
inspector in the right panel.
|
|
31
40
|
|
|
32
|
-
**Name**: The
|
|
41
|
+
**Name**: The name that the dashboard shows. Your visitors do not see it.
|
|
33
42
|
|
|
34
|
-
**Component Name**: The identifier that
|
|
43
|
+
**Component Name**: The identifier that points this experience at a component in your
|
|
44
|
+
application.
|
|
35
45
|
|
|
36
|
-
**Condition**: An optional
|
|
46
|
+
**Condition**: An optional condition. When you set it, the experience starts only for
|
|
47
|
+
a visitor who matches the condition. See
|
|
48
|
+
[Condition Builder](/flow-builder/condition-builder) for how to write one. Keep it
|
|
49
|
+
blank to start the experience for every visitor.
|
|
37
50
|
|
|
38
|
-
**Initialize Open**: An optional condition that controls whether the experience opens
|
|
51
|
+
**Initialize Open**: An optional condition that controls whether the experience opens
|
|
52
|
+
by itself when the page loads. When it is blank, the experience loads but stays
|
|
53
|
+
closed until something opens it.
|
|
39
54
|
|
|
40
55
|
## Experience list
|
|
41
56
|
|
|
42
|
-
The experiences list shows
|
|
57
|
+
The experiences list shows every experience in the current project. Click an
|
|
58
|
+
experience to open it in the flow builder.
|
package/dist/docs/features.mdx
CHANGED
|
@@ -6,7 +6,8 @@ import { Screenshot } from '../../components/Screenshot'
|
|
|
6
6
|
|
|
7
7
|
# Feature flags
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
A feature flag lets you run an A/B test and roll a change out in stages. It controls
|
|
10
|
+
which visitors see a change to your site, and you deploy no code.
|
|
10
11
|
|
|
11
12
|
<Screenshot
|
|
12
13
|
route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/features"
|
|
@@ -23,66 +24,106 @@ Feature flags let you run A/B tests and roll changes out gradually. Control whic
|
|
|
23
24
|
|
|
24
25
|
## Keys
|
|
25
26
|
|
|
26
|
-
Each feature flag has a unique key.
|
|
27
|
+
Each feature flag has a unique key. Your application uses this key to check whether
|
|
28
|
+
Picked allocates a visitor to the feature flag. You set the key when you create the
|
|
29
|
+
feature flag, and you cannot change it later.
|
|
27
30
|
|
|
28
31
|
## Configure allocation
|
|
29
32
|
|
|
30
|
-
Set allocation from the feature flag
|
|
33
|
+
Set the allocation from the detail page of the feature flag:
|
|
31
34
|
|
|
32
35
|
| Control | What it does |
|
|
33
36
|
| --- | --- |
|
|
34
|
-
| **Enabled** | Whether
|
|
35
|
-
| **Weight** | The percentage of visitors
|
|
36
|
-
| **Description** | An internal note
|
|
37
|
+
| **Enabled** | Whether Picked allocates a visitor to the feature flag. A feature flag that is off allocates nobody, and it records nothing. See [Turn a feature flag off](#turn-a-feature-flag-off). |
|
|
38
|
+
| **Weight** | The percentage of visitors that Picked allocates to the feature flag, from 0 to 100. |
|
|
39
|
+
| **Description** | An internal note about what the feature flag tests. |
|
|
37
40
|
|
|
38
|
-
A feature flag has one weight
|
|
41
|
+
A feature flag has one weight. For each visitor it gives one of two outcomes:
|
|
42
|
+
allocated, or not allocated. A weight of 30 allocates 30% of your visitors. The other
|
|
43
|
+
70% stay unallocated. A weight of 0 allocates nobody. A weight of 100 allocates
|
|
44
|
+
everybody.
|
|
39
45
|
|
|
40
46
|
## How visitors are allocated
|
|
41
47
|
|
|
42
|
-
|
|
48
|
+
The allocation is deterministic. Picked gives each visitor a stable value for each
|
|
49
|
+
feature flag. It derives that value from the visitor ID and from the ID of the feature
|
|
50
|
+
flag. It then compares the value against the weight. When the value is below the
|
|
51
|
+
weight, Picked allocates the visitor.
|
|
43
52
|
|
|
44
|
-
The same visitor always gets the same result for
|
|
53
|
+
The same visitor always gets the same result for one feature flag, on every visit,
|
|
54
|
+
while the weight stays the same. The version is not part of that value. It controls
|
|
55
|
+
the cache only. See [Feature flag versions](#feature-flag-versions).
|
|
45
56
|
|
|
46
|
-
Each feature flag
|
|
57
|
+
Each feature flag gets its own value, so tests that run at the same time are
|
|
58
|
+
independent. Two feature flags, both at weight 50, split your visitors into four equal
|
|
59
|
+
parts: allocated to both, to one, to the other, or to neither. Three feature flags at
|
|
60
|
+
weight 50 give eight groups of 12.5%.
|
|
47
61
|
|
|
48
62
|
:::note
|
|
49
|
-
|
|
63
|
+
Inside one feature flag, a larger weight only adds visitors. Everybody at weight 30 is
|
|
64
|
+
still allocated at weight 50, so you can make a release wider and move nobody who is
|
|
65
|
+
in it already. A smaller weight removes visitors from the top of the range.
|
|
50
66
|
:::
|
|
51
67
|
|
|
52
|
-
##
|
|
68
|
+
## Turn a feature flag off
|
|
53
69
|
|
|
54
|
-
A
|
|
70
|
+
A feature flag that is off allocates nobody, and it records nothing. The difference
|
|
71
|
+
from a weight of 0 matters for your reports. The visitor is **not in the test at
|
|
72
|
+
all**, and the visitor is not in the control group.
|
|
55
73
|
|
|
56
|
-
|
|
74
|
+
The SDK does not evaluate a feature flag that is off. It stores no decision in the
|
|
75
|
+
browser of the visitor, and it reports no decision to your analytics. Such a feature
|
|
76
|
+
flag is absent from the feature list on every analytics event.
|
|
57
77
|
|
|
58
|
-
|
|
78
|
+
An experience whose condition points at a feature flag that is off behaves as though
|
|
79
|
+
the visitor is not in the test. The condition reads as not allocated, and Picked
|
|
80
|
+
records no assignment.
|
|
59
81
|
|
|
60
|
-
|
|
82
|
+
This state is temporary, and it discards no decision that Picked made already. A
|
|
83
|
+
visitor who was allocated before keeps that decision in the browser. When you turn the
|
|
84
|
+
feature flag on again, Picked continues from that decision and does not allocate the
|
|
85
|
+
visitor again.
|
|
61
86
|
|
|
62
87
|
:::note
|
|
63
|
-
Expect a step change in
|
|
88
|
+
Expect a step change in your reports when you turn a feature flag off: fewer feature
|
|
89
|
+
flags for each visitor, and fewer decision events. That is the feature flag that drops
|
|
90
|
+
out, and you lose no data.
|
|
64
91
|
:::
|
|
65
92
|
|
|
66
|
-
|
|
93
|
+
A feature flag that is off stays visible in the developer tools, and a
|
|
94
|
+
[URL override](/sdk/features#overrides-in-the-url) still turns one on for QA.
|
|
67
95
|
|
|
68
96
|
## Feature flag versions
|
|
69
97
|
|
|
70
|
-
Each feature flag has a version number,
|
|
98
|
+
Each feature flag has a version number, and it starts at 1. The SDK caches an
|
|
99
|
+
allocation decision in the browser of the visitor under a key, and the version is part
|
|
100
|
+
of that key. The version does nothing else, and it is not an input to the allocation
|
|
101
|
+
value. When you increment the version, the SDK discards those cached decisions. It
|
|
102
|
+
then evaluates every visitor again on the next page load.
|
|
71
103
|
|
|
72
104
|
### What happens when you increment the version
|
|
73
105
|
|
|
74
|
-
- **
|
|
75
|
-
|
|
76
|
-
- **
|
|
106
|
+
- **The SDK invalidates the cached decisions.** The cache key holds the version, so the
|
|
107
|
+
old entry no longer matches and the feature flag counts as undecided.
|
|
108
|
+
- **Picked evaluates each visitor against the current weight.** The allocation is
|
|
109
|
+
deterministic and the version is not one of its inputs, so the same visitor against
|
|
110
|
+
an unchanged weight gives the same result.
|
|
111
|
+
- **You cannot reverse this.** There is no way to decrement a version.
|
|
77
112
|
|
|
78
113
|
:::note
|
|
79
|
-
|
|
114
|
+
The new version does not move your visitors between groups. It clears the cached
|
|
115
|
+
decisions and runs the allocation again. With an unchanged weight, everybody lands
|
|
116
|
+
where they were before. Change the weight to move your visitors.
|
|
80
117
|
:::
|
|
81
118
|
|
|
82
119
|
### When to increment
|
|
83
120
|
|
|
84
|
-
Increment the version after
|
|
121
|
+
Increment the version after you change the weight. Do this when you want Picked to
|
|
122
|
+
evaluate an allocated visitor again against the new weight, and not to use the cached
|
|
123
|
+
decision.
|
|
85
124
|
|
|
86
125
|
### When not to increment
|
|
87
126
|
|
|
88
|
-
|
|
127
|
+
To apply a weight change only to a visitor that Picked does not allocate yet, change
|
|
128
|
+
the weight and leave the version as it is. An allocated visitor keeps the current
|
|
129
|
+
allocation.
|
package/dist/docs/fields.mdx
CHANGED
|
@@ -6,9 +6,12 @@ import { Screenshot } from '../../components/Screenshot'
|
|
|
6
6
|
|
|
7
7
|
# Fields
|
|
8
8
|
|
|
9
|
-
A field is a data input
|
|
9
|
+
A field is a data input that a visitor sees inside a step. A field collects
|
|
10
|
+
information such as a name, an email address, a preference, or a choice.
|
|
10
11
|
|
|
11
|
-
|
|
12
|
+
This page covers the experience field, which collects visitor input. An experience
|
|
13
|
+
field is not the same as a content field. A content field is part of the schema of a
|
|
14
|
+
CMS layout. See [Page and Step Layouts](/content/layouts) for those.
|
|
12
15
|
|
|
13
16
|
<Screenshot
|
|
14
17
|
route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/fields"
|
|
@@ -20,60 +23,72 @@ These are experience Fields, which collect visitor input. They are distinct from
|
|
|
20
23
|
1. Open your project.
|
|
21
24
|
2. Click **Fields** in the sidebar.
|
|
22
25
|
3. Click **New Field**.
|
|
23
|
-
4. Enter a name, key, and label.
|
|
24
|
-
5.
|
|
26
|
+
4. Enter a name, a key, and a label.
|
|
27
|
+
5. Choose a type.
|
|
25
28
|
6. Click **Create**.
|
|
26
29
|
|
|
27
30
|
## Field types
|
|
28
31
|
|
|
29
|
-
|
|
32
|
+
A field has one of many types. These are the common ones:
|
|
30
33
|
|
|
31
|
-
`TEXT`: A string input. Use for
|
|
34
|
+
`TEXT`: A string input. Use it for a name, an email address, or free text.
|
|
32
35
|
|
|
33
|
-
`NUMBER`: A numeric input. Use for
|
|
36
|
+
`NUMBER`: A numeric input. Use it for a quantity, a rating, or an age.
|
|
34
37
|
|
|
35
|
-
`BOOLEAN`: A true
|
|
38
|
+
`BOOLEAN`: A true or false toggle. Use it for a checkbox or for consent.
|
|
36
39
|
|
|
37
|
-
`OBJECT`: A structured data input. Use for
|
|
40
|
+
`OBJECT`: A structured data input. Use it for data that holds other data.
|
|
38
41
|
|
|
39
|
-
##
|
|
42
|
+
## Options
|
|
40
43
|
|
|
41
|
-
**Name**:
|
|
44
|
+
**Name**: The name that the dashboard shows. Your visitors do not see it.
|
|
42
45
|
|
|
43
|
-
**Key**:
|
|
46
|
+
**Key**: The identifier for your application. You set it once and you cannot change
|
|
47
|
+
it. Your visitors do not see it.
|
|
44
48
|
|
|
45
|
-
**Label**: The label
|
|
49
|
+
**Label**: The label that a visitor sees next to the field.
|
|
46
50
|
|
|
47
|
-
**Placeholder**:
|
|
51
|
+
**Placeholder**: The hint text that the input shows while it is empty.
|
|
48
52
|
|
|
49
|
-
**Description**: A longer description of the field
|
|
53
|
+
**Description**: A longer description of what the field is for. The dashboard shows
|
|
54
|
+
it. Your visitors do not see it.
|
|
50
55
|
|
|
51
|
-
**Help Text**:
|
|
56
|
+
**Help Text**: Text below the field that helps your visitors.
|
|
52
57
|
|
|
53
|
-
**Default Value**: The
|
|
58
|
+
**Default Value**: The value that the field holds when it loads.
|
|
54
59
|
|
|
55
60
|
## Validation
|
|
56
61
|
|
|
57
|
-
**Required**: When
|
|
62
|
+
**Required**: When this is on, a visitor must fill in the field before the flow can
|
|
63
|
+
continue.
|
|
58
64
|
|
|
59
|
-
**Validation rules**:
|
|
65
|
+
**Validation rules**: Conditions for a constraint such as a smallest value, a largest
|
|
66
|
+
value, or a pattern. See [Condition Builder](/flow-builder/condition-builder) for how
|
|
67
|
+
to build a validation rule.
|
|
60
68
|
|
|
61
|
-
##
|
|
69
|
+
## More than one value
|
|
62
70
|
|
|
63
|
-
|
|
71
|
+
Turn on **Multiple** to let a visitor send more than one value for the field. This is
|
|
72
|
+
useful for an input that takes several choices, or for a field of tags.
|
|
64
73
|
|
|
65
|
-
##
|
|
74
|
+
## Choices
|
|
66
75
|
|
|
67
|
-
For
|
|
76
|
+
For a field with a fixed set of choices, such as a dropdown or a set of radio
|
|
77
|
+
buttons, add options. Each option has a value, and the response carries that value.
|
|
68
78
|
|
|
69
|
-
Each option can also
|
|
79
|
+
Each option can also carry a condition. When you set one, the option appears only to
|
|
80
|
+
a visitor who matches the condition. See
|
|
81
|
+
[Condition Builder](/flow-builder/condition-builder) for more detail.
|
|
70
82
|
|
|
71
83
|
## Privacy
|
|
72
84
|
|
|
73
|
-
**Do Not Track**: When
|
|
85
|
+
**Do Not Track**: When this is on, Picked keeps the data of this field out of your
|
|
86
|
+
analytics.
|
|
74
87
|
|
|
75
|
-
**Do Not Store**: When
|
|
88
|
+
**Do Not Store**: When this is on, Picked reads the data of this field but does not
|
|
89
|
+
keep it. Use it for sensitive information such as a password or payment detail.
|
|
76
90
|
|
|
77
91
|
## Reuse fields
|
|
78
92
|
|
|
79
|
-
|
|
93
|
+
A field is a project-level entity. Assign the same field to steps in more than one
|
|
94
|
+
experience. A change to the options of a field applies at every place that uses it.
|
|
@@ -2,60 +2,78 @@
|
|
|
2
2
|
layout: docs
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
#
|
|
5
|
+
# Build flows
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
To build a flow, drag a block onto the canvas. Connect your nodes with arrows. Then
|
|
8
|
+
set the options of each node in the inspector.
|
|
8
9
|
|
|
9
10
|
## Add nodes
|
|
10
11
|
|
|
11
|
-
Drag a step, action, or condition from the entity browser onto the canvas. A new
|
|
12
|
+
Drag a step, an action, or a condition from the entity browser onto the canvas. A new
|
|
13
|
+
node appears where you drop it.
|
|
12
14
|
|
|
13
|
-
You can also drop a block directly onto an
|
|
15
|
+
You can also drop a block directly onto an arrow that is there already. The flow
|
|
16
|
+
builder puts the node into the line. The first arrow splits into two arrows, with the
|
|
17
|
+
new node between them. A **+** indicator appears when you hold the pointer over a
|
|
18
|
+
valid arrow.
|
|
14
19
|
|
|
15
20
|
## Connect nodes
|
|
16
21
|
|
|
17
|
-
Click
|
|
22
|
+
Click the output handle of a node, on the right side. Drag to the input handle of
|
|
23
|
+
another node, on the left side. An arrow then joins the two nodes.
|
|
18
24
|
|
|
19
|
-
The flow follows arrows from left to right,
|
|
25
|
+
The flow follows the arrows from left to right, and it starts at the origin. Every
|
|
26
|
+
node after the origin is part of the experience flow.
|
|
20
27
|
|
|
21
28
|
## Branch with conditions
|
|
22
29
|
|
|
23
|
-
Connect the origin
|
|
30
|
+
Connect the origin, or any other node, to a condition node. The condition evaluates
|
|
31
|
+
its rule and sends the flow down one of two paths.
|
|
24
32
|
|
|
25
|
-
Connect the green
|
|
33
|
+
Connect the green handle, for a true result, to the nodes that must run when the
|
|
34
|
+
condition holds. Connect the red handle, for a false result, to the other path. Each
|
|
35
|
+
path can lead to more steps, more actions, and more conditions.
|
|
26
36
|
|
|
27
37
|
## Assign fields to steps
|
|
28
38
|
|
|
29
|
-
Drag a field from the entity browser
|
|
39
|
+
Drag a field from the entity browser onto a step node and drop it. That step then
|
|
40
|
+
holds the field.
|
|
30
41
|
|
|
31
|
-
You can assign
|
|
42
|
+
You can assign more than one field to one step. The step node gives the number of
|
|
43
|
+
assigned fields. To see which fields it holds, choose the step. Then read the
|
|
44
|
+
**Assigned Fields** section in the inspector.
|
|
32
45
|
|
|
33
|
-
##
|
|
46
|
+
## Choose nodes
|
|
34
47
|
|
|
35
|
-
Click a node to
|
|
48
|
+
Click a node to choose it. Its inspector opens in the right panel.
|
|
36
49
|
|
|
37
|
-
Drag on empty canvas to
|
|
50
|
+
Drag on empty canvas to choose every node inside a rectangle. Press `Cmd/Ctrl+A` to
|
|
51
|
+
choose every node.
|
|
38
52
|
|
|
39
|
-
When
|
|
53
|
+
When you choose more than one node, the inspector gives a count and a list in groups.
|
|
54
|
+
Click an item in that list to open its inspector.
|
|
40
55
|
|
|
41
56
|
## Move nodes
|
|
42
57
|
|
|
43
|
-
Drag a
|
|
58
|
+
Drag a node to move it. Each node snaps to the grid.
|
|
44
59
|
|
|
45
|
-
Use arrow keys to
|
|
60
|
+
Use the arrow keys to move a node a small distance. Hold `Shift` to move it further.
|
|
46
61
|
|
|
47
62
|
## Delete nodes
|
|
48
63
|
|
|
49
|
-
|
|
64
|
+
Choose one or more nodes. Press `Delete` or `Backspace`. The flow builder removes
|
|
65
|
+
those nodes and every arrow that joins them.
|
|
50
66
|
|
|
51
67
|
## Duplicate nodes
|
|
52
68
|
|
|
53
|
-
|
|
69
|
+
Choose one or more nodes. Press `Cmd/Ctrl+D`. A copy of each node appears next to the
|
|
70
|
+
first one.
|
|
54
71
|
|
|
55
72
|
## Undo and redo
|
|
56
73
|
|
|
57
|
-
Press `Cmd/Ctrl+Z` to undo. Press `Cmd/Ctrl+Shift+Z` to redo. The undo stack
|
|
74
|
+
Press `Cmd/Ctrl+Z` to undo. Press `Cmd/Ctrl+Shift+Z` to redo. The undo stack records
|
|
75
|
+
each node that you add, each node that you delete, each connection, and each move.
|
|
58
76
|
|
|
59
77
|
---
|
|
60
78
|
|
|
61
|
-
[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · **
|
|
79
|
+
[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · **Build Flows** · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · [Condition Builder](/flow-builder/condition-builder)
|
|
@@ -4,51 +4,62 @@ layout: docs
|
|
|
4
4
|
|
|
5
5
|
# Condition builder
|
|
6
6
|
|
|
7
|
-
The condition builder is a visual rule editor
|
|
7
|
+
The condition builder is a visual rule editor, and the dashboard uses it in several
|
|
8
|
+
places. With it you define a rule and you write no code.
|
|
8
9
|
|
|
9
10
|
## Where it appears
|
|
10
11
|
|
|
11
|
-
The
|
|
12
|
+
The dashboard uses the condition builder here:
|
|
12
13
|
|
|
13
|
-
- **Condition nodes** —
|
|
14
|
-
-
|
|
15
|
-
- **
|
|
16
|
-
- **
|
|
14
|
+
- **Condition nodes** — they set which branch the flow takes in the
|
|
15
|
+
[flow builder](/flow-builder/overview).
|
|
16
|
+
- **Experience conditions** — they control when an experience starts for a visitor.
|
|
17
|
+
- **Initialize open conditions** — they control when an experience opens by itself as
|
|
18
|
+
the page loads.
|
|
19
|
+
- **Field option conditions** — they show or hide one option, and the state of the
|
|
20
|
+
visitor decides which.
|
|
17
21
|
|
|
18
22
|
## Rule structure
|
|
19
23
|
|
|
20
|
-
|
|
24
|
+
The builder holds your rules in groups. Each group uses **AND** or **OR**. With
|
|
25
|
+
**AND**, every rule must match. With **OR**, one rule must match.
|
|
21
26
|
|
|
22
27
|
A single rule has three parts:
|
|
23
28
|
|
|
24
|
-
1. **Field** — the data source to evaluate
|
|
25
|
-
2. **Operator** — how to compare
|
|
26
|
-
|
|
29
|
+
1. **Field** — the data source to evaluate.
|
|
30
|
+
2. **Operator** — how to compare. Examples are equals, not equals, greater than, and
|
|
31
|
+
contains.
|
|
32
|
+
3. **Value** — the value to compare against.
|
|
27
33
|
|
|
28
|
-
You can
|
|
34
|
+
You can put a group inside another group to build a larger rule. An example is an AND
|
|
35
|
+
group that holds two OR groups.
|
|
29
36
|
|
|
30
|
-
##
|
|
37
|
+
## Data sources
|
|
31
38
|
|
|
32
|
-
|
|
39
|
+
A rule can point at these data sources:
|
|
33
40
|
|
|
34
|
-
**Responses** — values visitors
|
|
41
|
+
**Responses** — the values that your visitors send through the form fields of the
|
|
42
|
+
current experience. Each field that you create in your project appears here under its
|
|
43
|
+
name.
|
|
35
44
|
|
|
36
|
-
**Actions** —
|
|
45
|
+
**Actions** — the actions that ran during the flow.
|
|
37
46
|
|
|
38
|
-
**Feature flags** — the state of feature
|
|
47
|
+
**Feature flags** — the state of each feature flag in your project. Use it to take a
|
|
48
|
+
branch on whether Picked allocates a visitor to a flag.
|
|
39
49
|
|
|
40
|
-
**Location** —
|
|
50
|
+
**Location** — the parts of the current page URL of the visitor. These are the
|
|
51
|
+
pathname, the search parameters, the hostname, and the hash.
|
|
41
52
|
|
|
42
53
|
## Example
|
|
43
54
|
|
|
44
|
-
To show a step only to
|
|
55
|
+
To show a step only to a visitor who is on one page and who accepted marketing:
|
|
45
56
|
|
|
46
57
|
1. Create an AND group.
|
|
47
58
|
2. Add a rule: **Location → pathname** equals `/pricing`.
|
|
48
|
-
3. Add a rule: **Responses → marketing_opt_in
|
|
59
|
+
3. Add a rule: **Responses → `marketing_opt_in`** equals `true`.
|
|
49
60
|
|
|
50
|
-
|
|
61
|
+
The rule group matches only when both conditions are true.
|
|
51
62
|
|
|
52
63
|
---
|
|
53
64
|
|
|
54
|
-
[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · [
|
|
65
|
+
[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · [Build Flows](/flow-builder/building-flows) · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · **Condition Builder**
|