CommandBar Changelog

Howdy folks!

It's here. It's finally here. Get your partner in front of the screen and tell your kids The Lego Movie's over because you need the big screen. Yes, the CommandBar changelog is here.

💬Copilot Analytics

Your users are talking. Now you're listening: Copilot now has analytics:

Copilot has been around for a while, but we've now added the guac to the burrito by giving you the insights you need.

Now you can discover:

• Replay all Copilot chats: See what users are asking for (and how) to discover user intent and surface what's unclear in your interface.
• End user feedback (👍/ 👎 ) on all conversations: Find out where AI answers need work and optimize your docs.
• All chats where AI used a fallback: When the AI couldn't generate an answer, you'll find out here to spot gaps in your documentation or find other errors.

Plus some quantitative data like opens, users and the success rate.

Sound good? Head to Copilot analytics and mine it for insights. Then look super smart in your next meeting. If anyone asks where those insights come from, a classic is "They were revealed to me in a dream."

Okay, career advice over.

📍The Detail Dungeon

As product nerds, we love the small details. Figured you might, too. So here are 3 cool things we shipped:

• Back by popular demand: Thomas re-shipped the "unsaved changes" modal, which we had shipped and then unshipped.

• Gus added an option to make Copilot answers "training only," meaning it won't use them verbatim, but let AI use its own words.

• Thomas added a nice banner to make product tours more non-annoying by recommending a start page.

• Gus enabled PDF upload for Copilot so you can turn any PDF into training content.

That's it for this edition of the changelog. As always: Keep is user-friendly.

Hey there,

As tempting as announcing dark mode on Eclipse Day would've been, today's product update is more exciting (and honestly, a lot more useful). Some of you might've already seen it and thought "dang, is AGI here already and has CommandBar achieved it?"

If you haven't, here's what I'm talking about.

Copilot's Personalities lets you customize how your Copilot answers questions and helps guide users. We know different companies have different styles and tones of addressing their audience, so we built Personalities to help customize your Sim — ahem, Copilot — to feel like it's part of your brand.

You can choose from templates like Professional, Friendly, and Warm, or create your own mix with Adjectives. I would like one Belligerent, Quarrelsome, Zealous Copilot, please. 😤

You can also choose how talkative you want it to be by setting the length of the answer (short/long and thorough/conversational) and the response format (bullet points, paragraphs, etc). The previously known Prompt Modifier has also moved here and you can find it under "Custom instructions" (this is where you can ask Copilot to reply in different languages or append "Sir" at the end of its answers).

Play around with it and show us your most unhinged customizations.

CommandBar is not an analytics company, but today we're doing our best impression: announcing our completely overhauled analytics system.

Every single dashboard is new. In addition to being new, they are also much better:

1. More actionable summary statistics

2. Real-time (less than 1 minute of latency from your users' browser to yours)

3. Non-annoying graphs to measure non-annoying assistance

Spotlight

See what your users are searching for and understand points of confusion so you can tweak and improve the Actions used in Spotlight. 

HelpHub (and of course, Copilot)

Check out how your help content is doing. Are users reading the articles? Are they opening up resource links? Are there any popular searches you don't yet have content for?

Announcement (and all other nudges) 

Are users seeing your nudges? How are they engaging with them?

We're super pumped to announce our integration with Rudderstack today.

We're sure you already know about them, but as a refresher, RudderStack is a Customer Data Platform that lives on top of your data warehouse. In short, RudderStack takes data from where it is collected (like your website or app) and delivers it to all the different tools you use, translating it into a language they can understand. Starting today, CommandBar is one of those tools.

What does this mean for you, a RudderStack customer?

It means you can now configure your settings to set up CommandBar as a destination in RudderStack.

Our friends at RudderStack wrote up a very helpful doc on how you can quickly do this.

Check it out here.

What does this mean for you, a CommandBar customer?

It means you can do more of what we love to preach: target, target, target.

Once you've enabled the integration (as shown below), you can start using client-side events data to make your nudges meet the right users, at the right time.

There are many ways this could look like (depending on what data you collect and from where), but here's an example of a use case:

User clicks a button for a specific feature in the app, triggering an event -> Event is sent to RudderStack and CommandBar at the same time -> CommandBar triggers an experience immediately to let the user know about new functionality of that feature.

Two main changes coming to your nearest CommandBar this week. Let's get into it.

Spotlight + Copilot = 👯

We like to think CommandBar experiences are friends. And what do great friends do? They help each other. Thomas and Nicola brought Copilot and Spotlight closer together. Your users can now access the AI assistant whenever they use Spotlight to search something.

Bulk select for Videos

Maggie has added a nifty new option to your Content tab so you can bulk select Videos you've imported and apply changes to all of them at once.

Believe it or not, between launching ShipLog (where you're reading this right now) and putting together our first-ever session of CommandTalks, we managed to ship some pretty cool stuff you should know about.  

🚢 The ShipLog has sailed

Last week was all about ShipLog, the new tool we launched to help you write beautiful changelogs quickly. If your 2024 resolution was to revive that changelog you haven't touched since 2014, this is your chance. 

🙂 Don't sleep on Spotlight 

Thanks to Thomas, you can now use Spotlight inside CommandBar to quickly jump to any Nudge (product tours, surveys, etc) or piece of content (answers, files, etc).

🎯 More targeting?

We just can't stop. 

Paul is pretty serious about our quest to obliterate annoying nudges. We know how showing everything, to everyone, all at once, no longer works. So we want to let you be as specific and intentional as possible when showing a nudge to a user. 

This means that you can now use user properties (not just metadata) to target CommandBar experiences. If you're familiar with analytics tools, you'll probably know what these are. If not, you can think of them as attributes unique to each user. Things like roles, activity, preferences, or any specific information you know about your users. By using these, you make CommandBar experiences more relevant and less intrusive. 

We're excited to announce ShipLog 🚀

A beautiful changelog that celebrates the makers behind the features you ship, is effortless to update, and of course is optimized for SEO and social. We've reimagined what a changelog could be – simple, fun, and human.

Things you're going to love:

• A lightweight editing experience
• Markdown and rich media support
• Schedule entries in advance
• SEO and social optimized
• Spotlight the builders behind each release

And of course it's free to try today:

shiplog.commandbar.com 🚀

The first CommandBar updates of the year are here.

You might know about our obsession with easy-to-use, non-annoying software. Many of the features we ship are built with your users in mind. But that's not to say we don't care about you (we do 🥹). 

From time to time, we want to make sure that how you're setting up experiences in the CommandBar app is as clear as possible. So as a follow-up to our dashboard decluttering from December, we've done some more cleanup to help you find things easier.  But first... 

🥸 Let's talk atrocious product tours

We're doing a deep dive into real-life examples of great and not-so-great product tours (we promise not to name and shame... much). Join us to learn how to build tours that your users don't dismiss immediately (or drop off before step 2).

Sign up here.

Now, onto the...

Product Updates

💫 Content, content everywhere

Traditionally, content you were bringing into CommandBar lived in many places (you were able to add stuff from HelpHub tab, Integrations, etc). This caused confusion. And we hate user confusion. So Maggie and Thomas brought everything together, in one place, under the Content tab.

Why should you care?

This makes it easier for you to find where to upload and sync things like help docs, website scrapes, answers, videos, and custom docs.

It also makes it easier for you to edit, sort, or filter this content (such as making a source available for training only or making it private).

🎯 When targeting nudges, you can now trigger “On event tracked” based on more detailed properties of the event. For instance, if a user clicks a button, instead of just responding to any button click, you can target the response based on specific properties of that event, like whether the button was for "checkout," "start now," or "pay now." Shoutout to Paul 👊 and keep your eyes peeled for more hyper-detailed tracking coming soon.

⏳ Wes added a new trigger for nudges: after time on page lets you define a period of time before you nudge a user with an experience (i.e. Show your shiny new feature 10 seconds after your user opens the app. You know, so you don't startle them.)

Humblebrag alert. While most teams get lazy before the holidays, we were in full beast mode last week and launched five features that make nudges less annoying. That's on top of our regularly scheduled product improvements.

The CommandBar team also got together at our HQ in San Francisco to learn competitor empathy with the help of Peregrine Falcons. If that sounds unhinged, it's because it was. This LinkedIn post from our CEO, James, will clarify it.

I wanted the team to feel what it was like to have an apex predator rush towards them at full speed. I felt this would help them understand what it feels like to be in a competitive deal against CommandBar. “How are they moving so fast?” “Why are they so intense?” “I need to get out of here.”

🗓️ Launch week

We want you to stop annoying your users this holiday season with intrusive, untimely pop-ups. Here's how:

• Snooze: your users can choose to snooze a nudge for a later time so they can still benefit from its contents without letting it get in the way.
• Rage clicks: choose to display a nudge whenever your users seem frustrated and are repeatedly clicking an area on your product. This way, you can point them to the right place to get help.
• Strike tracking: track users who seem annoyed based on how many times they've quickly closed a nudge without having had the chance to read it. You can use this dashboard to experiment with your nudges (customization, triggers, targeting) and improve your strike rate.
• Rate limits: choose to limit the number of product tours, announcements, and surveys your users will see in a given period.
• Draggable nudges: allow users to move around a nudge until they're ready to interact with it.

✅ HelpHub improvements

Kudos to Shannon for ensuring HelpHub now gracefully collapses when nudges or checklists are activated. RIP cluttered screens.

🍫 Simulate mode toolbar enhancements

Thanks to Wes, the toolbar now shows step counts in simulations, and a nifty pencil icon for quick edits. Making tour building twice as fast and half as frustrating.

😵‍💫 Nudge-ception handled

Nudges triggering other nudges will now show a simulate mode bar for those lost in the nudge matrix.

🔃 HubSpot two-way integration

We're now syncing data in both directions.

✨ Unified action menus

Maggie has worked her magic, and now there's a consistent, organized menu for actions across nudges, checklists, and more.

That's it for today. We'll see you soon.

Before we get into our latest and shiniest product updates, we wanted to welcome you to our new, improved changelog.

If you're reading this, you've probably already seen CommandBLOGUE, our little corner of the Internet where we treat software like art. You can read more about our philosophy behind this new blog here.

🖇️ HubSpot integration

You can now connect your CommandBar analytics to HubSpot. This does two things:

(1) it sends CommandBar-generated data to HubSpot (so you can view it alongside other product data) and

(2) lets you use HubSpot lists to define Audiences in CommandBar (for example, to create an audience for your most VIP users or your most disengaged users).

🧹 Sweep, sweep

We've tidied up your CommandBar experience, so all items previously accessible in the Studio are now available directly from the main dashboard sidebar. Saved you an extra click. 😌

We also consolidated the user (history, logout, etc) and settings menus into one, at the bottom of the sidebar.

📰 New terminology

In the spirit of making things clear and intuitive, we Marie Kondo-ed some of our terminology. Everything you use on CommandBar fits in one of two suites: Nudge and Assist.

Nudges are now broken down into Product Tours, Announcements, Surveys, and Questlists. For existing nudges, you don't need to do anything, they've been automatically categorized.

The Assist suite remains the same—Copilot, HelpHub, and Spotlight.

📊 Analytics overview

And while we're on the topic of analytics, we're bringing more data to your dashboards, starting with an Analytics Overview, which helps you glance over all of your high-level CommandBar metrics.

💁 New docs, new me

We've given our product docs a much-needed facelift: easier to navigate, up-to-date, and with a dose of writing pizzazz, so you don't feel like you're reading a user manual from the 80s. New CommandBar swag to whoever finds the most unhinged analogy hidden in there.

Check them out.

Product Tours are fantastic for showing users around your product. They can be sticky, ephemeral, or even circumstantial based on targeted user actions. But sometimes, a little nudge needs a little more context.

That’s where a quick Loom would be super handy, right?

Well, we’ve made it easier than ever to share loom videos in Product Tours!

Simply paste your loom link into the video block thingy, and we'll handle all the technical bits to make sure your loom videos are playable right within the step thingy.

Why is this Important?

• Nudging vs Showing: Guiding users on product walkthroughs is incredibly helpful for onboarding, but let’s be honest, there’s only so much you can squeeze in those little modals. Giving users the opportunity to watch a feature being explained is so much more powerful.
• Personalized Video Tours: With the launch of our Magic Tour Links, product tours can now be created and shared uniquely customized to individual users. With Loom links now auto-magically embedding playable videos, you have the flexibility to support your customers in even more engaging and delightful ways.

Give it a spin: To get started, go to: https://app.commandbar.com/editor/nudges > Paste the Loom link into a Video Nudge > Magic happens 🙌

❌ Random tours popping up and getting in the way of users’ flow is annoying.

💁 Precisely targeted tours that appear when users need them (like when they’re confused). Magic tour links let anyone on your team, in any role, create personalized in-product tours that you can share with a link. Create red-carpet-walkthroughs for sales prospects, embed tours in empty states, share them when a user writes into support, and more.

What’s better than AI answers? Streaming AI answers.

Streaming means responses from OpenAI come in piece by piece. So users can start reading answers before the whole thing is complete. In addition to feeling faster, it also feels cool 😎

🙅‍♂️⛔ Fixed Questlists obstructing your content

💁‍♂️✅ Draggable Questlists

Now users can easily move your Questlists side to side by simply clicking and dragging the Questlist header.

That means no more “The questlist is blocking me from doing the thing I need to do to complete the questlist”. Don’t give your users excuses!

Need ideas on how to use Questlists? Check out our docs for inspiration from the best checklist builders of our generation.

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.

What's better than succinct, hyper-relevant search results? Answers.

We first brought Instant Answers to our new widget, HelpHub, that we built specifically to showcase help content. Think of instant answers like FAQs -- short question and answer pairs that you can write manually or with the help of AI. They're great for users because they give them exactly the info they need to move on with their life, erm, session.

Now, those same Instant Answers can be made available through your users in your Bar. When a user searches, if an Instant Answer semantically matches their query, we'll show it (alongside any other relevant results like commands or help docs or records).

Generic text → lifeless nudges 🥱

Personalized text → ✨ nudges that users notice ✨

Now you can personalize nudge text with user variables. User variables are a placeholder for dynamic content -- like a user's first name, the name of their company, or anything else that is specific to the current user.

Our rule of thumb: whenever you can personalize a message with user-specific info, you should. It gives your users confidence that your nudges are relevant to them and aren't just generic messages that should quickly dismiss.

To use a user variable, just type some curly-curly braces and boom, you're good to go! For example, you can use "Hello {{context.firstName}}" to dynamically generate a greeting that includes the user's name. CommandBar will autocomplete user variables that you've used previously or are variable. You may already be familiar with the fact that user variables work exactly the same way in commands, and we'll be brining them to the rest of the CommandBar platform soon.

And if you want to make more user variables available, check out our Segment integration (to scoop up many user properties at once) or ask an engineer to instrument a simple addMetadata call using the CommandBar SDK.

In a web browser, using command+click (⌘+click or enter) on a link opens it in a new tab. But for commands in CommandBar, this wasn't the case. Instead, the command would only open in a new tab if the link command was set with a "new tab" setting. This could be confusing, so we've changed it.

Now, holding the command button and clicking with the mouse or hitting enter will open the link in a new tab. This works for both link commands and records.

Note that if you were previously using power select, that shortcut has moved to the shift key to make way for this change.

We're starting to roll out Audiences.

Audiences let you control who sees your nudges, Questlists, and commands. We're working to bring more compatibility for audiences to all of our widgets, but right now, it's available in nudges and questlists, with commands coming soon. Eventually, the Audiences tab will absorb the existing "Rules" tab so that you can use the same component across all of your widgets to target different subsets of users for different things.

Got any other ideas for audiences we should have built in? Let us know!

Over the past couple of weeks, we've shipped a few nudge improvements centered around pinned nudges. These make the pinned nudge's positioning much more intuitive — for example, now, pinned nudges are no longer hidden if half or more of its beacon is hidden. Additionally, clicking on a pinned element will now advance a tour in previews. We've also shipped some other improvements around nudge positioning when they're close to the page's borders to make sure that they are legible and intuitive for your users.

We've been working to make the standalone editor more consistent when used with Questlists and nudges. Now, when using the standalone editor, nudges and Questlists won't show up unless they are previewed.

To get a nudge or a Questlist to preview, head into the "Nudges" or "Questlists" tab and click on the nudge or Questlist you want to preview. Then, it'll show up.

This reduces clutter in the editor and makes it easier to focus on the widget you're trying to edit.

We just updated our documentation styling to be more legible. Previously, the text size was smaller, and the header sizes were inconsistent. We also improved background contrast, which should make reading easier on the eyes. Please let us know if you have any other suggestions for improving the legibility of our docs.

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 released a huge new feature: Product Tours!

Product Tours allow you to chain together nudges to walk users through your product or a piece of your product. Essentially, product tours are nudges that are triggered upon completion of a previous nudge.

Product Tours are a little different than Questlists — with Questlists, a checklist appears that the user can step through to onboard or gain familiarity with a feature. Product Tours are different in that they don't have the checklist component — they just allow a user to step through quickly, without having to worry about checking the items off. They're great for showing off something to the user quickly, without burdening them with a "to-do" list.

Here's what they look like in the editor:

You'll notice the "Add Step" button at the bottom that can be used to add as many steps as you'd like.

Product Tours are available now from the Nudges tab in the editor. Give them a try and let us know what you think!

We now highlight the tabs in the Bar that have search results, and if there are no results in the current tab, suggest the other tabs which do.

This makes for a better tabs user experience. Users are now directed to the best tabs for their search query.

For example, if they're looking for some information in the Videos tab, but there's only an article in the Help tab, they'll know to go to that to find what they're looking for.

This will automatically turn on for all accounts — no update is required on your end. Just make sure you have tabs enabled for some categories to see the new behavior.

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.

You can now add themes to your Questlists, which enable you to style them to match the rest of your app. Questlists allow you to create checklist-like action lists for your users to follow. These are great for onboarding and teaching your users new features.

Questlist themes allow you to customize the look and feel of your Questlists, giving them a cohesive appearance that blends seamlessly with the overall design of your app. With the ability to add themes, you can now make your Questlists more engaging and user-friendly, providing a better experience for your users as they complete tasks and learn about new features. To access the new theme feature, go to the settings menu within your editor and select the theme you want to adjust.

Previously, CommandBar's inline bar wasn't bootable within the shadow DOM, and themes would not apply correctly. Now the inline bar is fully bootable within the shadow DOM, ensuring proper functionality and theme compatibility.

The update also includes improvements to the CSS structure to enhance compatibility with other web frameworks (e.g., StencilJS, which uses the shadow DOM), making integrating with other applications and frameworks easier. Overall, this update provides a more seamless and efficient user experience when working with CommandBar's inline bar.

Now, any placeholders that you add to CommandBar via the settings panel will rotate when the input is selected. This can give your users a better understanding of what they can do with CommandBar, without having to open and close the bar to get different examples.

Rotating placeholders work with both the modal and the inline bar. When an inline bar is used, the rotation will only occur if the input is selected.

To add placeholders to your CommandBar, head into the settings panel in your editor and add a few placeholders. If you have placeholders already, the rotation will work as-is.

We've added support for user activity and usage data to be used in conditions. For example, we now natively support conditions such as "last seen at" and "number of executions."

These can be used for any conditions throughout CommandBar with zero engineering work. Namely, these conditions can be used to:

• Control when nudges get shown
• Control when commands are available
• Control when commands are recommended
• Control when Questlists get shown

Options include:

• Activity properties: First seen, last seen, # shortcuts executed, # sessions
• Usage properties: # opens, # deadends, # commands executed

Previously, you'd have to build these conditions yourself in JavaScript — now, they're just built in!

Previously, we bundled all dependencies in our self-hosted @commandbar/foobar NPM package. The dependencies are now separate, allowing for a smaller package size. This should enable faster loading times if you use the self-hosted version of CommandBar within your app. It is especially noticeable if your app includes multiple dependencies that CommandBar also requires.

Note that this only applies to the self-hosted version of CommandBar, not the traditional CommandBar installation.

Learn more about self-hosting CommandBar

We just redesigned our admin dashboard to make it more accessible and easier to use. Now, you'll see analytics right in front, plus a separate integrations tab and a more prominent standalone editor button.

In the integrations tab, you can connect all of your integrations, including Segment, Intercom, Zendesk, and more. Since everything is in one place now, it is easy to check what you have connected and what's not yet connected.

Additionally, we've made the "Open Editor" button more prominent. Give the new dashboard (as well as the new standalone editor) a shot, and let us know what you think!

Check out the new admin dashboard

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.

We have a big new feature: nudge form factors! Now, nudges can take on new form factors, including modals, popovers, and pins:

• As a modal, the nudge will pop up in the center of the page and overlay all other elements on the page. With this form factor, the user must click out of it to proceed. Use this form factor to show important messages that users need to take action on. This is also the simplest form factor - the nudge just shows up in the middle of your screen.

• As a popover, the nudge will hover over the page, but other elements on the page can still be clicked. Popovers can appear in the top left, top right, bottom left, and bottom right of the page and will push other nudges to the side when they appear. Popovers are great for most notifications, like "toast"-style popups — users can either dismiss them or click a button that you have provided. Also, note that popovers are draggable — for example, you could put a video or image in the nudge, so users can see rich content without exiting their existing UI flow.

• As a pin, nudges will "stick" to elements on the page. This is similar to a popover in that you can add a button to it, but it can be used to point out buttons, inputs, etc., that the user should pay attention to. These are great when combined with Questlists — they can be strung together to form an onboarding flow. Additionally, these are great for pointing out new features to users.

As before, you can create multiple nudges for many different scenarios in your app. Try creating a nudge, and let us know what you think!

Now, you'll get analytics events for previews. The events include the amount of time the user has viewed the preview, as well, so you can get a sense of how long your users spend reading previews.

You can also use this information to filter by the length of time your users have viewed previews. For example, you may decide to filter out preview events where the user has spent only a second or two viewing the preview.

See our SDK docs for more information.

To make creating nudges easier, we're adding some pre-built templates that allow you to more easily create a nudge. We'll be adding more templates in the future, but we're starting:

• Announcement, which is great for pointing out something important to users. For example, you could use this to tell users about a new item they need to take action on, or something like a required password change.

• Feature highlight, which pins to an element on your page and can point out a feature to users. It attaches itself to any element on your page.

• Upgrade nudge, which is a popover nudge that has a button. This is great for pushing users to perform some action, and brings the CTA front and center for them.

• Simple notification, which is a popover nudge with no action. Use this as a toast-style notification to let users know non-critical information.

Remember that these are just templates — they can be customized after you create them in any way, including adding images, help documents, and other rich content.

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!

To further expand the ability of nudges, we've made nudge actions optional. Even though this is a simple change, it opens nudges up to be used for notifications. These are great when you want to show the user some information, but the user doesn't necessarily need to act on that information.

To improve the accessibility of CommandBar for vision-impaired users, we've made some improvements to make the bar more usable with a screen reader. This includes modifying certain HTML tags, adding alternative text, and more. If you have users that use screen readers, CommandBar should be much more usable to them now.

Now, your users can search for content within your help document previews. This will turn on by default for you if you have our new help document sync set up.

This enables users to search for things that they have a problem with, and even if the title of the article doesn't match, the preview content will match. With this, searches will be less sensitive to the user inputting an exact phrase, and far more flexible.

In addition, we now highlight the matched text within the preview so your users can quickly scroll to the section they need help with. With CommandBar's help center sync, your users can get the help they need right on their current page without getting distracted.

Now, it's possible to add multiple pieces of metadata at once with addMetadata. Doing this, it's easy to push a bunch of data about a user or their account into CommandBar so that CommandBar can react with nudges, recommendations, or questlists.

If you have a JavaScript object that contains data about your users, simply pass that to addMetadata to have CommandBar start reacting to changes in those variables (after you connect the variables to commands, nudges, etc. of course).

Read more about the change in our SDK docs.

We recently introduced a new event primitive that allows you to send events to CommandBar, and then have CommandBar react to those events. While metadata is useful for passing values, events are ideal for situations where the user took some action or where there is a change in your app.

For example, you could push an event to CommandBar when the user does something like publishes a new article. Then, using those events, CommandBar can react and push out a nudge, etc. Additionally, you can have CommandBar only react when a certain number of events have occurred — for example, when the user has published three articles, you might want to suggest that they organize their articles into folders.

See our documentation here for more details

We're working on improvements to nudges, and these are some of our latest enhancements:

• A new UI: We have a new, more intuitive interface for creating nudges. Look out for more changes here in the near future.
• Call-to-actions on nudges: You can now define a CTA on the nudge. This will present a clear next step for your users and can drive more clicks to your commands.
• Draggability: Lastly, nudges are now draggable. Users can click to drag a nudge around. This also opens up some interesting use-cases going forward. Stay tuned!

Add a nudge.

A nudge is a popup you can show to users to inform or encourage them to take action. Nudges can be triggered by a command execution, or when specified conditions are satisfied.

Nudges are perfect for delivering contextual information or actions to your users. For example:

• Inspire users on a specific page to take an action (e.g. invite friends when on the followers page).

• Surface relevant documentation to users when they visit a specific page.

• Let users know they can make a follow-up action, like after executing a command.

Nudges are completely customizable, either using our SDK or by customizing the styles in the settings tab.

To get started with Nudges, take a look at our help doc.

Part of the magic of CommandBar (if we do say so ourselves) is that we incorporate help content and actions into a single interface. You can watch a video about a setting and also toggle that setting from CommandBar.

We designed command "next steps" to connect commands like these together. While a user is on a command, record, or record action that uses rich content (e.g., a preview, a video, or a help document), they'll see related "next steps" in the top right.

For example, let's imagine a user is on a video command "How to invite users to your workspace". There are several natural next steps after watching this video: (a) "Invite teammate", (b) "Go to team management". By setting both commands as next steps, the user can easily select either action.

Help centers are treasure troves of useful content for your users. The challenge is surfacing help content to users at the moment they need it. We developed help integrations to let users access help content via CommandBar, with only a few minutes of set up. After releasing this, we noticed some friction and drop off because users had to leave the tab to access the help document. Now, users can view help docs directly in CommandBar!

1. Open in bar: If enabled, users can open a help document in the bar on execution, without leaving the page. Though they'll still have the ability to open the document in another page.

2. Preview: If "preview" is enabled, we’ll display a preview in the right-hand side of the bar when the command is focused.

A few notes:

• Commands created via a help integration will sync to CommandBar using this new command type.
• With that said, you can use this command type for any HTML content, not just help documents.

CommandBar is a very visual product, so we built a new way for you to see all the features we've built and how they interact with each other: check it out at https://product.commandbar.com/.

Update (2023): the product playground is deprecated.

Help docs integrations are one of the quickest, easiest ways to empower your users with CommandBar. With just a few minutes, you can connect CommandBar to your help center and give your users instant access to your help docs. By popular demand, we have recently added integrations for the following providers: Freshdesk, Wix, WordPress, Insided, GitBook, Ghost, and ReadMe. We also still have our original integrations with Zendesk and Intercom.

If you use a help center that is not supported, please let us know!

Search tabs give users a superpower by making it both intuitive and easy to filter their search. There were previously just two limitations:

Search could only be filtered to existing search tabs Using a search tab required a mouse click Now, we've eliminated both of these pain points with slash filters. Slash filters allow users to filter on any record or command category, with just a few keystrokes.

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.

CommandBar helps your users get where they want ASAP and do what they want ASAP. Deadends are a great tool for improving here, since they're a direct line of sight into user intent. They reveal content that should be added to your app (features) and to your bar (commands, records, and synonyms).

We built fallback commands to meet your user's intent before it "deadends". As the name implies, fallbacks are backup options -- we'll show your fallback commands when the user's query yields no matches. Commands related to help, support, and search are excellent candidates for fallbacks.

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!

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.

Some content is easier for users to parse and use, when accompanied by an image. For any major category, whether a record or command, you can now render it as a "grid" and show each item as a card. All you need to do is choose what images to show!

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' });

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.

A lot of CommandBar customers use us in conjunction with a backend search vendor.

For Algolia customers, we've added a simple way to connect CommandBar to Algolia, so users can search for data in an Algolia index through CommandBar. You can find the integration in the Dashboard.

In essence, our Algolia integration:

• Validates that your Algolia API key has the correct settings to be used with CommandBar (has ACL enabled for search, browse, and listIndexes)
• Creates a record for the different data types stored in your Algolia index
• Produces a code snippet that can be pasted into your app to finish the process

Once the snippet is added, users will be able to query your index through CommandBar. Record settings can be edited through the Editor, as with any other records.

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!

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.

After, ahem, releasing CommandBar releases a few months ago, we're shipping some improvements based on tremendous feedback we've received. These changes address some common pain points when using the feature for version control.

The main theme of the changes is to make it easier to understand what changes are shipped when, to handle situations when multiple product owners are involved in the release process.

• A new UI allows you to view the release history for each environment (so you can see if someone made a release before you)
• Add notes and tags to environments. That way you'll know why the release was made, and you can note whether it involves bug fixes, improvements, new commands, new recommendation rules, etc.
• Compare changes across releases to understand the diff between the two.

And finally, we also heard that it can sometimes be useful to pin a version directly when init-ing. For example, if you want to make sure users in production see a certain version, you can guarantee that using the code below. Note that if you do this, you won't be able to make any changes to production (or wherever the version is pinned) without making a code change.

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!

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

• React 18 is fresh out of the oven, and CommandBar is proud to support it.
• Attaching default shortcuts to commands in the Editor now comes with a recording interface (instead of the old selector interface)
• We cater to a lot of end users at CommandBar, and sometimes those users access CommandBar on weaker internet connections. For these situations, we've improved how we handle backoff retry requests to preserve client-side resources.

We've added new SDK methods to make it possible to control the behavior of CommandBar categories via code. It's always been possible to add commands via code (though we still recommend the Editor for most situations). However, when creating programmatic commands it was still necessary to use the Editor to create categories to which those programmatic commands could be linked.

Now, you can simply specify a category string in CommandBar.addCommand, and command will create a category corresponding to that string -- making the programatic command "just work" without any corresponding config changes in the Editor. The programmatic category's settings can be adjusted using CommandBar.setCategoryConfig.

Code example

// Most common: define a new category inside of addCommand window.CommandBar.addCommand({ text: 'Go to Home', name: 'go_to_page_home', template: { type: 'link', value: '/home', operation: 'self' // how should the page open }, category: 'Navigation', });

// Less common: define a new category before using it window.CommandBar.setCategoryConfig( "Navigation", { search_tab_enabled: true } );

window.CommandBar.addCommand({ .... category: 'Navigation', ...

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.

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.

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, bottled for CommandBar connoisseurs.

• Enable search by customized shortcut. If an end user customizes a shortcut, we'll now let them query commands using that shortcut.
• Added autocomplete to the availability and recommendation condition editors. This makes it easier to reference context keys that are already defined (no more was it "context.userID or context.username?")
• If you've defined a router function for reloadless navigation, whenever you create a new navigation command CommandBar will default to using the router.
• When filtering by a major category, the results list will be fully expanded by default (an end user won't have to select "see more" to expand the category...since there's nothing below it.

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!

You've been able to interpolate context into command names for a while, but until now it wasn't possible to do the same thing with category names. No longer!

Use the familiar {{}} syntax to interpolate context into category names. This is useful when you want the category name to be personalized to the user or content the user is viewing.

Also, wherever you interpolate context, you can now provide a fallback value (using Handlebars syntax) to use in the event the context key used isn't available.

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

The Editor allows you and your team to make new commands and change commands quickly. But if you have a big team contributing to your CommandBar, you might want to control when CommandBar changes are made available to users.

Introducing Releases, release management for CommandBar. You can read about the details here but the gist is:

• If Releases is turned on, you can create a number of CommandBar environments that correspond to snapshots of the CommandBar config (the GIF shows Latest --> QA --> Prod).
• Changes made in one environment can be promoted to the next one.
• You can specify which environment to load in your CommandBar init method (e.g. to make Prod available to end users and QA available to your QA team)
• A CommandBar admin can also toggle the active environment from a new settings panel inside the CommandBar

Let us know if you'd like to try out releases so we can enable it for your organization. Then, you can turn on releases from the Editor Settings tab, under Releases!

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.

We're super excited to announce one of our most requested (and coolest) features ever! You can now allow end-users to bind their own keyboard shortcuts to commands in CommandBar, either overriding a default shortcut that you set from the Editor or attaching a shortcut to a command without a default.

We're so excited about this feature that we wrote a whole post on it. You can read more about why we built this and how it works here: https://www.commandbar.com/blog/user-customizable-shortcuts

If you have a CommandBar account and want to try this, follow the instructions here https://app.commandbar.com/identity-verification

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.

Availability conditions control when commands can be shown to a user. You can use them to disable commands for different classes of user (like disabling admin commands for regular users) or making certain commands available in specific parts of your app.

Commands that aren't available are not shown in the bar by default, in either the empty state or search state.

Sometimes, that can be confusing for users. For example, what if a colleague told them to use a command but their user group didn't have access to it? To them, it would seem as though the command didn't exist.

Disabled commands fix this problem by showing unavailable commands to the user (disabled, of course) along with a reason explaining why the command is disabled. You can add a different reason for every availability condition attached to the command.

How to turn on:

• Add an availability condition to a command
• Set a "Reason" for why the command is not available to the user

Your CommandBar's placeholder text is a great way to teach your users about CommandBar and what it can do. Up until now, you could only set a single placeholder text. Now, you can set multiple and CommandBar will rotate through them!

Here are some ideas

• Highlight new or useful commands commands: Try: "Open Foo" or "Invite new Bar"
• Tell users about what records can be searched: "Search for a teammate or a post"
• Talk about when to use CommandBar: "Can't find what you're looking for? Try searching here"

CommandBar lets product teams put relevant functionality in front of users, through availability and recommendation conditions. Today we're releasing Rules, which make it easier to define and reuse segment definitions across commands.

Rules are collections of more granular conditions -- using metadata or other properties of the user's session. You can define a rule once and then re-use it on any command. This is especially helpful when you need to define a complex set of conditions. Using a rule means you can also more easily share the definition with other folks on your team.

You can create rules in the new Rules section of the Commands tab, and you can apply them when defining availability and recommendation conditions for individual commands.

To make it easier to get started with rules, the Rules tab will scrape your commands for existing conditions to allow you to turn them into a rule.

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!

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(...);

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".

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:

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.

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 😊

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!

We redesigned the interface your users can use to give you feedback from CommandBar! Hopefully the fresher look makes it so fun to give feedback that your users give you even more :)

How can I turn this on? 🛠

By default, when a user's query does not return any search results, they are prompted to provide feedback. Additionally, at any point a user can click on the chat bubble icon in the bottom right of CommandBar to reach the feedback interface.

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!

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, }}

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.

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!

Event handlers log CommandBar analytics events to your own database. You'll see two new events show up:

1. closed (logged when the CommandBar is closed)
2. opened (logged when the CommandBar is opened)

How can I turn this on? 🛠

If you use an event handler, you'll see these events automatically!

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"!

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.

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.

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.

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".

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.

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

1. 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.
2. 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.

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.

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.

If you have a router configured in CommandBar, new link commands will use your router by default, since that's probably what you want to use.

How can I turn this on? 🛠

This is the default setting so no action is required. Note: you can still configure a link command to open a new tab or existing tab and force a page reload.

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 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.

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 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!

Grab them from: https://github.com/tryfoobar/types !

No more (window as any).CommandBar.(...)

How can I turn this on? 🛠

See above!

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!