Skip to main content

Frontend Listeners

You can use window.BM.on (or in short BM.on) to listen for certain frontend actions and events such as page views, new events/actions, and readiness of the Bettermode app.


Please note that you have access to window.BM in the Custom Snippet App as well. This means for basic use-cases you don't need to create an app to access the frontend listeners and actions.

Page View

Bettermode is a single-page app, therefore, it does not reload the whole page when you navigate to different pages.

As a result, Bettermode provides a listener that is triggered whenever member navigates to a new page. This can be useful when you want to do a certain action on every page view (e.g. sending page views to Google Analytics), or modifying a DOM object on certain pages.

You can use the BM.on('pageView') like this:

window.BM.on('pageView', function(route) {
console.log('Page changed',, route.previousPage);

Please note that route.previousPage is undefined when the page is loaded initially or is reloaded.

The above script will log the following when a member navigates from the homepage to spaces page:

Page changed / /spaces


In many cases when you want to perform a certain action, you want to make sure the Bettermode app is ready. As an example, you cannot perform Bettermode frontend actions before the whole app is loaded.

You can use BM.on('ready') listener to achieve this:

window.BM.on('ready', function() {
console.log('Bettermode is now ready!');

This will console log Bettermode is now ready! once Bettermode app is loaded. At this point, you can use all Bettermode frontend actions. You can learn more about Bettermode frontend actions in the next section.


In some cases, you may want to do a certain action when another action happens. As an example, maybe you want to show a toast when a new post is created, or you want to track number of times members reacted to posts and send them to an analytic tool.

You can simply listen on new Events using the following snippet:

window.BM.on('event', function(event) {
console.log('New event', event);

The above script will log the following when a new post is created:

New event {
noun: "post",
verb: "created",
object: {
id: "ZdnlDxqtgmZD270",
title: "Hello World!",
// The rest of post object
variables: {
spaceId: "GH4aeYWbyGXM",
input: {
// The input sent to Bettermode GraphQL API

The events are triggered when certain API calls are made. An event object has 4 main attribute noun, verb, object, and variables.

  1. noun corresponds to the object that was affected.
  2. verb shows the action that affected the noun.
  3. object is the response of the API call.
  4. variables is the data sent in the API call.

Here is a list of all events available on Bettermode:

Network Events
Space Events
Collection Events
Post Events
Member Post Notification Settings Events
Reaction Events