Skip to main content

Installing in a web app

There are several options for installing CommandBar in a web app.

Using npm or yarn, you can install our package.

npm install commandbar

This approach is recommended because it makes it easy to upgrade the library when we publish updates.

After you’ve installed the package, to initialize CommandBar, add this code to your app. To ensure that it starts as fast as possible, add this code as close as possible to your app’s entry point, e.g. to index.js or index.ts:

import { init } from "commandbar";

// the argument is your organization's unique ID,
// which can be found in your Dashboard
init("0f3bdb73");

Option 2: Snippet​

Instead of installing our package, you can copy and paste use the following self-contained snippet, which is vanilla JavaScript and has no dependencies.

<script>
  var o="<YOUR_ORG_ID>",n=["Object.assign","Symbol","Symbol.for"].join("%2C"),a=window;function r(o,n){void 0===n&&(n=!1),"complete"!==document.readyState&&window.addEventListener("load",r.bind(null,o,n),{capture:!1,once:!0});var a=document.createElement("script");a.type="text/javascript",a.async=n,a.src=o,document.head.appendChild(a)}function t(){var n;if(void 0===a.CommandBar){delete a.__CommandBarBootstrap__;var t=Symbol.for("CommandBar::configuration"),e=Symbol.for("CommandBar::orgConfig"),i=Symbol.for("CommandBar::disposed"),c=Symbol.for("CommandBar::isProxy"),m=Symbol.for("CommandBar::queue"),d=Symbol.for("CommandBar::unwrap"),l=Symbol.for("CommandBar::eventSubscriptions"),s=[],u=localStorage.getItem("commandbar.lc"),f=u&&u.includes("local")?"http://localhost:8000":"https://api.commandbar.com",p=Object.assign(((n={})[t]={uuid:o},n[e]={},n[i]=!1,n[c]=!0,n[m]=new Array,n[d]=function(){return p},n[l]=void 0,n),a.CommandBar),b=["addCommand","boot","addEventSubscriber","addRecordAction","setFormFactor"],y=p;Object.assign(p,{shareCallbacks:function(){return{}},shareContext:function(){return{}}}),a.CommandBar=new Proxy(p,{get:function(o,n){return n in y?p[n]:"then"!==n?b.includes(n)?function(){var o=Array.prototype.slice.call(arguments);return new Promise((function(a,r){o.unshift(n,a,r),p[m].push(o)}))}:function(){var o=Array.prototype.slice.call(arguments);o.unshift(n),p[m].push(o)}:void 0}}),null!==u&&s.push("lc=".concat(u)),s.push("version=2"),r("".concat(f,"/latest/").concat(o,"?").concat(s.join("&")),!0)}}void 0===Object.assign||"undefined"==typeof Symbol||void 0===Symbol.for?(a.__CommandBarBootstrap__=t,r("https://polyfill.io/v3/polyfill.min.js?version=3.101.0&callback=__CommandBarBootstrap__&features="+n)):t();
const loggedInUserId = '12345'; // example
window.CommandBar.boot(loggedInUserId);
</script>

Copy and paste the snippet into your <head> tag on every page where you want the CommandBar to appear. If you're inserting CommandBar into an SPA, you probably want to paste it into your index.html file.

Booting CommandBar​

Regardless of which method you use, no CommandBar experience will be viewable in your app yet, because you need to boot it to make it available. Booting tells CommandBar it can make itself available to end users.

CommandBar provides a client-side SDK, which can be accessed using window.CommandBar. The boot method must be called when you want to make CommandBar available; without it, no CommandBar experience will appear.

The boot call also identifies the current user to CommandBar. This is used for tagging analytics events, whether those events are sent to CommandBar or a custom destination (or both).

A good place to put your boot call is in a handler that runs after a user successfully authenticates.

const loggedInUserId = "12345"; // example

// Simple boot (see SDK docs for more)
window.CommandBar.boot(loggedInUserId);