Skip to main content
Buttons define the interactive call-to-action elements within Steps. Each Step can have one or more Buttons that control what happens when a user clicks them — navigating the Tour, opening a URL, running JavaScript, triggering another Experience, and more.

​
Schema

PropertyTypeDescription
idIDThe Chameleon ID
created_attimestampWhen this happened or when this was added to the Database
updated_attimestampThe last time any property was updated
textstringThe call to action text for this button
positionstringThe placement of this button: One of bottom_left, bottom_center, bottom_right, center_right, or center_left
tour_actionstringWhat does this Tour do when clicked: One of next, previous, or exit
additional_actionsarray<string>What else does this Button do when clicked: One of cta, cta_url, any_click, code, element_click, hero_button, tour, survey, exit, tag_user, property, helpbar, automation, demo
action_urlstringWhen additional_actions includes cta_url this is the URL to load (action_new_window=true opens this URL in a new tab)
action_new_windowbooleanShould the action_url open in a new tab
action_scriptstringWhen additional_actions includes code this is the JavaScript code snippet to evaluate
action_elementobjectWhen additional_actions includes element_click this is the Element targeted for clicking
action_campaign_idIDWhen additional_actions includes tour or survey, the ID of the Tour or Microsurvey to link to

​
Button action types

ActionDescription
cta_urlNavigate the user to a URL. Set action_url and optionally action_new_window.
codeExecute a JavaScript snippet defined in action_script.
element_clickProgrammatically click an element on the page defined by action_element.
tourStart another Tour specified by action_campaign_id.
surveyStart a Microsurvey specified by action_campaign_id.
exitDismiss/close the current Experience.
tag_userApply a Tag to the current user.
propertySet a property on the current user’s profile.
helpbarOpen the HelpBar.
automationStart a Chameleon Automation.
demoStart a Chameleon Demo.
hero_buttonA primary hero-style button with emphasis styling.
any_clickTrigger on any click within the step (not just the button).

​
Example button JSON

{
  "id": "5f3c4232c712de665632a9b1",
  "created_at": "2029-04-07T12:18:00Z",
  "updated_at": "2029-04-07T12:18:00Z",
  "text": "Learn more",
  "position": "bottom_right",
  "tour_action": "next",
  "additional_actions": ["cta_url"],
  "action_url": "https://help.chameleon.io/getting-started",
  "action_new_window": true
}

​
Example button with JavaScript action

{
  "id": "5f3c4232c712de665632a9b2",
  "text": "Open settings",
  "position": "bottom_right",
  "tour_action": "exit",
  "additional_actions": ["code"],
  "action_script": "window.location.hash = '#/settings';"
}

​
Buttons in context

Buttons appear as an array within Step objects. They are not listed or retrieved independently. 
{
  "step": {
    "id": "5f3c4232c712de665632a8f1",
    "title": "Welcome!",
    "body": "Let's get you started with a quick tour.",
    "buttons": [
      {
        "id": "5f3c4232c712de665632a9b1",
        "text": "Show me",
        "position": "bottom_right",
        "tour_action": "next",
        "additional_actions": []
      },
      {
        "id": "5f3c4232c712de665632a9b2",
        "text": "Not now",
        "position": "bottom_left",
        "tour_action": "exit",
        "additional_actions": []
      }
    ]
  }
}
See also: