@picked/client 0.0.70-next.5 → 0.0.70

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.
Files changed (78) hide show
  1. package/dist/{api-DQ1DqG_F.js → api-CPy9G49C.js} +1 -1
  2. package/dist/api-Ce6xYI--.cjs +1 -0
  3. package/dist/cjs/index.js +2 -2
  4. package/dist/cjs/plugins/dynamic-experiences/index.js +1 -1
  5. package/dist/cjs/server/index.js +1 -1
  6. package/dist/docs/actions.mdx +38 -18
  7. package/dist/docs/api/authentication.md +75 -48
  8. package/dist/docs/api/authorization-and-scopes.md +63 -47
  9. package/dist/docs/api/error-handling.md +70 -54
  10. package/dist/docs/api/index.md +41 -22
  11. package/dist/docs/api/pagination.md +30 -20
  12. package/dist/docs/api-keys.mdx +11 -6
  13. package/dist/docs/chrome-extension.md +22 -5
  14. package/dist/docs/conditions.mdx +32 -19
  15. package/dist/docs/content/asset-library.mdx +65 -34
  16. package/dist/docs/content/content-entries.mdx +8 -2
  17. package/dist/docs/content/layouts.mdx +45 -29
  18. package/dist/docs/content/pages.mdx +29 -14
  19. package/dist/docs/content/sections.mdx +19 -8
  20. package/dist/docs/delivery-api/experience-content.md +10 -5
  21. package/dist/docs/delivery-api/index.md +19 -12
  22. package/dist/docs/delivery-api/preview-caching-crawling.md +27 -14
  23. package/dist/docs/delivery-api/project-config.md +6 -4
  24. package/dist/docs/experiences.mdx +26 -10
  25. package/dist/docs/features.mdx +75 -20
  26. package/dist/docs/fields.mdx +42 -27
  27. package/dist/docs/flow-builder/building-flows.md +38 -20
  28. package/dist/docs/flow-builder/condition-builder.md +32 -21
  29. package/dist/docs/flow-builder/keyboard-shortcuts.md +18 -18
  30. package/dist/docs/flow-builder/nodes.md +26 -13
  31. package/dist/docs/flow-builder/overview.mdx +28 -15
  32. package/dist/docs/gtm-template.md +35 -26
  33. package/dist/docs/guides/build-a-personalized-page.mdx +36 -18
  34. package/dist/docs/image-optimisation-service.md +33 -17
  35. package/dist/docs/index.md +28 -17
  36. package/dist/docs/mcp.md +46 -38
  37. package/dist/docs/pickedql/data-sources.md +65 -43
  38. package/dist/docs/pickedql/dimensions.md +27 -12
  39. package/dist/docs/pickedql/examples.md +38 -26
  40. package/dist/docs/pickedql/filtering.md +10 -6
  41. package/dist/docs/pickedql/index.md +32 -14
  42. package/dist/docs/pickedql/schema.md +85 -76
  43. package/dist/docs/pickedql/virtual-functions.md +62 -36
  44. package/dist/docs/projects.mdx +14 -7
  45. package/dist/docs/reports.mdx +5 -3
  46. package/dist/docs/sdk/actions.md +33 -17
  47. package/dist/docs/sdk/conditions.md +8 -5
  48. package/dist/docs/sdk/content-security-policy.md +5 -4
  49. package/dist/docs/sdk/experiences.md +29 -11
  50. package/dist/docs/sdk/feature-allocation.md +79 -47
  51. package/dist/docs/sdk/features.md +130 -76
  52. package/dist/docs/sdk/fields.md +66 -42
  53. package/dist/docs/sdk/index.md +22 -13
  54. package/dist/docs/sdk/plugins/create-experience.md +18 -15
  55. package/dist/docs/sdk/plugins/dynamic-experiences.md +42 -16
  56. package/dist/docs/sdk/predicates.md +53 -37
  57. package/dist/docs/sdk/ssr/index.md +25 -8
  58. package/dist/docs/sdk/ssr/rendering-and-hydration.md +37 -16
  59. package/dist/docs/sdk/ssr/serialize.md +38 -20
  60. package/dist/docs/sdk/ssr/slots-and-placements.md +28 -10
  61. package/dist/docs/sdk/steps.md +100 -55
  62. package/dist/docs/steps.mdx +20 -11
  63. package/dist/docs/team-management.md +17 -11
  64. package/dist/docs/vite-plugin.md +26 -19
  65. package/dist/docs/workspace-versioning.mdx +14 -8
  66. package/dist/docs/workspaces.mdx +55 -24
  67. package/dist/esm/index.js +257 -238
  68. package/dist/esm/plugins/dynamic-experiences/index.js +2 -2
  69. package/dist/esm/server/index.js +1 -1
  70. package/dist/{plugin-EPx6sE_l.js → plugin-ChPkTj__.js} +58 -53
  71. package/dist/plugin-DHn11gn6.cjs +1 -0
  72. package/dist/types/entities/feature/feature.d.ts.map +1 -1
  73. package/dist/types/plugins/dynamic-experiences/hash.d.ts +40 -5
  74. package/dist/types/plugins/dynamic-experiences/hash.d.ts.map +1 -1
  75. package/dist/types/plugins/dynamic-experiences/plugin.d.ts.map +1 -1
  76. package/package.json +1 -1
  77. package/dist/api-B9koex39.cjs +0 -1
  78. package/dist/plugin-YbSSGrM7.cjs +0 -1
@@ -4,34 +4,41 @@ layout: docs
4
4
 
5
5
  # Virtual functions
6
6
 
7
- Virtual functions are shorthand for aggregate expressions. They are **table-aware** — the same function expands differently on `metrics` (pre-aggregated) vs `events` (user-level).
7
+ A virtual function is a short form of an aggregate expression. Each one is
8
+ **table-aware**. The same function expands one way on `metrics`, where PickedQL
9
+ aggregates the data first. It expands another way on `events`, where there is one row
10
+ for each user.
8
11
 
9
12
  ## A/B test metrics
10
13
 
11
14
  | Function | Description |
12
15
  |---|---|
13
- | `control_users([condition])` | Unique users in the Control group, optionally filtered by a custom condition |
14
- | `variant_users([condition])` | Unique users in the Variant group, optionally filtered by a custom condition |
15
- | `all_users()` | All unique users |
16
- | `control_sessions([condition])` | Unique sessions in the Control group, optionally filtered by a custom condition |
17
- | `variant_sessions([condition])` | Unique sessions in the Variant group, optionally filtered by a custom condition |
18
- | `all_sessions()` | All unique sessions |
16
+ | `control_users([condition])` | The different users in the Control group. A condition of your own can narrow them. |
17
+ | `variant_users([condition])` | The different users in the Variant group. A condition of your own can narrow them. |
18
+ | `all_users()` | Every different user |
19
+ | `control_sessions([condition])` | The different sessions in the Control group. A condition of your own can narrow them. |
20
+ | `variant_sessions([condition])` | The different sessions in the Variant group. A condition of your own can narrow them. |
21
+ | `all_sessions()` | Every different session |
19
22
 
20
- ### Custom filters on `events`
23
+ ### Your own filters on `events`
21
24
 
22
- On the `events` table, `control_*`/`variant_*` functions accept **one optional filter argument** to count only users/sessions matching the given expression, in addition to the implicit `variant_type` filter. The argument can be **positional** or **named** (`filter=`).
25
+ On the `events` table, each `control_*` function and each `variant_*` function takes
26
+ **one optional filter argument**. The filter counts only a user or a session that
27
+ matches your expression. It applies together with the `variant_type` filter that
28
+ PickedQL adds. Give the argument in the first place, or by the name `filter=`.
23
29
 
24
- The filter uses the same `column=value` syntax as conversion-rate conditions, with `AND`/`OR` operators and parentheses for grouping.
30
+ The filter uses the same `column=value` syntax as a conversion-rate condition. It
31
+ takes the `AND` and `OR` operators, and parentheses can hold a set of terms.
25
32
 
26
33
  ```sql
27
- -- Default: all Control users
34
+ -- The default: every Control user.
28
35
  SELECT control_users() FROM events
29
36
 
30
- -- Custom filter (positional)
37
+ -- Your own filter, in the first place.
31
38
  SELECT control_users('event_type=app_initialize') FROM events
32
39
  SELECT variant_users('event_type=app_initialize AND step_id=xxx') FROM events
33
40
 
34
- -- AND/OR + parentheses
41
+ -- The AND and OR operators, with parentheses.
35
42
  SELECT control_users('event_type=app_initialize OR event_type=app_load') FROM events
36
43
  SELECT control_users('event_type=form_submit AND (step_id=lead-capture OR step_id=xxx)') FROM events
37
44
 
@@ -44,7 +51,9 @@ SELECT control_users(filter='event_type=app_initialize AND step_id=xxx') FROM ev
44
51
  ```
45
52
 
46
53
  :::note
47
- Custom filters are **not supported on `metrics`** (pre-aggregated data). On `metrics`, these functions ignore any arguments and use the default Control/Variant filter only.
54
+ A filter of your own is **not supported on `metrics`**, because PickedQL aggregates
55
+ that data first. On `metrics` these functions ignore every argument. They use the
56
+ default Control filter and Variant filter only.
48
57
  :::
49
58
 
50
59
  ## Conversion metrics
@@ -62,15 +71,19 @@ Custom filters are **not supported on `metrics`** (pre-aggregated data). On `met
62
71
 
63
72
  | Function | Description |
64
73
  |---|---|
65
- | `control_conversion_rate([numerator [, denominator]])` | Conversion rate for Control. Defaults to purchase users / all users |
66
- | `variant_conversion_rate([numerator [, denominator]])` | Conversion rate for Variant. Same args as above |
67
- | `conversion_rate_uplift([numerator [, denominator]])` | Relative improvement: `(variant CR - control CR) / control CR`. Same args as above |
74
+ | `control_conversion_rate([numerator [, denominator]])` | The conversion rate of the Control group. By default it divides the users with a purchase by all users. |
75
+ | `variant_conversion_rate([numerator [, denominator]])` | The conversion rate of the Variant group. It takes the same arguments. |
76
+ | `conversion_rate_uplift([numerator [, denominator]])` | The gain of the Variant over the Control: `(variant CR - control CR) / control CR`. It takes the same arguments. |
68
77
 
69
- ### Custom conditions on `events`
78
+ ### Your own conditions on `events`
70
79
 
71
- On the `events` table, conversion rate functions accept up to **2 optional arguments** to customize the numerator and denominator. Each argument can be either a **condition expression string** or a **nested virtual function call** (see below). Arguments can be **positional** or **named** (`numerator=`, `denominator=`).
80
+ On the `events` table, each conversion-rate function takes up to **two optional
81
+ arguments**. They set the numerator and the denominator. Each argument is either a
82
+ **condition expression string** or a **nested virtual function call**. See below.
83
+ Give the arguments in order, or by the names `numerator=` and `denominator=`.
72
84
 
73
- Each condition expression uses `column=value` with `AND`/`OR` operators and parentheses for grouping.
85
+ Each condition expression uses `column=value`, with the `AND` and `OR` operators.
86
+ Parentheses can hold a set of terms.
74
87
 
75
88
  ```sql
76
89
  -- Default: purchase users / all users
@@ -79,11 +92,11 @@ SELECT control_conversion_rate() FROM events
79
92
  -- Custom numerator, default denominator (all users)
80
93
  SELECT control_conversion_rate('event_type=form_submit_success') FROM events
81
94
 
82
- -- AND/OR in conditions
95
+ -- The AND and OR operators in a condition.
83
96
  SELECT control_conversion_rate('event_type=checkout_complete OR event_type=order_create') FROM events
84
97
  SELECT control_conversion_rate('step_id=lead-capture AND event_type=form_submit_success') FROM events
85
98
 
86
- -- Parentheses for grouping
99
+ -- Parentheses hold a set of terms.
87
100
  SELECT control_conversion_rate('event_type=form_submit AND (step_id=lead-capture OR step_id=xxx)') FROM events
88
101
 
89
102
  -- Custom numerator AND denominator (positional)
@@ -95,18 +108,23 @@ SELECT control_conversion_rate(numerator='event_type=form_submit', denominator='
95
108
  -- Named: denominator only (numerator defaults to purchase)
96
109
  SELECT control_conversion_rate(denominator='step_id=lead-capture') FROM events
97
110
 
98
- -- Uplift with named args
111
+ -- The uplift, with the arguments given by name.
99
112
  SELECT conversion_rate_uplift(numerator='event_type=form_submit', denominator='step_id=lead-capture') FROM events
100
113
  ```
101
114
 
102
- #### Nested virtual functions as numerator / denominator
115
+ #### A nested virtual function as the numerator or the denominator
103
116
 
104
- Instead of a condition string, you can pass a **virtual function call** as the numerator or denominator. The inner aggregate is substituted in place — no implicit `variant_type` filter is added on top of it (the nested function controls its own filter).
117
+ You can pass a **virtual function call** as the numerator or the denominator, in
118
+ place of a condition string. PickedQL puts the inner aggregate there directly. It
119
+ adds no `variant_type` filter above it, because the nested function sets its own
120
+ filter.
105
121
 
106
- This is the most flexible form when the numerator and denominator have different segments (e.g., Control users who fired event X over **all** users regardless of variant):
122
+ This form is the most flexible one when the numerator and the denominator come from
123
+ different segments. An example is the Control users who fired one event, over **all**
124
+ users of every variant:
107
125
 
108
126
  ```sql
109
- -- (Control users who fired app_initialize) / (all users)
127
+ -- The Control users who fired `app_initialize`, over all users.
110
128
  SELECT control_conversion_rate(
111
129
  control_users('event_type=app_initialize'),
112
130
  all_users()
@@ -118,7 +136,7 @@ SELECT control_conversion_rate(
118
136
  all_users()
119
137
  ) FROM events
120
138
 
121
- -- Uplift with nested args
139
+ -- The uplift, with a nested function in each place.
122
140
  SELECT conversion_rate_uplift(
123
141
  control_users('event_type=app_initialize'),
124
142
  all_users()
@@ -126,7 +144,9 @@ SELECT conversion_rate_uplift(
126
144
  ```
127
145
 
128
146
  :::note
129
- Custom conditions and nested virtual function args are **not supported on `metrics`** (pre-aggregated data). On `metrics`, these functions always use the default purchase / all users definition.
147
+ A condition of your own, and a nested virtual function, are both **not supported on
148
+ `metrics`**, because PickedQL aggregates that data first. On `metrics` these
149
+ functions always divide the users with a purchase by all users.
130
150
  :::
131
151
 
132
152
  ## Visitor segmentation (`metrics` only)
@@ -141,7 +161,7 @@ Custom conditions and nested virtual function args are **not supported on `metri
141
161
  ## Funnel metrics (`events` only)
142
162
 
143
163
  :::note
144
- Funnel metrics are being continuously updated. Check back for new functions.
164
+ We add to the funnel metrics all the time. Read this page again for a new function.
145
165
  :::
146
166
 
147
167
  | Function | Description |
@@ -151,14 +171,18 @@ Funnel metrics are being continuously updated. Check back for new functions.
151
171
 
152
172
  ## Cohort filters (`events` only)
153
173
 
154
- Predicate-shaped functions that emit a `user_canonical_id IN (SELECT … FROM events …)` subquery. Use in `WHERE` to restrict any analysis to users who have at least one event matching a custom condition.
174
+ Each of these functions has the shape of a predicate. It writes a
175
+ `user_canonical_id IN (SELECT … FROM events …)` subquery. Put one in a `WHERE` clause
176
+ to limit any analysis to a user with at least one event that matches a condition of
177
+ your own.
155
178
 
156
179
  | Function | Description |
157
180
  |---|---|
158
- | `user_cohort_filter('<condition>')` | Restrict the query to users with ≥1 `events` row matching `<condition>` |
159
- | `user_cohort_filter(filter='<condition>')` | Same, named-arg form |
181
+ | `user_cohort_filter('<condition>')` | Limits the query to a user with one or more `events` rows that match `<condition>` |
182
+ | `user_cohort_filter(filter='<condition>')` | The same, with the argument given by name |
160
183
 
161
- `<condition>` uses the same `column=value [AND\|OR …]` shorthand as `control_users` / `variant_users`.
184
+ `<condition>` uses the same short `column=value [AND\|OR …]` form as `control_users`
185
+ and `variant_users`.
162
186
 
163
187
  ```sql
164
188
  -- Funnel scoped to users who eventually submitted lead capture
@@ -174,9 +198,11 @@ WHERE project_id = 'proj-abc'
174
198
  AND user_cohort_filter('event_type=signup OR event_type=trial_start')
175
199
  ```
176
200
 
177
- The outer query MUST filter by a single `project_id` — the function bakes that tenant into the inner subquery so the cohort scan is scoped to your project, not the whole warehouse.
201
+ The outer query MUST hold one `project_id` filter. The function puts that tenant into
202
+ the inner subquery. The read of the cohort therefore covers your project, and not the
203
+ whole warehouse.
178
204
 
179
- ## Feature functions (`features` / `events`)
205
+ ## Feature functions, on `features` and on `events`
180
206
 
181
207
  Parameterized functions that accept the feature name, bucket, and an optional feature key:
182
208
 
@@ -6,16 +6,17 @@ import { Screenshot } from '../../components/Screenshot'
6
6
 
7
7
  # Projects
8
8
 
9
- A project represents one website or app you want to instrument with Picked. Each project has its own set of experiences, entities, and configuration.
9
+ A project is one site or one application that you want to measure with Picked. Each
10
+ project has its own experiences, entities, and options.
10
11
 
11
12
  <Screenshot
12
13
  route="/{orgSlug}"
13
- alt="The organization home page on the Picked dashboard, listing the projects in an organization"
14
+ alt="The organization home page on the Picked dashboard, with the projects in an organization"
14
15
  />
15
16
 
16
17
  ## Create a project
17
18
 
18
- You need an organization first. If you don't have one, create it when you sign up.
19
+ You need an organization first. If you do not have one, create it when you sign up.
19
20
 
20
21
  1. Open your organization.
21
22
  2. Click **New Project**.
@@ -24,14 +25,20 @@ You need an organization first. If you don't have one, create it when you sign u
24
25
 
25
26
  ## Workspaces
26
27
 
27
- Each project contains one or more [Workspaces](/workspaces) for configuring and previewing experiences before publishing.
28
+ Each project holds one or more [Workspaces](/workspaces). In a workspace you set the
29
+ options for an experience and you see a preview of it before you make it live.
28
30
 
29
31
  ## Project home
30
32
 
31
- When you open a project, you land on the project home page. It shows your SDK installation snippet and a getting-started checklist.
33
+ When you open a project, you land on the project home page. It shows your SDK
34
+ snippet and a list of the setup tasks that are still open.
32
35
 
33
- Copy the snippet and add it to your site. This connects your site to the project and enables experience delivery. See [SDK Installation](/sdk) for setup details.
36
+ Copy the snippet and add it to your site. The snippet connects your site to the
37
+ project and lets Picked serve experiences to it. See
38
+ [SDK Installation](/sdk) for the setup detail.
34
39
 
35
40
  ## Project navigation
36
41
 
37
- The sidebar shows all sections available in your project: **Experiences**, **Fields**, **Steps**, **Actions**, **Conditions**, and more. Some sections appear only when enabled for your account.
42
+ The sidebar shows every section of your project: **Experiences**, **Fields**,
43
+ **Steps**, **Actions**, **Conditions**, and more. Some sections appear only when your
44
+ account has them.
@@ -6,13 +6,15 @@ import { Screenshot } from '../../components/Screenshot'
6
6
 
7
7
  # Reports
8
8
 
9
- Reports show analytics data for your project. Track how visitors interact with your experiences and feature flags.
9
+ A report shows analytics data for your project. Use a report to track how your
10
+ visitors use your experiences and feature flags.
10
11
 
11
12
  <Screenshot
12
13
  route="/{orgSlug}/{projectId}/reports"
13
14
  alt="The reports list for a project on the Picked dashboard"
14
15
  />
15
16
 
16
- ## View report data
17
+ ## See report data
17
18
 
18
- Open a report to see its analytics. Data updates as new visitor interactions are recorded.
19
+ Open a report to see its analytics. The data updates when Picked records a new
20
+ visitor interaction.
@@ -4,11 +4,13 @@ layout: docs
4
4
 
5
5
  # Actions
6
6
 
7
- Register action handlers on the Picked client so the SDK can invoke them when an experience flow reaches an action node.
7
+ Register an action handler on the Picked client. The SDK then invokes the handler
8
+ when an experience flow reaches an action node.
8
9
 
9
- ## Registering actions
10
+ ## Register an action
10
11
 
11
- Register actions when creating the Picked client. Each key in the `actions` object must match an action key defined in the dashboard:
12
+ Register your actions when you create the Picked client. Each key in the `actions`
13
+ object must match an action key from the dashboard:
12
14
 
13
15
  ```ts
14
16
  import { createClient } from '@picked/client'
@@ -26,41 +28,55 @@ const picked = createClient({
26
28
  })
27
29
  ```
28
30
 
29
- Each action is a function that receives optional parameters and usually runs a side effect. When the flow reaches an action node, the SDK calls the matching function and branches on whether it succeeds or throws (see [Success and failure branching](#success-and-failure-branching)).
31
+ Each action is a function. It takes optional parameters and it usually runs a side
32
+ effect. When the flow reaches an action node, the SDK calls the function that
33
+ matches. The SDK then takes a branch, which depends on whether the function succeeds
34
+ or throws. See [Success and failure branches](#success-and-failure-branches).
30
35
 
31
36
  ## How actions work
32
37
 
33
- 1. **Registration**: Actions are registered to the Picked client during initialization
34
- 2. **Flow traversal**: When the SDK traverses the experience flow and reaches an action node, it looks up the action by its key
35
- 3. **Execution**: The matching function is called and awaited. The SDK then continues to the next node based on the action's outcome
36
- 4. **Non-blocking**: Actions don't interrupt the visitor's experience. The current step stays on screen while an async action runs
38
+ 1. **Registration**: you register each action on the Picked client at startup.
39
+ 2. **Flow traversal**: the SDK walks the experience flow. When it reaches an action
40
+ node, it finds the action by its key.
41
+ 3. **Execution**: the SDK calls the function that matches and awaits it. The outcome
42
+ then decides which node comes next.
43
+ 4. **No block**: an action does not interrupt your visitor. The current step
44
+ stays on the screen while an async action runs.
37
45
 
38
- ## Success and failure branching
46
+ ## Success and failure branches
39
47
 
40
- An action node can have separate **success** and **failure** branches. The SDK selects the branch from the action's outcome:
48
+ An action node can have a **success** branch and a **failure** branch. The SDK
49
+ chooses the branch from the outcome of the action:
41
50
 
42
- - **Failure** — the action throws (or its promise rejects). The flow follows the failure (`onFail`) branch.
43
- - **Success** — the action resolves to any value (`void`, `true`, `false`, or a string). A resolved `false` is a valid response, not a failure. The flow follows the success (`onSuccess`) branch.
51
+ - **Failure** — the action throws, or its promise rejects. The flow takes the failure
52
+ branch, `onFail`.
53
+ - **Success** — the action resolves to any value: `void`, `true`, `false`, or a
54
+ string. A resolved `false` is a valid response and not a failure. The flow takes
55
+ the success branch, `onSuccess`.
44
56
 
45
- Reserve the failure branch for genuine errors — throw on the failure case, since a returned value never routes to `onFail`:
57
+ Keep the failure branch for a true error. Throw on the failure case, because a
58
+ returned value never takes the `onFail` branch:
46
59
 
47
60
  ```ts
48
61
  'check-eligibility': async () => {
49
62
  const response = await fetch('/api/eligibility')
50
- // Throw only when the request itself fails — that takes the failure branch.
63
+ // Throw only when the request itself fails. That takes the failure branch.
51
64
  if (!response.ok) throw new Error('Eligibility request failed')
52
65
  }
53
66
  ```
54
67
 
55
- A valid negative result is not a failure. An API that returns `200` with a "no" (for example `{ serviced: false }`) should record that value as a response and branch on it with a condition, rather than throw:
68
+ A valid negative result is not a failure. An API can return `200` with a "no", for
69
+ example `{ serviced: false }`. Record that value as a response and branch on it with
70
+ a condition. Do not throw:
56
71
 
57
72
  ```ts
58
73
  'check-serviced-area': async ({ client, responses }) => {
59
74
  const postcode = responses.find((r) => r.fieldKey === 'postcode')?.value
60
75
  const { serviced } = await fetch(`/api/serviced?postcode=${postcode}`).then((r) => r.json())
61
- // Commit the outcome as a response; a downstream condition routes the flow.
76
+ // Store the outcome as a response. A later condition then takes the branch.
62
77
  client.responses.register('is-serviced', serviced)
63
78
  }
64
79
  ```
65
80
 
66
- If an action node has only a single plain connection (no explicit success or failure branch), the flow continues through it on either outcome.
81
+ An action node can also have one plain connection, with no success or failure branch.
82
+ The flow then continues through it on either outcome.
@@ -4,11 +4,13 @@ layout: docs
4
4
 
5
5
  # Conditions
6
6
 
7
- Conditions use JSON Logic to evaluate client state. Use them to gate experience activation, branch step navigation, and control field visibility.
7
+ A condition uses JSON Logic to evaluate the client state. Use a condition to control
8
+ when an experience starts, to choose the next step, and to show or hide a field.
8
9
 
9
10
  ## Conditions in experiences
10
11
 
11
- A common pattern is using conditions between steps to branch the flow based on form responses:
12
+ A common pattern puts a condition between two steps. The flow then takes a branch
13
+ that the form responses decide:
12
14
 
13
15
  ```ts
14
16
  import { createExperience } from '@picked/client/plugins/create-experience'
@@ -47,12 +49,13 @@ isSigningUpForNewsletter.addFalse(userDoesNotWantNewsletter)
47
49
 
48
50
  ## Conditional fields
49
51
 
50
- Fields can be shown or hidden based on previous responses or [predicates](./predicates) using JSON Logic conditions:
52
+ A JSON Logic condition can show or hide a field. The condition can read an earlier
53
+ response or a [predicate](./predicates):
51
54
 
52
55
  ```ts
53
56
  import { createField } from '@picked/client/plugins/create-experience'
54
57
 
55
- // Show email field only if user selected "email" as a contact method
58
+ // Show the email field only when the user chose "email" as a contact method.
56
59
  export const emailField = createField({
57
60
  id: 'email-input',
58
61
  name: 'email-input',
@@ -70,7 +73,7 @@ export const emailField = createField({
70
73
  },
71
74
  })
72
75
 
73
- // Show field based on predicate
76
+ // Show the field when the predicate returns true.
74
77
  export const mailingAddressField = createField({
75
78
  id: 'mailing-address',
76
79
  name: 'mailing-address',
@@ -4,15 +4,16 @@ layout: docs
4
4
 
5
5
  # Content Security Policy
6
6
 
7
- The Picked SDK loads resources from the following domains. Add each to the matching CSP directive.
7
+ The Picked SDK loads resources from the domains below. Add each domain to the CSP
8
+ directive that the table gives.
8
9
 
9
10
  ## Required domains
10
11
 
11
12
  | Domain | Directive | Purpose |
12
13
  | --- | --- | --- |
13
- | `api.picked.app` | `connect-src` | API requests, project configuration, experiences, session tracking |
14
- | `evnts.pckd.dev` | `connect-src` | Analytics event collection (Snowplow) |
15
- | `img.picked-content.com` | `img-src` | Optimised images served via the [image optimisation service](../image-optimisation-service.md) |
14
+ | `api.picked.app` | `connect-src` | API requests, project options, experiences, and the record of each session |
15
+ | `evnts.pckd.dev` | `connect-src` | Analytics events, which Snowplow collects |
16
+ | `img.picked-content.com` | `img-src` | Optimised images, which the [image optimisation service](../image-optimisation-service.md) serves |
16
17
 
17
18
  ## Configuration
18
19
 
@@ -4,11 +4,18 @@ layout: docs
4
4
 
5
5
  # Experiences
6
6
 
7
- Define experiences in code with `createExperience()`, or load them from the dashboard at runtime with the [Dynamic Experiences Plugin](./plugins/dynamic-experiences).
7
+ Define an experience in code with `createExperience()`. You can also load an
8
+ experience from the dashboard at runtime with the
9
+ [Dynamic Experiences Plugin](./plugins/dynamic-experiences).
8
10
 
9
- The execution flow below targets a DOM selector and renders into it. A Page experience instead renders through a named slot: target it to `.picked-slot-<name>` and render `<ExperienceSlot name="<name>" />` on your server. Use the slot path for SEO-critical, server-rendered Pages; use the selector path for browser-rendered Flows. See [Server-Side Rendering](/sdk/ssr) and [Slots & Placements](/sdk/ssr/slots-and-placements).
11
+ The flow below points at a DOM selector and renders into it. A Page experience
12
+ renders through a named slot instead. Point it at `.picked-slot-<name>` and render
13
+ `<ExperienceSlot name="<name>" />` on your server. Use the slot path for a Page that
14
+ the server renders and that search engines must read. Use the selector path for a
15
+ Flow that the browser renders. See [Server-Side Rendering](/sdk/ssr) and
16
+ [Slots and Placements](/sdk/ssr/slots-and-placements).
10
17
 
11
- ## Creating experiences
18
+ ## Create an experience
12
19
 
13
20
  ```ts
14
21
  import { createExperience } from '@picked/client/plugins/create-experience'
@@ -32,15 +39,26 @@ export const productPageExperience = createExperience({
32
39
  })
33
40
  ```
34
41
 
35
- Register experiences using the [Create Experience Plugin](./plugins/create-experience) for code-defined experiences, or the [Dynamic Experiences Plugin](./plugins/dynamic-experiences) to fetch and manage them from the dashboard at runtime.
42
+ To register an experience that you define in code, use the
43
+ [Create Experience Plugin](./plugins/create-experience). To read an experience from
44
+ the dashboard at runtime and control it there, use the
45
+ [Dynamic Experiences Plugin](./plugins/dynamic-experiences).
36
46
 
37
47
  ## How experiences work
38
48
 
39
- When an experience is registered, the SDK follows this execution flow:
49
+ After you register an experience, the SDK follows this flow:
40
50
 
41
- 1. **Registration**: Experiences are registered to the Picked client using [createExperiencePlugin](./plugins/create-experience) for code-defined experiences, or [dynamicExperiencesPlugin](./plugins/dynamic-experiences) for dashboard-managed experiences
42
- 2. **Condition evaluation**: The SDK evaluates the experience's `condition` using the logic engine to determine if it should be shown
43
- 3. **Target resolution**: The SDK searches the DOM for elements matching the `targets` selectors (e.g., `body`, `.product-page`, `#checkout`)
44
- 4. **Initialization**: If the condition evaluates to `true` and at least one target element exists, the experience is initialized
45
- 5. **Component rendering**: The experience's component is rendered and injected into the DOM at the specified target location and placement (before, after, append, prepend, or replace)
46
- 6. **Flow execution**: If the experience contains steps, fields, and conditionals, users can progress through the multi-step flow with validation and branching logic
51
+ 1. **Registration**: You register the experience on the Picked client. Use
52
+ `createExperiencePlugin` for an experience that you define in code. Use
53
+ `dynamicExperiencesPlugin` for one that you control from the dashboard.
54
+ 2. **Condition evaluation**: The SDK evaluates the `condition` of the experience with
55
+ the logic engine. The result decides whether a visitor sees it.
56
+ 3. **Target resolution**: The SDK searches the DOM for an element that matches a
57
+ selector in `targets`. Examples are `body`, `.product-page`, and `#checkout`.
58
+ 4. **Initialization**: The SDK starts the experience when the condition is `true` and
59
+ at least one target element is there.
60
+ 5. **Component rendering**: The SDK renders the component of the experience. It puts
61
+ the component into the DOM at the target and the placement that you set. A
62
+ placement is `before`, `after`, `append`, `prepend`, or `replace`.
63
+ 6. **Flow execution**: An experience can hold steps, fields, and conditions. A user
64
+ then moves through the flow. The flow checks each answer and takes a branch.