Controls

A control target sets an existing dropdown or button group. Your application handles the change and updates the result.

<label for="team-size">Team size</label>
<select id="team-size">
  <option value="small">1–10 people</option>
  <option value="growing">11–50 people</option>
</select>

Use this target configuration:

{
  "id": "team-size",
  "selector": "#team-size",
  "description": "Choose a useful starting point for the existing calculator",
  "mode": "control",
  "control": { "kind": "select" },
  "defaultVariant": "original",
  "variants": [
    {
      "id": "original", "description": "Small team",
      "hypothesis": "Keep the general default", "audiences": [], "value": "small"
    },
    {
      "id": "growing-team", "description": "Growing team",
      "hypothesis": "Use this starting point when context supports a larger team",
      "audiences": [], "value": "growing"
    }
  ]
}

The adapter sets .value and fires a bubbling change event. It requires an enabled native, single-select element and option. Save through configuration as code.

Preserve the visitor’s choice

After the visitor changes a control, automatic personalization leaves it alone. If the application changes the value, Dynamite also relinquishes ownership. Restoration only reverses a change Dynamite still owns.

Button groups

{
  "kind": "buttons",
  "optionSelector": "button[data-plan]",
  "valueAttribute": "data-plan"
}

Target the group container. Options must be real buttons with aria-pressed, with exactly one initially pressed. The adapter clicks an enabled option; the site’s handler updates state and aria-pressed.

Use controls for useful defaults, such as a calculator’s team size. Keep consent, purchases, billing, and coordinated multi-field changes in the application.

Start here

Install & integrate

Build experiences

Work with agents

Measure & operate

Preserve the visitor’s choice

​Dropdown

​Preserve the visitor’s choice

Dropdown

Preserve the visitor’s choice