> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usedynamite.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Read /start/capabilities before choosing an integration. Use the deployed server’s tools/list for current tool inputs.

# Targets

> Choose the part of a page to personalize.

A target connects a CSS selector to a set of variants. Its selector must match exactly one element on each registered page.

Give the element a stable attribute:

```html theme={null}
<h1 data-personalize="hero-title">A better way to work.</h1>
```

Create a text target with selector `[data-personalize='hero-title']`, then add a variant in Dynamite or through [MCP](https://docs.usedynamite.com/agents/workflow.md).

## Target types

| Mode | What changes |
| - | - |
| `text` | The element’s text content |
| `component` | The element’s children, or a new block after it |
| `order` | The order of existing children |
| `control` | An existing dropdown or button-group value |

For an image, target its wrapper with a [component](https://docs.usedynamite.com/experiences/images.md).

## Keep the original

Dynamite captures the original content when it binds the target. The default variant restores that content. Keep the default available to all visitors.

Avoid overlapping parent and child targets. If a headline, image, and CTA must change together, put them in one [component target](https://docs.usedynamite.com/experiences/components.md).

> [accordion] Target configuration
>
> This fragment belongs in `draft.targets`. Add `hero-title` to the target list of each relevant page.
>
> ```json theme={null}
> {
>   "id": "hero-title",
>   "label": "Hero title",
>   "selector": "[data-personalize='hero-title']",
>   "description": "The primary product promise",
>   "mode": "text",
>   "defaultVariant": "original",
>   "variants": [
>     {
>       "id": "original",
>       "description": "Original heading",
>       "hypothesis": "General introduction when context is weak",
>       "audiences": [],
>       "value": "A better way to work."
>     }
>   ]
> }
> ```
>
> See [Configuration as code](https://docs.usedynamite.com/agents/config-as-code.md) for the complete request.

> [accordion] Selector and page matching
>
> Use exact page paths: `/products` and `/products/` are distinct. Query strings and fragments are not page registrations.
>
> Invalid, missing, or ambiguous selectors are skipped. `allowUnverified` lets an author save a selector that was absent from server HTML; it does not relax the browser’s matching rules. Check targets after hydration and on every bound page.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.