Built by Vinay

HelpHub is three things:

1. Plug-and-play semantic search across your help docs

2. Instant answers to frequently asked questions (curated and via AI)

3. All packaged in a beautiful new in-app widget.

And it plays nicely with the Bar, Nudges, and Questlists.

With HelpHub, your users can get unstuck and get the help they need without exiting your app's flow. Because of this, when HelpHub is adopted, our customers typically see their conversion rates increase.

It's easy to integrate your existing help documents into HelpHub. We currently support Zendesk, Intercom, GitBook, and many more providers. For the full list of integrations, see our Adding help documents documentation page.

To turn on HelpHub, head into the editor and go into the "HelpHub" section on the right.

We just launched a new visual skins editor that allows you to edit your CommandBar theme more easily. It's an intuitive UI to change the look and feel of your Nudges, Questlists, and Bar.

Previously, we listed all theme attributes together, line-by-line. Now, for most styles, we highlight the section of the Bar or component that is being updated. Here's an example:

This should make it much easier for you to change your existing theme or add new ones. Note that there are also sections for Nudges and Questlists at the top. Let us know what you think.

We have a big new feature to announce: Questlists. Questlists can be used to bring your users through an onboarding flow, get them set up with a new feature, or push them to do certain actions or flows within your app:

Essentially, Questlists are chains of actions, nudges, or anything that your users can complete. For example, you could string together a number of different nudges that walk your users through turning on a new feature that you just released.

Each item in a Questlist has a title, description, CTA, and completion condition. You can define what the CTA does — for example; it could execute a command or bring the user to a certain page. Additionally, you can define a completion condition that controls when the item gets marked as completed. The completion condition can be when the CTA is clicked or something more complex.

Questlists, nudges, and commands all play well together — if you already have commands set up, nudges and Questlists are easy to add. Give Questlists a try, and let us know what you think!

Read more about Questlists in our documentation.

It's valuable for users to know their most recent activity, whether seconds ago or days ago. In fact, users increasingly expect to have access to their recent data -- we see this with browser history, phone call logs, and recent searches.

We are excited to share that the the same is now possible in CommandBar out of the box with Recents. With recents enabled, a user's most recently executed commands and records will appear at the top of the bar. The best part? Turning it on is as simple as toggling "Recents" in the Settings tab in the Editor. One of the quickest quick wins out there. CommandBar handles storing recents for you, so no database changes are required.

You can configure CommandBar to show both recently accessed records and recently executed commands.

The Quickwizard is an Editor tab, whose sole purpose is to simplify and expedite configuration. We currently have four workflows:

1. Set up search
2. Add multiple links
3. Set up router
4. Add another placeholder

If you're trying to do something in the Editor and can't figure out how, see if you can cast a spell from the Quickwizard.

We are thrilled to announce the first alternative form factor for CommandBar: inline bar! This is now an option alongside our traditional modal formfactor if you want to provide a more traditional experience to users.

If you use inline bar, it's possible to configure CommandBar such that the modal formfactor will appear on narrow screens. To implement, all you need to do is (1) add an inline bar HTML element to your app, (2) update your .boot, and (3) use .setFormFactor:

(1) add the inline bar root element

<div id="commandbar-inline-root" style={{ width: 375 }}></div>

(2) update your boot

window.CommandBar.boot(userId, {}, {type: 'inline', rootElement: 'commandbar-inline-root'});

(3) call setFormFactor

window.CommandBar.setFormFactor({ type: 'inline', rootElement: 'commandbar-inline-root' });

Say hello to records and metadata, the offspring of context! Context is used to contain two types of data:

• Searchable data -- that could show up in response to a query
• User attributes -- used to build availability and recommendation conditions and other personalizations

To make developing on CommandBar easier, we've separated these two types of data into their own primitives. Records represent searchable data, and metadata represents user attributes. They each come with their own SDK methods. We've also restructured the Editor to reflect this change: records and metadata each have their own tabs.

Along with this change, we've also changed the way commands interact with records. Power select allows a user to first select a record and then perform a command on that record. So far, a command could show up as both a result in CommandBar and as an action to be used during power select. This didn't allow you to differentiate between the two: any command you created that used a record automatically became available for power select, and vice versa. Now, we're introducing another new concept -- record actions -- that gives you this flexibility. Commands show up in response to a user search; record actions show up when a user power selects. You can set up record actions from the Records tab of the Editor.

One of the most joyous moments when unboxing your CommandBar is tweaking its style to look and feel native to your company's brand, but also make the bar look plan cool 😎

Experimenting with different styles can be tedious, so we've created a couple of defaults for you to try out. More on the way!

A core goal of the CommandBar Editor is to make it easy for you and your team (technical and non-technical folks alike) to understand why your CommandBar is behaving in a certain way, so you can create finely tuned experiences for your users without tracing through code.

We launched the Debugger several months ago to allow anyone with Editor access to understand what SDK calls were being made and contributing to CommandBar's behavior. Today we're launching several improvements to the Debugger experience, including a fresh new UI that makes it easier to quickly assess what SDK calls are being made in a given session and double click into the body of the SDK call.

You can more easily access our changelog -- from the CommandBar Editor and Dashboard! We're proud of how much we ship, and this change will make it even easier to curl up by the fire on a Friday night and read about what new goodies were added to CommandBar this week.

We've added a new gizmo for CommandBar admins called the Editor Panel. It's like a little piece of the Editor, underneath CommandBar.

If you're used to enabling testmode through the little crown icon in the footer of CommandBar, you'll now do that through the Editor Panel.

You can also use the Editor Panel for some common debugging operations. We'll be adding more useful stuff there over time too!

Here's a list of some of the smaller details we shipped this month.

Companies utilizing our startup pricing program to get CommandBar credits (see details here to see if you're eligible) will now see those credits on the billing page. Added a way to prevent context loader functions from being called on page load or when CommandBar is closed. // Will prevent loader from being called on page load or bar close

window.CommandBar.addContext(key, []);

window.CommandBar.addContext(key, loader);

Fixed a bug preventing records from loading when categories have infinite scroll enabled When setting default keyboard shortcuts from the Editor, we now show a special warning when your shortcut uses a browser-reserved shortcut, which cannot be processed by CommandBar unless your app is shipped as a desktop application.

Our dashboards at https://app.commandbar.com have received a major upgrade, courtesy of our friends at Explo!

Some features enabled by this upgrade:

• Deadends shown by page
• Brand new dashboards tracking New users and Opens
• Improved date ranges
• Sorting and filtering across all tables
• Beautiful charts for all of the dashboards

It's now much easier for users to filter their search results in CommandBar. You can now add persistent tabs for your bar's most important categories ("major categories") that filter the user's search to just that category. These can be either record or command categories.

Setting up your major categories also helps let users know what they can search for in your CommandBar (you can also use rotating placeholders for user education).

A category can be designated a major category from its settings page

Here's a list of some of the smaller details we shipped in January 2022.

We shipped some performance improvements that make CommandBar open much faster than before. Valtio-inside. We shifted our state management infrastructure to Valtio which has made CommandBar much easier to develop on. You'll see this show up as a faster flowing changelog :) Option filtering now supports "truthy" boolean operators (it used to coerce "true" to a string). Admins can now login and signup using Google auth, in addition to setting a custom password.

Here's a list of some of the smaller details we shipped in December 2021.

• You can now prevent a user from being able to summon the Editor via "open editor" by passing in a flag to the boot method.
• Added a loading state to category headers while fetching results to show they are being actively searched. If you have fast search functions you might not notice these :)

In the CommandBar of old, categories were only shown in the bar when they included at least one result for the user's query. That's great for cleanliness but can sometimes be confusing for users. In particular, showing a category empty state can reassure the user that the category they were interested in was actually searched.

So we've added the ability for you to decide which categories you want to show an empty state for, and which you don't. Note that by default, categories won't show an empty state. We recommend turning this on for your most popular categories but leaving it off for niche-y ones so that you don't clutter your results list.

How to turn on

• Click into the settings of a context record
• Turn on "Always show, even with no results"

CommandBar is now really good at handling queries with tokens that match a command or record but whose order is reversed. This can happen all the time when users are searching for commands. Here are some searches we see frequently that are now handled well:

• "open X" vs "X open"
• "integrate X" vs. "X integration"
• "search X" vs. "X search"
• ...and many more!

CommandBar used to use a default search fuzziness setting to give users a balance between accurate results and typo-tolerance (for categories not controlled by a search function).

Now you can fine-tune that parameter to control how fuzzy you want CommandBar's search to be for your users. You can find this in the Editor's "Settings" tab under "Search".

Pain/Problem:

CommandBar used to support two options for record search:

1. You could auto-execute a default command when a record was selected. Most people used this to open the record.
2. You could show the user all the possible commands that related to the record.

Solution:

We’re now combining these two options and introducing a new feature called Power Select. For any record, you can now set a default command: this is the command that will get executed when a record is selected. However, users can also now power select by hitting cmd/ctrl + enter on the selected record. Power selecting will show the user all possible commands. This approach means users get the familiarity of “click to open”, but also the power of being able to quickly take action on a record.

Records can be configure to have "default" commands now!

How can I turn this on? 🛠

In the "Contexts" tab in the Editor:

• Click the gear icon ⚙️for a record
• Select "Make default" on a command

Pain/Problem

Categories with many commands can overwhelm users and/or make it hard for users to browse through other categories – this happens frequently with help docs categories. We introduced category limits a few months back as a solution. But with category limits came a new challenge: what if a user wants to see more than just the first few commands?

Solution

Users can now click "See more" to view all commands for a category (if the category has a limit). Once all options are expanded, the user can click "See less" to collapse the commands

How can I turn this on? 🛠

• Go to the "Commands" tab in the Editor:
• Change the "Option list limit"

Pain/Problem

Managing arguments should be extremely easy. Unfortunately, we noticed a few pain points with our old design.

• Unintuitive field names: Users have been confused by how fields should be used.
• Multiple arguments: Jumping from one argument to another was challenging, since the modal covered the entire Editor.
• Hidden section: Some users did not even know it was possible to add arguments to commands since the section was collapsed by default.

Solution

We redesigned the argument editor to address the issues above and more. There are a few changes worth highlighting.

• Reorganized field names: New field names, descriptions, and tooltips make argument fields easier to understand.
• Improved UI: The argument modal no longer covers the entire Editor, so you can see the command you are editing. Argument details are collapsable and expandable, which allows you to quickly view, edit, and re-arrange multiple arguments.
• Easy add: First, the argument section is no longer collapsable. Second, the "Add another step" button on the bottom is persistent, so you can add another argument at any point with one click.

Command shortcuts take seconds to set up and give users a quick way to execute commands without first opening the CommandBar. Sometimes, users don't understand how shortcuts work, so they'll try searching for a command by its shortcut.

To let them know how shortcuts work, we'll now show a tooltip when a user searches for a command by keyboard shortcut.

There's no "right" way to use a keyboard shortcut though; if your users prefer to start every command with command/ctrl+k and then searching by shortcut, they can do that too :) Searching for a keyboard shortcut will now always show the command whose shortcut matches the query at the top of the results list.

How can I turn this on? 🛠

If you don't already use shortcuts, all you need is to add a shortcut to one of your commands!

Want to know how many users are using your CommandBar? Curious about individual user activity? Only interested in a specific group of users? We've got you covered! We are thrilled to introduce the very first version of the Users table.

What powers does the Users Table give my team?

There are three things you and your team can do with the Users table.

1. Summary of your users: A funnel showing you how many users CommandBar has seen, all the way down to how many users are using CommandBar frequently.
2. User-specific data: number of executions, deadends; when we first/last saw the user
3. Easy user filtering: use the button on the top right to filter users based on metadata you provide. For example, you can use the filter to show only users from your production environment, or a single customer organization.

Please let us know if there are other features you'd like to see here!

How can I turn this on? 🛠

Check out your Users Table at https://app.commandbar.com/analytics/users!

The Editor has a new look, with a new coat of paint on almost every scren. Beyond making the Editor look amazing, there are two core principles that guided this effort:

1. Make the Editor more intuitive for new editors
2. Make the Editor easier to use for those curating a lot of commands

Bunched in with this re-design, we changed the command detail view to make command settings easier to find and adjust. For example, some of our previously nestled settings (e.g., shortcuts) are now un-nested.

How can I turn this on? 🛠

Open the Editor and take the new version for a spin. Let us know what you think!

By popular demand, we are adding a new setting for commands with list arguments: "create or select". Users can now create a new option or select an existing one.

Imagine you have a command Add label. Users used to only be able to select from their current labels. Now you can also give them the option to add a new label (while using it in the command).

How can I turn this on? 🛠

You can enable this option from a list argument's advanced settings.

If the setting is enabled and the user creates a new option through CommandBar, CommandBar will provide the following to your callback:

{key: { value: <value provided by user>, _createdByCommandBar: true, }}

The availability and recommendation conditions interfaces got a new look and are now fully no-code! It's way easier to view and edit your conditions now. You can recommend a command on a specific page or to a user persona with a few clicks, no JavaScript conditions necessary!

In the availability editor, you'll now see any command dependencies (like a context value or callback) alongside your conditions.

How can I turn this on? 🛠

You'll find the new interface in your Editor!

Sometimes a long command category can clutter your search results. For example, a category filled with hundreds of help articles might show up frequently when a user searches, crowding out other more relevant results.

You can now prevent a long category from cluttering search results by pinning that category to the bottom of the results list.

How can I turn this on? 🛠

In the Editor, you can turn this setting on in a category's settings. Note that only one category can have this setting enabled.

For single- and multi-select list arguments, you can now categorize values.

Here's an example:

window.CommandBar.addContext("students",
  [
    { name: "Anna", id: 1, category: "3rd Grade" },
    { name: "Billy", id: 2, category: "3rd Grade" },
    { name: "Charles", id: 3, category: "3rd Grade" },
    { name: "Devika", id: 4, category: "2nd Grade" },
    { name: "Earl", id: 5, category: "2nd Grade" },
    { name: "Fiona", id: 6, category: "2nd Grade" },
]);

Let's say we have a command called Grade student with one argument, a single-select list defined by a record called students. By specifying the category key above, here's how the command would look after the user selects it:

How can I turn this on? 🛠

If you pass in the category key for records, they will just work! No setting toggle required.

When you're scrolling through a long category of commands, it's easy for a user to get lost and forget which category they're in.

Sticky headers help users keep their place in a category! As you can see below, command categories now stick to the top of the Bar as a user scrolls, so they won't get lost.

How can I turn this on? 🛠

It's already on!

You can now access your CommandBar billing details from: https://app.commandbar.com/billing

How can I turn this on? 🛠

It's "on"!

You can now add a sort function to any record via addContext. Let's check out this example below to see how sort functions work:

window.CommandBar.addContext("records", records, // records numbered 1 through 1000 { searchOptions: { sortFunction: (a: any, b: any) => a.id - b.id, // ascending }, });

Assume our "records" object looks like this:

records = [
  { name: 'Record 1', id: 1 },
  { name: 'Record 2', id: 2 },
  ...
  { name: 'Record 1000', id: 1000 }
]

When a user searches for a record (either via Quickfind or in an argument), CommandBar will:

• Filter for records that match the user's query
• Sort the remaining records using the provided search function

You can use custom sort functions to ensure users see relevant results at the top of their results list when searching. For example, maybe you want recently edited records to show up above older records, even if older records are a better match for the user's query.

Note that if you provide a custom searchFunction for your record, then a sortFunction won't be used.

How can I turn this on? 🛠

Add a sort function to your records in context as illustrated in the first code block.

There are two painpoints we are addressing with our new CommandBar.boot SDK method:

1. Confusion over how to pass in the user ID
2. Enable you to pass in more information about the user in event data for more useful analytics (previously all you got was the user ID)

The new CommandBar.boot takes two arguments:

1. id (string, required)
2. eventData (object, optional)

To illustrate what this means, let's dig into the following example:

window.CommandBar.boot(loggedInUserId, {company: companyName, subscription: subscriptionType});

In the example above, we pass in a userId (as always), but we also use the second argument to pass an object with key-value pairs that will be attached to reported CommandBar events.

Let's say Michael Scott from Dunder Mifflin has an Enterprise subscription and executes a command. Here's what we'd be able to see in his command execution data:

• Michael Scott's user ID ("WorldsBestBoss")
• Michael Scott's company name ("Dunder Mifflin")
• Michael Scott's subscription type ("Enterprise")

For more details: https://www.commandbar.com/docs/sdk/lifecycle/boot/

How can I turn this on? 🛠

No existing calls to boot will break with this change. If you want to take advantage of the improvements, just edit your CommandBar.boot calls.

Really long command categories can create some issues for CommandBar users:

• A long category could clutter the default list, before a user searches
• A long category could return a lot of results for a query, making it hard to find what you're looking for if it doesn't fall in that category

To help address this problem, you can now limit the number of results shown in a command category. This limit will apply to both the default list and to search results.

You can find more ways to deal with long categories here.

How can I turn this on? 🛠

In the Editor, you can turn this setting on in a category's settings. (1) select the "Commands" tab; (2) select the "Object search" sub-tab; (3) click on the gear icon ⚙️ of a category.

Two parts to this effort to give you confidence in the shortcuts you configure:

• We collected a database of default browser shortcuts to help you make figure out shortcuts to attach to your commands that won't conflict with browser shortcuts your users might rely on.
• When you specify a shortcut that conflicts with a browser default in the Editor, we'll show an alert with info on the conflict. You can always choose to override the browser default (CommandBar shortcuts will always override), but just make sure your users don't rely on shortcuts you override! For example, don't override command+f 😊

How can I turn this on? 🛠

This is the default setting (nothing to do here).

If you want to check the status of a command shortcut, just click into that command in the Editor and see if there is a warning on your shortcut.

We want our docs to be a self-service heaven. To that end, we made a few major changes to improve our docs:

• Structure: the docs are organized into conceptually logical blocks (e.g., getting started, commands, context)
• Searchability: every docs page and its content is searchable from the Bar
• Examples: we've added screenshots, videos, code snippets, etc. to bring our core concepts to life If you have any feedback, please let us know!

How can I turn this on? 🛠

Check them out at https://www.commandbar.com/docs!

CommandBar automatically logs analytics events, and now (in addition or instead) you can send them to a customer data platform (e.g. Segment). Use this to capture command executions and deadends.

How can I turn this on? 🛠 If you want to take advantage of this, you can use the new CommandBar.addEventHandler method.

const myHandler = (eventName, eventData) => {    
  sendToSegment({name: eventName, ...eventData}); 
} 
window.CommandBar.addEventHandler(myHandler);

For full details on this new feature, see here.

See the SDK in its full glory at: https://www.commandbar.com/docs/category/lifecycle/.

Some popular methods:

• addContext
• addCallback
• addRouter

Commands that have 3 or more arguments have a new look: they'll be shown to the left of the Bar, instead of on top (like they were previously).

In this example, we have a command "Register as volunteer", which has 4 arguments:

With the argument tags displayed vertically on the left-hand side, the input flow is much clearer!

How can I turn this on? 🛠

Any command with 3 arguments will automatically use this new look.

What do you want to do? That's what every user sees when they open CommandBar...until now. You can now customize the placeholder text that users see. Use the placeholder to recommend commands or mention objects searchable via CommandBar.

How can I turn this on? 🛠

In the Editor (1) go to the "Settings" tab; (2) expand the "Bar prompts" section; (3) input your custom placeholder text!

Want to show an avatar or other icons next to Quickfind records? Now you can!

Take a look at the following example: all we have to do is add an icon property for our record array.

const cereals = [
  {
    label: 'Trix',
    value: 'trix',
    icon: '🐰',
  },
  {
    label: 'Lucky Charms',
    value: 'luckyCharms',
    icon: '🍀',
  },
  {
    label: 'Cookie Crisp',
    value: 'cookieCrisp',
    icon: '🍪',
  }
];
window.CommandBar.addContext("cereals", cereals);

How can I turn this on? 🛠

Set the icon property for records in context as illustrated above.

Typing {{ in any Editor field that can reference context will open up an autocomplete menu that will show you:

• Context keys that are currently defined
• Context keys referenced by other commands

No more peering into your code to find the right key name!

How can I turn this on? 🛠 This feature is on by default.

For commands with a list argument, if you use a pre-selected option, CommandBar will now start the user's focus on that option (we used to start the user's focus at the top of the options list). This makes it easier for a user to notice the pre-selection and see where it falls in the option list.

In the example below, pre-select is used to highlight the current stage.

How can I turn this on? 🛠

This is on by default.

We have added some structure to the deadends dashboard via tabs, which should make the dashboard more useful and digestible.

• Inbox tab (new deadends)
• Archive tab (processed deadends)
• Gibberish tab (filtered out deadends)

You can also navigate through deadends using the keyboard, select multiple at a time, and use keyboard shortcuts to execute common actions (e.g., archive, tag to a command, add a synonym, mark as gibberish).

How can I turn this on? 🛠

If you want to check out your deadends inbox, go to https://app.commandbar.com/analytics/deadends

We now support arguments for programmatically-defined commands. See more details here.

For those that learn better by example, check out this code!

window.CommandBar.addContext('cereals', cereals);
window.CommandBar.addCallback('Set favorite cereal', setFavoriteCereal);
window.CommandBar.addCommand({
  text: 'Set favorite cereal', // command text the user sees
  name: 'set_favorite_cereal',
  template: {
    type: 'callback',
    value: 'Set favorite cereal' // using the callback set in the second line
  },
  arguments: {'cereal': 
    {
      type: 'context',
      value: 'cereals', // using the context set in the first line
      order_key: 0,
      label: 'Select one',
      label_field: 'label',
    },
  },
  category: 924,
  icon: '⭐',
});

Here's what we get in the Bar (a callback command with a list of cereals as the argument):

How can I turn this on? 🛠

If you have a programmatic command where you want to use this, just set the "arguments" property.

Sync your help center with CommandBar to make it searchable, immediately.

Currently supported help centers are:

• Intercom
• GitBook
• Zendesk

The integration will show you all your help docs and ask you which ones you want to make available from CommandBar. For each you choose, a command will automatically be created with the following properties:

• Name = help doc title
• Description = help doc content (this means users can search through the body of a help doc from CommandBar, not just the title) Use a different help center provider? Let us know!

How can I turn this on? 🛠

Check out the instructions above!