Elements

• Steps — to position tooltips relative to an element, trigger on element visibility, or listen for clicks/hovers.
• Tours — each step in a Tour can target one or more elements.
• Tooltips — always anchored to a specific element.
• Buttons — can trigger a click on a target element.

Elements are managed automatically by the Chameleon Builder when you visually select elements in your product. The API provides read access to inspect element configurations.

​

Schema

​

Example element JSON

{
  "id": "5f3c4232c712de665632a7e1",
  "created_at": "2029-04-07T12:18:00Z",
  "updated_at": "2029-04-07T12:18:00Z",
  "selector": "#onboarding-btn",
  "description": "Onboarding start button",
  "use": ["attr_id"],
  "path": "body > div.app > header > button#onboarding-btn",
  "tag": "button",
  "text": "Get Started",
  "attr_id": "onboarding-btn",
  "attr_class": "btn btn-primary",
  "attr_type": "button"
}

​

How element selection works

• selector only — When use includes selector, the raw CSS/JS selector is used directly. Best for stable, unique selectors like #my-button.
• Combined attributes — When use includes multiple attributes (e.g., ["tag", "text", "attr_class"]), Chameleon combines them to build a more resilient selector that can tolerate minor DOM changes.
• Shadow DOM — When your element is inside a Web Component’s shadow DOM, the shadow_selector provides the path within the shadow root.

​

Elements in context

{
  "step": {
    "id": "5f3c4232c712de665632a8f1",
    "step_trigger": "element_match",
    "position_type": "snap_to_element",
    "trigger_element": {
      "id": "5f3c4232c712de665632a7e1",
      "selector": "#onboarding-btn",
      "tag": "button",
      "text": "Get Started",
      "use": ["attr_id"]
    },
    "position_element": {
      "id": "5f3c4232c712de665632a7e2",
      "selector": ".dashboard-sidebar .nav-item:first-child",
      "tag": "li",
      "use": ["selector"]
    }
  }
}