@picked/client 0.0.70-next.5 → 0.0.70

package/dist/docs/flow-builder/building-flows.md

@@ -2,60 +2,78 @@
 layout: docs
 ---
 
-# Building flows
+# Build flows
 
-Build flows by dragging blocks onto the canvas, connecting nodes with arrows, and configuring each node in the inspector.
+To build a flow, drag a block onto the canvas. Connect your nodes with arrows. Then
+set the options of each node in the inspector.
 
 ## Add nodes
 
-Drag a step, action, or condition from the entity browser onto the canvas. A new node appears where you drop it.
+Drag a step, an action, or a condition from the entity browser onto the canvas. A new
+node appears where you drop it.
 
-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.
+You can also drop a block directly onto an arrow that is there already. The flow
+builder puts the node into the line. The first arrow splits into two arrows, with the
+new node between them. A **+** indicator appears when you hold the pointer over a
+valid arrow.
 
 ## Connect nodes
 
-Click and drag from a node's output handle (right side) to another node's input handle (left side). An arrow appears connecting them.
+Click the output handle of a node, on the right side. Drag to the input handle of
+another node, on the left side. An arrow then joins the two nodes.
 
-The flow follows arrows from left to right, starting at the origin. Every node downstream of the origin is part of the experience flow.
+The flow follows the arrows from left to right, and it starts at the origin. Every
+node after the origin is part of the experience flow.
 
 ## Branch with conditions
 
-Connect the origin (or any node) to a condition node. The condition evaluates its logic and routes the flow down one of two paths.
+Connect the origin, or any other node, to a condition node. The condition evaluates
+its rule and sends the flow down one of two paths.
 
-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.
+Connect the green handle, for a true result, to the nodes that must run when the
+condition holds. Connect the red handle, for a false result, to the other path. Each
+path can lead to more steps, more actions, and more conditions.
 
 ## Assign fields to steps
 
-Drag a field from the entity browser and drop it onto a step node. The field is now assigned to that step.
+Drag a field from the entity browser onto a step node and drop it. That step then
+holds the field.
 
-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.
+You can assign more than one field to one step. The step node gives the number of
+assigned fields. To see which fields it holds, choose the step. Then read the
+**Assigned Fields** section in the inspector.
 
-## Select nodes
+## Choose nodes
 
-Click a node to select it. Its inspector opens in the right panel.
+Click a node to choose it. Its inspector opens in the right panel.
 
-Drag on empty canvas to marquee-select multiple nodes. Press `Cmd/Ctrl+A` to select all nodes.
+Drag on empty canvas to choose every node inside a rectangle. Press `Cmd/Ctrl+A` to
+choose every node.
 
-When multiple nodes are selected, the inspector shows a count and grouped list. Click any item in the list to navigate to its inspector.
+When you choose more than one node, the inspector gives a count and a list in groups.
+Click an item in that list to open its inspector.
 
 ## Move nodes
 
-Drag a selected node to reposition it. Nodes snap to the grid automatically.
+Drag a node to move it. Each node snaps to the grid.
 
-Use arrow keys to nudge selected nodes. Hold `Shift` for larger nudges.
+Use the arrow keys to move a node a small distance. Hold `Shift` to move it further.
 
 ## Delete nodes
 
-Select one or more nodes and press `Delete` or `Backspace`. The nodes and their connected arrows are removed.
+Choose one or more nodes. Press `Delete` or `Backspace`. The flow builder removes
+those nodes and every arrow that joins them.
 
 ## Duplicate nodes
 
-Select one or more nodes and press `Cmd/Ctrl+D`. Copies appear offset from the originals.
+Choose one or more nodes. Press `Cmd/Ctrl+D`. A copy of each node appears next to the
+first one.
 
 ## Undo and redo
 
-Press `Cmd/Ctrl+Z` to undo. Press `Cmd/Ctrl+Shift+Z` to redo. The undo stack tracks node additions, deletions, connections, and position changes.
+Press `Cmd/Ctrl+Z` to undo. Press `Cmd/Ctrl+Shift+Z` to redo. The undo stack records
+each node that you add, each node that you delete, each connection, and each move.
 
 ---
 
-[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · **Building Flows** · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · [Condition Builder](/flow-builder/condition-builder)
+[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · **Build Flows** · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · [Condition Builder](/flow-builder/condition-builder)

package/dist/docs/flow-builder/condition-builder.md

@@ -4,51 +4,62 @@ layout: docs
 
 # Condition builder
 
-The condition builder is a visual rule editor used across the dashboard. It lets you define logic without writing code.
+The condition builder is a visual rule editor, and the dashboard uses it in several
+places. With it you define a rule and you write no code.
 
 ## Where it appears
 
-The condition builder is used in several places:
+The dashboard uses the condition builder here:
 
-- **Condition nodes** — define branching logic in the [flow builder](/flow-builder/overview)
-- **Experience conditions** — control when an experience activates for a visitor
-- **Initialize open conditions** — control when an experience opens automatically on page load
-- **Field option conditions** — show or hide individual options based on visitor state
+- **Condition nodes** — they set which branch the flow takes in the
+  [flow builder](/flow-builder/overview).
+- **Experience conditions** — they control when an experience starts for a visitor.
+- **Initialize open conditions** — they control when an experience opens by itself as
+  the page loads.
+- **Field option conditions** — they show or hide one option, and the state of the
+  visitor decides which.
 
 ## Rule structure
 
-Rules are organized into groups. Each group uses either **AND** (all rules must match) or **OR** (any rule must match).
+The builder holds your rules in groups. Each group uses **AND** or **OR**. With
+**AND**, every rule must match. With **OR**, one rule must match.
 
 A single rule has three parts:
 
-1. **Field** — the data source to evaluate
-2. **Operator** — how to compare (equals, not equals, greater than, contains, etc.)
-3. **Value** — the target value to compare against
+1. **Field** — the data source to evaluate.
+2. **Operator** — how to compare. Examples are equals, not equals, greater than, and
+   contains.
+3. **Value** — the value to compare against.
 
-You can nest groups inside other groups to create complex logic. For example, an AND group containing two OR groups.
+You can put a group inside another group to build a larger rule. An example is an AND
+group that holds two OR groups.
 
-## Available data sources
+## Data sources
 
-When building rules, you can reference these data sources:
+A rule can point at these data sources:
 
-**Responses** — values visitors have submitted through form fields in the current experience. Each field you create in your project appears here by its name.
+**Responses** — the values that your visitors send through the form fields of the
+current experience. Each field that you create in your project appears here under its
+name.
 
-**Actions** — references to actions that have been triggered during the flow.
+**Actions** — the actions that ran during the flow.
 
-**Feature flags** — the state of feature flags in your project. Use this to branch on whether a visitor is allocated to a flag.
+**Feature flags** — the state of each feature flag in your project. Use it to take a
+branch on whether Picked allocates a visitor to a flag.
 
-**Location** — properties of the visitor's current page URL, including pathname, search parameters, hostname, and hash.
+**Location** — the parts of the current page URL of the visitor. These are the
+pathname, the search parameters, the hostname, and the hash.
 
 ## Example
 
-To show a step only to visitors on a specific page who opted into marketing:
+To show a step only to a visitor who is on one page and who accepted marketing:
 
 1. Create an AND group.
 2. Add a rule: **Location → pathname** equals `/pricing`.
-3. Add a rule: **Responses → marketing_opt_in** equals `true`.
+3. Add a rule: **Responses → `marketing_opt_in`** equals `true`.
 
-Both conditions must be true for the rule group to match.
+The rule group matches only when both conditions are true.
 
 ---
 
-[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · [Building Flows](/flow-builder/building-flows) · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · **Condition Builder**
+[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · [Build Flows](/flow-builder/building-flows) · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · **Condition Builder**

package/dist/docs/flow-builder/keyboard-shortcuts.md

@@ -4,15 +4,15 @@ layout: docs
 
 # Keyboard shortcuts
 
-These shortcuts are available when the flow builder canvas is focused.
+These shortcuts work when the canvas of the flow builder holds the keyboard input.
 
 ## Canvas tools
 
 | Shortcut (Mac) | Shortcut (PC) | Action |
 | --- | --- | --- |
-| `V` | `V` | Select tool |
-| `H` | `H` | Hand tool (pan) |
-| `Space` (hold) | `Space` (hold) | Temporary hand tool |
+| `V` | `V` | The choose tool |
+| `H` | `H` | The hand tool, which pans the view |
+| `Space`, held | `Space`, held | The hand tool, while you hold the key |
 
 ## Layout
 
@@ -20,19 +20,19 @@ These shortcuts are available when the flow builder canvas is focused.
 | --- | --- | --- |
 | `Shift+L` | `Shift+L` | Auto-layout |
 
-## Selection
+## Choice
 
 | Shortcut (Mac) | Shortcut (PC) | Action |
 | --- | --- | --- |
-| `Cmd+A` | `Ctrl+A` | Select all nodes |
-| `Escape` | `Escape` | Deselect all |
+| `Cmd+A` | `Ctrl+A` | Choose every node |
+| `Escape` | `Escape` | Choose no node |
 
-## Editing
+## Edits
 
 | Shortcut (Mac) | Shortcut (PC) | Action |
 | --- | --- | --- |
-| `Cmd+D` | `Ctrl+D` | Duplicate selected nodes |
-| `Delete` / `Backspace` | `Delete` / `Backspace` | Delete selected nodes |
+| `Cmd+D` | `Ctrl+D` | Make a copy of each chosen node |
+| `Delete` or `Backspace` | `Delete` or `Backspace` | Delete each chosen node |
 | `Cmd+Z` | `Ctrl+Z` | Undo |
 | `Cmd+Shift+Z` | `Ctrl+Shift+Z` | Redo |
 
@@ -40,27 +40,27 @@ These shortcuts are available when the flow builder canvas is focused.
 
 | Shortcut (Mac) | Shortcut (PC) | Action |
 | --- | --- | --- |
-| Arrow keys | Arrow keys | Nudge selected nodes |
-| `Shift`+Arrow keys | `Shift`+Arrow keys | Large nudge |
+| Arrow keys | Arrow keys | Move each chosen node a small distance |
+| `Shift` and an arrow key | `Shift` and an arrow key | Move each chosen node further |
 
 ## Zoom
 
 | Shortcut (Mac) | Shortcut (PC) | Action |
 | --- | --- | --- |
-| Scroll | Scroll | Zoom in/out |
-| Pinch | Pinch | Zoom in/out (trackpad) |
+| Scroll | Scroll | Zoom in or out |
+| Pinch | Pinch | Zoom in or out, on a trackpad |
 | `Cmd+=` | `Ctrl+=` | Zoom in |
 | `Cmd+-` | `Ctrl+-` | Zoom out |
-| `Shift+1` | `Shift+1` | Fit view |
+| `Shift+1` | `Shift+1` | Fit the flow to the view |
 | `Shift+0` | `Shift+0` | Zoom to 100% |
 
 ## Panels
 
 | Shortcut (Mac) | Shortcut (PC) | Action |
 | --- | --- | --- |
-| `Cmd+\` | `Ctrl+\` | Toggle both side panels |
-| `?` | `?` | Toggle shortcuts |
+| `Cmd+\` | `Ctrl+\` | Turn both side panels on or off |
+| `?` | `?` | Turn this shortcut list on or off |
 
 ---
 
-[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · [Building Flows](/flow-builder/building-flows) · **Keyboard Shortcuts** · [Condition Builder](/flow-builder/condition-builder)
+[Overview](/flow-builder/overview) · [Nodes](/flow-builder/nodes) · [Build Flows](/flow-builder/building-flows) · **Keyboard Shortcuts** · [Condition Builder](/flow-builder/condition-builder)

package/dist/docs/flow-builder/nodes.md

@@ -4,40 +4,53 @@ layout: docs
 
 # Nodes
 
-Nodes are the building blocks of a flow. Each node represents a block in your experience. There are four node types.
+A node is one part of a flow. Each node stands for a block in your experience. There
+are four node types.
 
 ## Origin
 
-Every flow starts with an origin node. It's a gray circle on the left side of the canvas. It has one output handle on its right side.
+Every flow starts with an origin node. It is a gray circle on the left side of the
+canvas, and it has one output handle on its right side.
 
-You can't move, delete, or duplicate the origin. It's always present.
+You cannot move the origin, delete it, or make a copy of it. It is always there.
 
 ## Step
 
-A step node represents a screen shown to visitors. It appears as a blue rectangle on the canvas.
+A step node stands for a screen that a visitor sees. It appears as a blue rectangle
+on the canvas.
 
-Steps hold fields. Drag a field from the entity browser onto a step node to assign it. The node subtitle shows how many fields are assigned.
+A step holds fields. Drag a field from the entity browser onto a step node to assign
+it. The subtitle of the node gives the number of assigned fields.
 
-Each step has a `layoutName` that tells the SDK which visual layout to use when rendering this step. Configure the layout name in the inspector.
+Each step has a `layoutName`. It tells the SDK which visual layout to use for this
+step. Set the layout name in the inspector.
 
 ## Action
 
-An action node represents a side effect — something that happens behind the scenes. It appears as a green rectangle.
+An action node stands for a side effect. A side effect happens where the visitor
+cannot see it. The node appears as a green rectangle.
 
-Actions trigger when the flow reaches them. Use actions for tasks like tracking events, sending data, or triggering integrations.
+An action runs when the flow reaches it. Use an action to record an event, to send
+data, or to start an integration.
 
 ## Condition
 
-A condition node represents a branching point. It appears as an amber rectangle.
+A condition node stands for a point where the flow splits. It appears as an amber
+rectangle.
 
-Condition nodes have two output handles instead of one. The green handle (top-right) connects to the path taken when the condition is true. The red handle (bottom-right) connects to the path taken when it's false.
+A condition node has two output handles, and not one. The green handle at the top
+right connects to the path for a true result. The red handle at the bottom right
+connects to the path for a false result.
 
-Define the condition logic in the inspector using the visual condition builder. See [Conditions](/conditions) for details.
+Define the rule in the inspector, with the visual condition builder. See
+[Conditions](/conditions) for more detail.
 
 ## Handles
 
-Handles are the connection points on nodes. Input handles sit on the left. Output handles sit on the right. Drag from an output handle to an input handle to connect two nodes.
+A handle is a connection point on a node. An input handle is on the left. An output
+handle is on the right. Drag from an output handle to an input handle to connect two
+nodes.
 
 ---
 
-[Overview](/flow-builder/overview) · **Nodes** · [Building Flows](/flow-builder/building-flows) · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · [Condition Builder](/flow-builder/condition-builder)
+[Overview](/flow-builder/overview) · **Nodes** · [Build Flows](/flow-builder/building-flows) · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · [Condition Builder](/flow-builder/condition-builder)

package/dist/docs/flow-builder/overview.mdx

@@ -6,7 +6,9 @@ import { Screenshot } from '../../../components/Screenshot'
 
 # Flow builder
 
-The flow builder is a visual editor for designing experience flows. You drag blocks onto a canvas, connect them with arrows, and configure each node in an inspector panel.
+The flow builder is a visual editor for an experience flow. You drag a block onto a
+canvas, connect the blocks with arrows, and set the options of each node in an
+inspector panel.
 
 <Screenshot
   route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/experiences/{experienceId}"
@@ -15,36 +17,47 @@ The flow builder is a visual editor for designing experience flows. You drag blo
 
 ## Layout
 
-The flow builder has three panels arranged left to right.
+The flow builder has three panels, from left to right.
 
-**Entity browser** (left): Lists all steps, actions, conditions, and fields in your project. Drag items from here onto the canvas.
+**Entity browser**, on the left: it lists every step, action, condition, and field in
+your project. Drag an item from here onto the canvas.
 
-**Canvas** (center): The workspace where you build your flow. Nodes represent blocks. Arrows represent connections between them.
+**Canvas**, in the middle: the area where you build your flow. A node stands for a
+block. An arrow stands for a connection between two blocks.
 
-**Inspector** (right): Shows configuration for the selected node. When nothing is selected, it shows experience-level settings.
+**Inspector**, on the right: it shows the options of the node that you choose. When
+you choose no node, it shows the settings of the experience.
 
 ## Panel controls
 
-Drag the dividers between panels to resize them. Press `Cmd/Ctrl+\` to toggle both side panels. Press `Cmd/Ctrl+Shift+\` to toggle just the inspector.
+Drag a divider between two panels to change their size. Press `Cmd/Ctrl+\` to turn
+both side panels on and off. Press `Cmd/Ctrl+Shift+\` to turn the inspector on and
+off.
 
-## Navigating the canvas
+## Move around the canvas
 
-**Zoom**: Scroll to zoom in and out.
+**Zoom**: scroll to make the view larger or smaller.
 
-**Pan**: Select the hand tool (press `H`) and drag. Or hold `Space` while dragging. Middle-click drag also pans.
+**Pan**: choose the hand tool with `H`, then drag. You can also hold `Space` and
+drag. A drag with the middle mouse button also pans.
 
-**Select tool**: Press `V` to switch back to the select tool. This is the default — click to select nodes, drag on empty space to marquee-select.
+**Choose tool**: press `V` to go back to the default tool.
+Click to choose a node. Drag on empty space to choose every node inside a rectangle.
 
 ## Auto-layout
 
-Click the auto-layout button in the toolbar to automatically arrange all nodes in a clean hierarchy. Useful after adding many nodes or when the canvas gets messy.
+Click the auto-layout button in the toolbar. The flow builder then arranges every
+node into a clean hierarchy. This is useful after you add many nodes, and when the
+canvas becomes messy.
 
-## Saving
+## Save your work
 
-Click **Save** in the toolbar to save your flow. The button is enabled when you have unsaved changes.
+Click **Save** in the toolbar to save your flow. The button is active when you have
+an unsaved change.
 
-The flow builder also auto-saves after a period of inactivity. A dot indicator appears on the save button when there are unsaved changes.
+The flow builder also saves by itself after a period of inactivity. A dot on the save
+button means that you have an unsaved change.
 
 ---
 
-**Flow Builder** · [Nodes](/flow-builder/nodes) · [Building Flows](/flow-builder/building-flows) · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · [Condition Builder](/flow-builder/condition-builder)
+**Flow Builder** · [Nodes](/flow-builder/nodes) · [Build Flows](/flow-builder/building-flows) · [Keyboard Shortcuts](/flow-builder/keyboard-shortcuts) · [Condition Builder](/flow-builder/condition-builder)

package/dist/docs/gtm-template.md

@@ -2,9 +2,10 @@
 layout: docs
 ---
 
-# Google Tag Manager template
+# Template for Google Tag Manager
 
-The Picked Ecommerce GTM Tag Template lets you track ecommerce events and send them to Picked directly from Google Tag Manager.
+The Picked Ecommerce template for Google Tag Manager lets you track an ecommerce
+event and send it to Picked.
 
 ## Automatic installation
 
@@ -13,57 +14,65 @@ Install the template from the GTM Community Gallery:
 1. In Tag Manager, click **Templates**.
 2. In the **Tag Templates** section, click **Search Gallery**.
 3. Search for `Picked Ecommerce`.
-4. Click the Picked Ecommerce template to view details.
-5. Click **Add to workspace**.
-6. Review the required permissions and click **Add**.
+4. Click the Picked Ecommerce template to read its detail.
+5. Click the **Add to workspace** button.
+6. Read the permissions that it needs.
+7. Click **Add**.
 
-![Picked Ecommerce template in the GTM Community Gallery](/gtm/picked-ecommerce-gtm.png)
+![The Picked Ecommerce template in the GTM Community Gallery](/gtm/picked-ecommerce-gtm.png)
 
 ## Manual installation
 
-If you prefer to import the template file directly:
+To import the template file yourself:
 
-1. Download the [template file](https://github.com/picked-app/gtm-template/blob/main/template.tpl) from GitHub (use the download icon).
+1. Download the
+   [template file](https://github.com/picked-app/gtm-template/blob/main/template.tpl)
+   from GitHub with the download icon.
 2. In Google Tag Manager, go to **Templates**.
 3. Click **New**.
-4. Open the three-dot menu and click **Import**.
-5. Select the downloaded template file.
-6. Click **Save**.
+4. Open the three-dot menu.
+5. Click **Import**.
+6. Choose the file that you downloaded.
+7. Click **Save**.
 
 ## Setup
 
 ### 1. Create a Tag ID variable
 
-Sign in to the [Picked Dashboard](https://dashboard.picked.app) and copy your project Tag ID. Save it as a constant variable in GTM (e.g. `Picked Tag ID`).
+Sign in to the [Picked Dashboard](https://dashboard.picked.app) and copy the Tag ID of
+your project. Save it as a constant variable in GTM, for example `Picked Tag ID`.
 
-![Creating a Picked Tag ID variable in GTM](/gtm/gtm-variable.png)
+![How to create a variable in GTM for the Picked Tag ID](/gtm/gtm-variable.png)
 
 ### 2. Create an ecommerce data variable
 
-Create a **Data Layer Variable** with the variable name set to `ecommerce`. This captures the GA4 Enhanced Ecommerce data layer.
+Create a **Data Layer Variable** with the variable name `ecommerce`. It captures what
+GA4 Enhanced Ecommerce writes to the data layer.
 
-![GA4 Enhanced Ecommerce data layer variable](/gtm/gtm-ecommerce-variable.png)
+![The variable for the data layer of GA4 Enhanced Ecommerce](/gtm/gtm-ecommerce-variable.png)
 
 ### 3. Create event triggers
 
-Add a trigger for each ecommerce event you want to track (e.g. `add_to_cart`, `purchase`, `view_item`).
+Add a trigger for each ecommerce event that you want to track, for example
+`add_to_cart`, `purchase`, or `view_item`.
 
-![Event triggers for ecommerce tracking](/gtm/gtm-triggers.png)
+![The event triggers that record an ecommerce event](/gtm/gtm-triggers.png)
 
 ### 4. Create tags
 
-Create a new tag for each event, selecting the **Picked Ecommerce** tag template. Assign the matching trigger and configure the options below.
+Create a new tag for each event. Choose the tag template called **Picked Ecommerce**. Assign
+the trigger that matches. Then set the options below.
 
-![Tags using the Picked Ecommerce template](/gtm/gtm-tags.png)
+![The tags that use the Picked Ecommerce template](/gtm/gtm-tags.png)
 
-## Configuration options
+## Options
 
 | Option | Description |
 | --- | --- |
-| **Tag ID** | Your Picked project Tag ID. Find it in the [Picked Dashboard](https://dashboard.picked.app). |
-| **Event** | The ecommerce event to track (e.g. `add_to_cart`, `purchase`). |
-| **Send ecommerce data** | Enable this to send GA4 Enhanced Ecommerce data to Picked. Should be enabled for all ecommerce events. |
-| **GA4 Enhanced Ecommerce Data** | The GTM variable containing GA4 ecommerce data. Use the data layer variable created in step 2. |
-| **Additional data** | Optional GTM variable for sending extra metadata with the event. |
+| **Tag ID** | The Tag ID of your Picked project. Find it in the [Picked Dashboard](https://dashboard.picked.app). |
+| **Event** | The ecommerce event to track, for example `add_to_cart` or `purchase`. |
+| **Send ecommerce data** | Turn this on to send the data from GA4 Enhanced Ecommerce to Picked. Turn it on for every ecommerce event. |
+| **GA4 Enhanced Ecommerce Data** | The GTM variable that holds the data from GA4 Enhanced Ecommerce. Use the data layer variable from step 2. |
+| **Additional data** | An optional GTM variable, for more metadata with the event. |
 
-![Picked Ecommerce tag configuration](/gtm/gtm-tag.png)
+![The options on a Picked Ecommerce tag](/gtm/gtm-tag.png)

package/dist/docs/guides/build-a-personalized-page.mdx

@@ -10,7 +10,10 @@ Build a personalized landing page with Picked: model it in the dashboard, publis
 
 ## What you will build
 
-A standalone, SEO-critical landing page whose content lives in Picked's CMS and renders on your server. You model the page's shape once, fill it with content, publish it, then fetch and render it in React or Svelte. The lifecycle from authoring to a hydrated page:
+A standalone landing page where the search rank matters. Its content lives in the
+Picked CMS, and your server renders it. You describe the shape of the page one time,
+fill it with content, and publish it. Your server then reads it and renders it in
+React or in Svelte. These are the stages, from the first draft to a hydrated page:
 
 ```
 Author (dashboard) -> Publish -> Delivery API (config + content)
@@ -21,11 +24,15 @@ Author (dashboard) -> Publish -> Delivery API (config + content)
 
 A [Page Layout](/content/layouts) defines the fields your page can hold.
 
-1. Open your workspace and click **Models** in the sidebar.
-2. Click **New Model** and choose **Page Layout**.
-3. Enter a name and a **Key**, for example `page-hero`. The Key is a unique, stable identifier you use in SDK code and API references.
-4. Add a few fields: a **Single-line text** field `title`, a **Markdown** field `body`, and an **Asset** field `image`.
-5. Save the layout.
+1. Open your workspace.
+2. Click **Models** in the sidebar.
+3. Click **New Model**.
+4. Choose **Page Layout**.
+5. Enter a name and a **Key**, for example `page-hero`. The Key is a unique, stable
+   identifier. Your SDK code and your API calls both use it.
+6. Add three fields: a **Single-line text** field `title`, a **Markdown** field
+   `body`, and an **Asset** field `image`.
+7. Save the layout.
 
 <Screenshot
   route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/models"
@@ -36,23 +43,29 @@ See [Page & Step Layouts](/content/layouts) for every field type.
 
 ## Create and fill the page
 
-1. Click **Experiences** in the sidebar, then **New Experience**.
-2. Choose the **Page** type and pick your `page-hero` layout.
-3. On the **Properties** tab, fill in `title`, `body`, and `image`. A [Content Entry](/content/content-entries) is created and linked on first save.
-4. Fix any per-field validation errors.
-5. Publish the workspace to make the page live.
+1. Click **Experiences** in the sidebar.
+2. Click **New Experience**.
+3. Choose the **Page** type.
+4. Choose your `page-hero` layout.
+5. On the **Properties** tab, fill in `title`, `body`, and `image`. On the first save,
+   Picked creates a [Content Entry](/content/content-entries) and links it to the
+   page.
+6. Correct every field error.
+7. Publish the workspace to make the page live.
 
 See [Pages](/content/pages) for the full editor reference.
 
 ## Fetch the config and content
 
-Your server fetches two things from the [Delivery API](/delivery-api): the project config (which experiences and steps exist) and the content for the matching experience.
+Your server reads two things from the [Delivery API](/delivery-api). The first is the
+options of the project, which give the experiences and the steps. The second is the
+content of the experience that matches.
 
 ```bash
-# 1. Project config: find the steps and their content links
+# 1. The project options: find the steps and their content links.
 curl https://api.picked.app/api/v1/projects/proj_123
 
-# 2. Experience content: the entry data backing the page
+# 2. The experience content: the entry data of the page.
 curl https://api.picked.app/api/v1/projects/proj_123/experiences/exp_123/content
 ```
 
@@ -63,7 +76,7 @@ In practice you fetch the config, then let `serialize()` fetch the content for y
 On the server, create a per-request client, call `serialize()` to produce a snapshot, render your app, and embed the snapshot. On the client, seed from the snapshot and hydrate.
 
 ```ts
-// server.ts
+// `server.ts`
 import { createClient } from '@picked/client'
 import { serialize } from '@picked/client/server'
 
@@ -137,7 +150,12 @@ The provider seeds synchronously, so the server HTML and the client's first pain
 
 Confirm the page is crawlable end to end:
 
-1. View the server response (for example with `curl` or your browser's view-source) and check the rendered HTML contains your `title` and `body`, not an empty shell.
-2. Confirm the content endpoint is reachable anonymously and returns your entry data.
+1. Read the response from your server. Use `curl`, or the view-source command of
+   your browser.
+2. Check that the HTML holds your `title` and your `body`, and that it is not an
+   empty shell.
+3. Check that the content endpoint answers an anonymous request.
+4. Check that it returns your entry data.
 
-Published Delivery API responses are crawlable; preview URLs are disallowed. See [Preview, Caching & Crawling](/delivery-api/preview-caching-crawling).
+A crawler can read a published Delivery API response. A preview URL is disallowed.
+See [Preview, cache, and crawlers](/delivery-api/preview-caching-crawling).