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.

note

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:

<script>
  window.BM.on('pageView', function(route) {
    console.log('Page changed', route.page, route.previousPage);
  });
</script>

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

Ready

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:

<script>
    window.BM.on('ready', function() {
        console.log('Bettermode is now ready!');
    });
</script>

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.

Event

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:

<script>
  window.BM.on('event', function(event) {
    console.log('New event', event);
  });
</script>

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:

Noun	Verb	Query/Mutation
Network Events
network	updated	updateNetwork
Space Events
space	created	createSpace
space	updated	updateSpace
space	deleted	deleteSpace
space	joined	joinSpace
space	left	leaveSpace
Collection Events
collection	created	createCollection
collection	updated	updateCollection
collection	deleted	deleteCollection
Post Events
post	created	createPost/createReply
post	updated	updatePost
post	deleted	deletePost
post	hidden	hidePost
post	unhidden	unhidePost
post	deleted	deletePost
Member Post Notification Settings Events
memberPostNotificationSettings	updated	updateMemberPostNotificationSettings
Reaction Events
reaction	added	addReaction
reaction	removed	removeReaction