Skip to main content

Installing in a web app

There are several options for installing Command AI 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 Command AI, 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 Command AI to appear. If you're inserting Command AI into an SPA, you probably want to paste it into your index.html file.

Booting Command AI​

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

The boot call also identifies the current user to Command AI. This is used for tagging analytics events, whether those events are sent to Command AI 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);