Built by Richard

Confluence is the source of truth for many, many companies. It wouldn’t surprise us if more words exist in your company’s Confluence space than in any other system.

Today, all those words can now be synced with CommandBar. That means:

• Make all confluence content semantically searchable (i.e. users can search in their own words) through HelpHub
• Use confluence content to train a custom AI chatbot (a con-fluent chatbot, if you will) to answer all your users’ questions, like ”How do I add seats to my account?” (or “how do I send roses to the team that built that miraculous chatbot”).
• Non-annoyingly suggest users check out articles when they appear to be confused (and get them unstuck and thriving)

If you have permissioned docs in Confluence, fear not. We’ve made it so that you can control which users can see which confluence docs. (This even applies to AI chat — if a user isn’t supposed to have access to a doc, the chatbot they interact with won’t be trained using that content. It’s basically as if every user gets their own custom chatbot 🤯)

To try it out, head over to https://app.commandbar.com, oauth into Confluence (or add your API key), and you’re off to the races.

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.

Here's a quick win: we now automatically suggest synonyms for your commands based on the existing command title. Just click on the synonym to add it, and it will immediately improve CommandBar's search.

To do this, we used modern large language models that can produce synonyms that your users could be searching for. Look out for more machine learning-driven improvements coming soon!

One of CommandBar's primary goals is to help users quickly find what they are looking for. Record previews and help doc integrations were built with this in mind. Video commands are the newest addition to the group. They give your users access to any video content you've published -- explainer videos, marketing content, or announcements from your leadership.

Playing the videos in-app reduces the chances your users will get lost in a Youtube rabbithole, and lets them watch a demo video side-by-side with their workspace.

We're excited to see how you choose to wield this new command type, whether for how-to guides, best practices, case studies, or something else!

We added "web request" commands to make it easier to use web requests with CommandBar. Once set up, it is effortless to add or edit web requests in the Editor, without code changes. This means you can build commands that interact with external APIs (public or private) or API-based services (like Zapier) without the help of an engineer.

Appcues flows, checklists, and NPS surveys can now be launched from CommandBar! Set up requires no code: check it out here.

Let us know if there are any other integrations you'd be interested in.

Here are some of the more subtle (but important!) details we shipped in the month of May.

• Some of the most frequently asked support questions relate to setting up CommandBar in SSR apps (especially NextJS apps). We wrote a guide on this.
• We made it easier to access the settings for a category in the Editor.
• We improved the interface editors use to set up default keyboard shortcuts for commands. In particular, the recorder now works much better on Windows!

Want to set all the commands in a category to the same icon? You used to have to do this manually for each command, but now you can set an icon at the category level.

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.

Now that Netlify has their own CommandBar, you can easily add one to your Netlify-powered site using our new Netlify plugin!

The plugin lets you add a CommandBar and set up your initial commands in just a few config lines.

#Example configuration [[plugins]] package = "@commandbar/netlify-plugin-commandbar" #Optional entryPoint = "path/to/entrypoint.html" [plugins.inputs.linkCommands] "Go to dashboard" = '/dashboard' // relative link "Go to stack overflow" = 'https://stackoverflow.com' // aboslute link You can read more about the plugin on GitHub: https://github.com/tryfoobar/netlify-plugin-commandbar.

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 :)

Some of the CommandBar Client SDK methods – like boot and addCommand – now return promises to enable more control over async logic.

await boot(...);
await addCommand(...);

For enterprise customers using the commandbar/foobar package to self-host the CommandBar library, we were able to reduce the bundle size by 24%, from 1.3mb / 370kb (gzipped) to 1.0mb / 282kb!

You can check out the latest bundle here: https://bundlephobia.com/package/@commandbar/foobar

CommandBar now supports a new argument type - long text! Use this argument when you want your users to provide more than a few words of text, basically wherever you'd use a paragraph input in a form.

You can now customize two new pieces of the CommandBar UI:

1. The arrow used in commands that have arguments
2. The "submit feedback" button in the CommandBar footer

Upload an SVG from the "Misc" section in the Settings page of the Editor.

Before

If you used the CommandBar SDK in a TypeScript app then you had to litter your code with ts-ignore statements to deal with differences between the implemented and published types.

After

We gave your types a huge upgrade to bring them in line with the current SDK, and also added inline-IDE documentation to make it easier to work with the SDK. These come out of the box when installing the commandbar yarn/npm package.

Pain/Problem:

It used to be unnecessarily difficult to see what your skin changes look like as you're making them.

Solution

When editing a skin now, the keyboard shortcut "p" lets you preview the skin! Give it a shot the next time you're making tweaks to a skin 😊

The Editor used to occasionally experience slight delays on load, especially if you had more than 50 commands set up. Now, it loads before you can even think about it loading.

Happy editing!

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!

We're back with some style enhancements! For those on the Enterprise plan, you can now attach a logo to each skin you create (rather than one that is used across all skins)!

That means you can use your dark mode logo in your dark mode skin, and your light mode logo in your light mode skin.

How can I turn this on? 🛠

Just go to the "Settings" tab in the Editor and click into one of your skins. You'll see the option to upload a logo.

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!

As an alternative to installing CommandBar via the snippet, you can now use our npm package!

How can I turn this on? 🛠

Install the npm package via

yarn add commandbar-browser

And then inside your code:

import {init} from 'commandbar-browser'; ... // to load CommandBar init("<your organization's ID>")

Please note: the snippet and npm package are substitutes, so if you've already installed CommandBar, installing the npm package won't give you additional functionality.

If enabled, SSO will be required for admins in your workspace when they log in to:

• the Editor
• the Dashboard

How can I turn this on? 🛠

If you're a CommandBar Enterprise customer, you can enable SSO in your workspace settings from the Dashboard at https://app.commandbar.com.

CommandBar Skins are themes for styling your CommandBar.

Enterprise customers now have access to "Skins" in their Editor. Skins will allow you to define multiple CommandBar themes using a bunch of CSS hooks.

To programmatically switch the theme for a user, use the following SDK call

window.CommandBar.setTheme("themeSlug"); where "themeSlug" is the slug of the theme you want to use. A common use for skins: creating a light mode and dark mode for CommandBar to match your app's light mode and dark mode.

How can I turn this on? 🛠

In the Editor: (1) go to the "Settings" tab; (2) go to the "Styles" section.

You will see one skin there corresponding to your existing theme, and you can add another by clicking "Create a new skin".

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

How can I turn this on? 🛠

It's "on"!

For enterprise customers, we're adding a set of styling options that you can find in your skin settings:

• Bar: Top offset, Width, Menu height,
• Category Header: Vertical padding, Horizontal padding
• Input: Vertical padding, Left margin
• Footer: Vertical padding, Horizontal padding
• Option: Min height (support for dynamic width options), Vertical padding, Horizontal padding

How can I turn this on? 🛠

If you want to customize one of these options and are an Enterprise customer, (1) go to the "Settings" tab in the Editor; (2) go to the "Styles" section; (3) click into one of your skins.

Datetime arguments now come in two flavors:

1. Date and time
2. Date (without time)

Previously only (1) Date and time was supported, but this didn't work well for use cases where a time was too specific (like jumping to a day in a calendar view).

How can I turn this on? 🛠

This feature is available to everyone. To use a "date only" argument: (1) in the Editor, click into a command; (2) select an argument; (3) set its type to "Time"; (4) set the type to "Date Only".

In addition to link commands, callback commands, and click commands, you can now use webhook commands!

When a webhook command is executed, CommandBar will send a POST request to the specified API endpoint. The body of the POST request will include any arguments provided by the user.

Some ways you can use Webhook commands:

Trigger an external service via an API. For example, you could create a command to subscribe the user to a mailing list by POSTing to the Mailchimp or Sendgrid API. Trigger a workflow using a tool like Zapier. For example, you could create a command called "File a bug report" with a single text argument. When executed, that command could trigger a Zap workflow that posts to Slack and logs the report in Clubhouse.

How can I turn this on? 🛠

If you create a command or click into an existing one, you will see webhooks as an action type. Go here for more details on webhook commands.

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.

Previously you could only use absolute URLs for icons. Now you can use relative URLs too!

How can I turn this on? 🛠

Wherever you are setting an icon (Editor or code), try a relative URL.

For click commands, we will now proactively warn you when you are using an unstable selector. Unstable selectors are likely to change in future versions of your DOM (as a reminder, if a selector for a click command doesn't correspond to an element, that command will be unavailable to users).

How can I turn this on? 🛠

We will warn you automatically on any and all unstable selectors we detect.

If you want to check on existing click commands: (1) go to the "Commands" tab in the Editor; (2) select a click command; (3) check the status of the selectors for a warning.

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.

If you open the Editor, you can re-order commands within a category by dragging. The order will be reflected in the Bar when users open it!

How can I turn this on? 🛠

On by default!