PostHog integration

CommandBar’s integration with PostHog works in two directions:

1. CommandBar —> PostHog: send CommandBar-generated events to PostHog, so you have a fuller picture of user engagement
2. PostHog —> CommandBar: use PostHog user properties and events for Who and When targeting in CommandBar

One-time configuration

Once configured, the integration will "just work" — no maintenance required. You will not need to make any code changes to handle new properties.

Configuring the PostHog integration

This is a 1-step integration!

Navigate to Integrations and click Enable on the PostHog integration card.

How does this work? What pages will events be sent from?

Events generated by CommandBar will now flow to PostHog from any page in your product where (a) CommandBar is booted and (b) PostHog is installed.

Why don’t I see events flowing through?

CommandBar sends events to PostHog via posthog.capture(). If you use a different PostHog SDK version, you can do the following:

1. Disable the integration

   

2. After you init CommandBar, put the following code in your app:

   window.CommandBar.addEventSubscriber((eventName, eventData) => {
     // replace the line below with your SDK method
     posthog.capture();
   });

Using PostHog data and events in CommandBar

You can (1) send PostHog user properties to CommandBar; and (2) send PostHog events to CommandBar.

Sending properties to CommandBar

You can send any of the existing user properties that you send to Posthog to CommandBar. Here’s a simplified code example:

// Your existing user properties
var userProperties = {
  plan: "pro",
  role: "admin",
  ...
};

// Passed to PostHog
posthog.setPersonProperties(userProperties);

// And additionally sent to CommandBar:
window.CommandBar.boot(userID, userProperties);

// Adding one-off or session only properties to CommandBar is easy too:
// Let's look at a quick example
// Setting one-time PostHog user properties
posthog.capture(
  'event_name',
  {
    $set_once: { userIsWorkspaceOwner: true },
  }
)

// Sending the same one-time property to CommandBar
window.CommandBar.addMetadata("userIsWorkspaceOwner", true);

Sending events to CommandBar

All events sent to PostHog can also be relayed to CommandBar. This allows you to treat any PostHog event the same way as a natively-generated CommandBar event.

// Many companies using PostHog events have a globally available function
// to track events. The simplest way to ingest all events is to add a
// CommandBar SDK call to trackEvent to this function.

const reportEvent = (event, eventProperties) => {
  posthog.capture(event, eventProperties);
  window.CommandBar.trackEvent(event, eventProperties);
};