HelpBar

{
  "searches": [
    {
      "id": "6adae460426f060a00000000",
      "placeholder": "Search for help...",
      "key_meta": true,
      "key_uid": "k",
      ...
    }
  ]
}

{
  "placeholder": "Search for help...",
  "key_meta": true,
  "key_uid": "k",
  "title_recent": "Recently clicked",
  "title_pinned": "Pinned"
}

{
  "search_groups": [
    {
      "title": "Help center",
      "url": "https://help.your-product.com",
      "integration": "bing",
      "icon": {
        "kind": "uid",
        "uid": "book_open"
      }
    },
    {
      "title": "Best practices",
      "url": "https://blog.your-product.com",
      "integration": "bing",
      "icon": {
        "kind": "uid",
        "uid": "film"
      }
    }
  ]
}

{
  "label_themes": [
    {
      "style": "filled",
      "style_color_text": "FFF",
      "style_color_background": "FF6666"
    },
    {
      "style": "filled",
      "style_color_text": "FFF",
      "style_color_background": "66FF66"
    }
  ]
}

{
  "published_at": "2029-04-07T12:18:00Z"
}

{
  "search": {
    "id": "5f3c4232c712de665632a6d9",
    "placeholder": "Search for help...",
    "key_meta": true,
    "key_uid": "k",
    "title_pinned": "Recommended",
    "title_recent": "Recent",
    "published_at": "2029-04-07T12:18:00Z",
    "label_themes": [
      {
        "id": "6f3c4232c712de632a6d9656",
        "style": "filled",
        "style_color_text": "FFF",
        "style_color_background": "FF6666"
      },
      {
        "id": "62c73c423f12de632a6d96fa",
        "style": "filled",
        "style_color_text": "FFF",
        "style_color_background": "66FF66"
      }
    ]
  }
}

{
  "search_items": [
    {
      "id": "5f3c4232c712de665632a5f1",
      "title": "Data onboarding",
      "description": "The first step in making the switch is to import your first round of data.",
      ...
    },
    ... 48 more
    {
      "id": "5f3c4232c712de665632a5a2",
      "title": "Invite your team",
      "description": "Enable the rest of your team to collaborate, close items in your boards and see your workflows.",
      ...
    }
  ],
  "cursor": {
    "limit": 50,
    "before": "5f3c4232c712de665632a5f2"
  }
}

or

```http title="PATCH"
https://api.chameleon.io/v3/edit/search_items/:id

{
  "uid": "data-onboarding",
  "title": "Data onboarding",
  "description": "The first step in making the switch is to import your first round of data.",
  "company_uids": ["14203"],
  "actions": [
    {
      "kind": "navigate",
      "url": "/data/import"
    }
  ]
}

{
  "uid": "data-onboarding-book-demo",
  "title": "Data onboarding - see it in action",
  "description": "Book a demo with us to see the immediate value we can provide.",
  "actions": [
    {
      "kind": "calendly",
      "calendly_url": "https://calendly.com/your-company/sales-team-data-demo"
    }
  ]
}

{
  "uid": "data-onboarding-admins-book-demo",
  "title": "Data onboarding - see it in action",
  "description": "Book a demo with us to see the immediate value we can provide.",
  "segment_ids": ["5f3c4232c712de665632a6d9"],
  "actions": [
    {
      "kind": "calendly",
      "calendly_url": "https://calendly.com/your-company/sales-team-data-demo"
    }
  ]
}

{
  "uid": "data-example-multi-company-book-demo",
  "title": "Data onboarding - see it in action",
  "description": "Book a demo with us to see the immediate value we can provide.",
  "company_uids": ["44621", "93821", "1265"],
  "actions": [
    {
      "kind": "calendly",
      "calendly_url": "https://calendly.com/your-company/sales-team-data-demo"
    }
  ]
}

{
  "uid": "data-onboarding-admins-book-demo",
  "title": "Data onboarding - see it in action",
  "description": "Book a demo with us to see the immediate value we can provide.",
  "company_uids": ["93821"],
  "actions": [
    {
      "kind": "calendly",
      "calendly_url": "https://calendly.com/your-company/sales-team-data-demo"
    }
  ]
}

{
  "uid": "data-onboarding-59324-book-demo",
  "title": "Data onboarding for {{first_name fallback='you'}} - see it in action",
  "description": "Book a demo with us to see the immediate value we can provide.",
  "profile_uids": ["59324"],
  "actions": [
    {
      "kind": "calendly",
      "calendly_url": "https://calendly.com/your-company/sales-team-data-demo"
    }
  ]
}

{
  "uid": "cars:28192",
  "title": "2029 just off lease!!!",
  "description": "Come check this one out today, nice inside and out, 105kW battery, 6400 miles.",
  "actions": [
    {
      "kind": "event",
      "event_name": "Clicked Search => Car Listing"
    },
    {
      "kind": "url",
      "url": "https://my.cars.com/listings/2029-04/car/28192",
      "url_blank": true
    }
  ],
  "title_labels": [
    {
      "text": "NEW",
      "theme_uid": "62c73c423f12de632a6d96fa"
    }
  ]
}

{
   "ids": [
     "6f3c42a6dd656232c712de63",
     "6f4c42a6d92f2c712d656e65",
     "6f5c42a6df232d656e2c7167"
   ],
   "icon": {
      "kind": "uid",
      "uid": "Puzzle"
   }
}

{
   "ids": [
     "6f3c42a6dd656232c712de63",
     "6f4c42a6d92f2c712d656e65",
     "6f5c42a6df232d656e2c7167"
   ],
   "search_group_id": "5f3c4232c712de665632a6d9"
}

{
   "ids": [
     "6f3c42a6dd656232c712de63",
     "6f5c42a6df232d656e2c7167"
   ]
}

{
   "kind": "url",
   "url": "https://help.your-product.com/posts/339201-learn-more-about-it"
}

{
   "kind": "navigate",
   "url": "/cars/339201/edit"
}

{
   "kind": "event",
   "event_name": "Search action taken (custom)"
}

{
   "kind": "identify",
   "identify_key": "opted_in_for_product_research",
   "identify_value": "true"
}

{
   "kind": "tour",
   "tour_id": "6f7dfada300116393481bbbb"
}

{
   "kind": "survey",
   "survey_id": "6d7dfad00116393ba481bb3c"
}

{
   "kind": "script",
   "script": "const pageStateDone = /#state=finished/.test(window.location.href);\nif(pageStateDone) { showFinishedModal() } else { showTodoModal() }"
}

{
   "kind": "function",
   "fn": "showCustomModal_chameleonAction_19"
}

{
   "kind": "airtable",
   "href": "https://airtable.com/1AyOshrwxGUPn"
}

{
   "kind": "arcade",
   "href": "https://app.arcade.software/share/E4EoapWRfxxeN3nX1rRe"
}

{
   "kind": "calendly",
   "href": "https://calendly.com/chameleon/demo"
}

{
   "kind": "calendly",
   "href": "{{calendly_csm_url}}"
}

{
   "kind": "chili_piper",
   "selected": "href",
   "href": "https://chameleon.na.chilipiper.com/book/queuey-queue"
}

{
   "kind": "chili_piper",
   "selected": "router",
   "router": "csm-router"
}

{
   "kind": "chili_piper",
   "selected": "href",
   "href": "https://chameleon.na.chilipiper.com/book/{{chilipiper_csm_queue}}"
}

{
   "kind": "embed",
   "href": "https://content.acme.co/embeds/custom-widgets/23s2a"
}

{
   "kind": "figma",
   "href": "https://www.figma.com/file/QFEMdNRma0Y1WDcMRCw9Fz/Prototyping-in-Figma?node-id=0-1&t=YfflZMSK0tnWnCCu-0"
}

{
   "kind": "google",
   "href": "https://docs.google.com/document/d/e/2PACX-1vQ7tXBCx-9gAlzHvROHNGC1_cklni0CmbBPHk/pub"
}

{
   "kind": "helpscout",
   "helpscout_kind": "open_chat"
}

{
   "kind": "helpscout",
   "helpscout_kind": "open_help_center",
   "article_url": "https://help.your-product.com/article/596-billing-and-plans-guide"
}

{
   "kind": "helpscout",
   "helpscout_kind": "open_help_center",
   "article_url": "https://help.your-product.com/article/596-billing-and-plans-guide",
   "article_mode": "menu"
}

{
   "kind": "helpscout",
   "helpscout_kind": "open_answers"
}

{
   "kind": "helpscout",
   "helpscout_kind": "search_term",
   "query": "Import data"
}

{
   "kind": "hubspot",
   "href": "https://meetings.hubspot.com/chameleon-sales/11-chat-30-minutes"
}

{
   "kind": "intercom",
   "selected": "open_chat"
}

{
   "kind": "intercom",
   "selected": "open_help_center",
   "specific_article": "https://help.chameleon.io/en/collections/3572193-chameleon-101"
}

{
   "kind": "livestorm",
   "session_uid": "b820db33-3f2c-4159-a991-126fe03a7931",
   "utm_source": "chameleon_helpbar"
}

{
   "kind": "loom",
   "href": "https://www.loom.com/share/827d72cda9ed4724b30ba663f9ca00d3"
}

{
   "kind": "navattic",
   "href": "https://capture.navattic.com/cl4r18309ml5cngqz3e4fu84k"
}

{
   "kind": "pitch",
   "href": "https://pitch.com/public/23e42e85-8142-4401-814e-509b597f06b0"
}

{
   "kind": "typeform",
   "href": "https://trychameleon.typeform.com/to/ahn7QkmE#source=developer_docs",
   "mode": "popup"
}

{
   "kind": "zendesk",
   "selected": "open_chat"
}

{
   "kind": "zendesk",
   "selected": "search_term",
   "search_term_article": "Import data"
}

chmln.on('app:navigate', (opts: NavigateOpts) => {
  /*
  Nagivate with React router / Vue router / pushState / call window.open / etc.

  Frameworks:
    - React info here => https://www.npmjs.com/package/@chamaeleonidae/chmln
    - Add more frameworks with a PR to this file and receive a $50 gift card

  opts.to is the `url` from the SearchAction; this SearchAction is configured with `kind=navigate`

  */
});

chmln.on('helpbar:search:content', (opts: SearchOpts, ctx: Context) => {
  /*
  Optional for User generated content search:
    - Generally Chameleon will handle search for you
    - If you need to add custom "Search" logic use this event to pass back the right items, two options:
      - directly return an array<SearchGroup>; include and `id`, `title`, and `search_items` keys for each SearchGroup
      - return a Promise that will resolve with the first argument being an array<SearchGroup>.
    - Best used when you already use Algolia or have a custom search endpoint internally

  Called when:
    - The User has entered in a query; when a user enters text and pauses

   return array<SearchGroup>
   return Promise that resolves with the first argument as array<SearchGroup>
   return null (or don't implement) to use the search results as pulled from Chameleon

   opts.query is the search term queried for

   */
});

chmln.on('helpbar:search:external', (opts: SearchOpts, ctx: Context) => {
  /*
  Optional for Help center search:
    - Generally Chameleon will handle search for you
    - If you need to add custom "Help center search" logic use this event to pass back the right items, two options:
      - directly return an array<SearchGroup>; include and `id`, `title`, and `search_items` keys for each SearchGroup
      - return a Promise that will resolve with the first argument being an array<SearchGroup>.
    - Best used when you use a Help center that Chameleon does not integrate with

  Called when:
    - The User has entered in a query; when a user enters text and pauses

   return array<SearchGroup>
   return Promise that resolves with the first argument as array<SearchGroup>
   return null (or don't implement) to use the search results as pulled from Chameleon

   opts.query is the search term queried for

   */
});

chmln.on('helpbar:search:question', (opts: QuestionOpts, ctx: Context) => {
   /*
    Optional for AI answering
      - Generally Chameleon will handle AI answering for you
      - If you need to provide an answer from your own API or own model

    opts.query is the question
    opts.searchGroups the currently displayed groups + results
    opts.onAnswer a function to call when you have the partial or complete answer

    This is where you would make our network request and then call onAnswer when ready

    Example use of onAnswer
      When the endpoint returns the full answer
        - opts.onAnswer({ text: 'To start using the data import...' });

      When the endpoint returns the full answer + reference material
        - opts.onAnswer({ text: 'To start using the data import...', links: [{ text: 'Data importing guide', href: 'https://help.acme.io/en/394821' }} });

      When the endpoint steams the answer in character, token, word, or sentence call multiple times with each part received
        the onAnswer callback will concatenate these parts together as they come in
        - opts.onAnswer({ text: 'To star' });
        - opts.onAnswer({ text: 't using the' });
        - opts.onAnswer({ text: ' data import feature, first' });
    */
});

chmln.on('helpbar:search:answer', (opts: AnswerOpts, ctx: Context) => {
  /*
  Optional for tracking AI Answering
    - Know when an answer is generated including the question and answer

   opts.query is the question
   opts.answer is the AI generated answer

   */
});

chmln.on('helpbar:opened', (opts: BlankOpts, ctx: Context) => {
  /*
  Optional:
    - This is purely informational but can be used for custom tracking etc.

  Called when:
    - The HelpBar is triggerd (opened by the User)

  ctx.source will tell you how it was opened

  */
});

chmln.on('helpbar:closed', (opts: BlankOpts, ctx: Context) => {
  /*
  Optional:
    - This is purely informational but can be used for custom tracking etc.

  Called when:
    - The HelpBar is closed by the User

  */
});

chmln.on('helpbar:items:recent', (opts: RecentOpts, ctx: Context) => {
  /*
  Optional:
    - Chameleon will handle recent items for you
    - If you need to add custom "Recent items" logic use this event to pass back the right items

  Called when:
    - the HelpBar needs a list of the most recent actions taken

  return Array or Promise of recent actions taken
  return null (or don't implement) to use the recent items as tracked by Chameleon

  opts.items is an array<SearchItem>; the 4 most recent actions taken

  */
});

chmln.on('helpbar:items:pinned', (opts: BlankOpts, ctx: Context) => {
  /*
  Optional:
    - Chameleon will handle pinned items for you
    - If you need to add custom "Suggestion items" logic use this event to pass back the right items

  Called when:
    - the HelpBar needs a list of the pinned items

  return Array or Promise of pinned items to display
  return null (or don't implement) to use the pinned items as added to Chameleon backend via SearchItem

  */
});

chmln.on('helpbar:search:items', (opts: SearchItemsOpts, ctx: Context) => {
  /*
   Optional:
     - This is purely informational but can be used for custom tracking etc.

   Called when:
     - The Search query finished with 1 or more search results

   opts.query is the search term queried for
   opts.items an array<SearchItem> of all search results for this query
      - opts.items.length will equal 0 when no results were returned

  */
});

chmln.on('helpbar:item:action', (opts: ActionOpts, ctx: Context) => {
  /*
  Optional:
    - Chameleon performs the configured actions automatically in the order they are defined in.
    - If you need to know when a specific "SearchItem" is clicked/triggered, use this event to know

  Called when:
    - When the SearchItem is clicked/triggered/selected and its actions are about to run

  opts.item is a SearchItem
  opts.item.actions is the array<SearchAction> that will be run

  */
});

chmln.on('helpbar:item:action:error', (opts: ActionErrorOpts, ctx: Context) => {
  /*
  Optional:
    - Chameleon may encounter an error when triggering an action.

  Called when:
    - When an action encounters an error

  opts.item is a SearchItem
  opts.action is a SearchAction that errored

  */
});

chmln.show('helpbar')

chmln.show('helpbar', options)

chmln.show('helpbar', { query: 'annual billing' })

chmln.show('helpbar', { query: 'What is a tour?' })

chmln.show('helpbar', { placeholder: 'Search for it...' })