Installing in a web app
There are several options for installing CommandBar in a web app.
Option 1: npm/yarn [recommended]
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="https://api.commandbar.com",a=void 0,t=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 e(){var e;if(void 0===t.CommandBar){delete t.__CommandBarBootstrap__;var c=Symbol.for("CommandBar::configuration"),d=Symbol.for("CommandBar::disposed"),i=Symbol.for("CommandBar::isProxy"),m=Symbol.for("CommandBar::queue"),u=Symbol.for("CommandBar::unwrap"),s=Symbol.for("CommandBar::eventSubscriptions"),l=[],p=localStorage.getItem("commandbar.lc");p&&p.includes("local")&&(n="http://localhost:8000",a=void 0);var f=Object.assign(((e={})[c]={uuid:o,api:n,cdn:a},e[d]=!1,e[i]=!0,e[m]=new Array,e[u]=function(){return f},e[s]=void 0,e),t.CommandBar),v=["addCommand","boot","addEventSubscriber","addRecordAction","setFormFactor"],b=f;Object.assign(f,{shareCallbacks:function(){return{}},shareContext:function(){return{}}}),t.CommandBar=new Proxy(f,{get:function(o,n){return n in b?f[n]:"then"!==n?v.includes(n)?function(){var o=Array.prototype.slice.call(arguments);return new Promise((function(a,t){o.unshift(n,a,t),f[m].push(o)}))}:function(){var o=Array.prototype.slice.call(arguments);o.unshift(n),f[m].push(o)}:void 0}}),null!==p&&l.push("lc=".concat(p)),l.push("version=2"),a&&l.push("cdn=".concat(encodeURIComponent(a))),r("".concat(n,"/latest/").concat(o,"?").concat(l.join("&")),!0)}}e();
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 widgets ill 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.
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);