Tribe Community Platform

The Tribe Community Platform Developer Hub

Welcome to the Tribe Community Platform developer hub. You'll find comprehensive guides and documentation to help you start working with Tribe Community Platform as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Customizing using JavaScript

There are many cases where you may want to modify an element or component on Tribe using JavaScript or run a JavaScript snippet in the following cases:

  • When the page is fully loaded, similar to window.onload or jQuery.onReady.
  • When the URL is changed after user clicks on an internal link.

You can achieve the above cases using the following Tribe JS Interfaces:

🚧

You have to implement the following interfaces in the <head /> tag. Adding the <script /> tag to <body /> may not work in some cases.

Tribe.onReady

If the Tribe.onReady is implemented as a function, it'll be called when all the necessary scripts are executed and components are rendered.

This function will be only called once after the user refreshes a page. Here is an example of implementing this function:

window.Tribe = {
    onReady: function(pathname) {
        console.log('User landed on ' + pathname);
    }
}

Tribe.onPageChange

Since Tribe is a Single-Page App (SPA) it's not reloading your custom scripts on when user navigates to other internal pages through links.

For instance, let's say you want to add a button to the header of /topics page. You can add the button by adding a custom script to the <head /> tag of your community. The script will be running fine if the user lands in /topics page directly.

But, if the user is on /groups page and then navigates to /topics the scripts that you've added to <body /> or <head /> tags will not rerun. Therefore, the button will not be added to /topics page.

To solve this issue, we've implemented a JS interface called Tribe.onPageChange. If this function is implemented, it'll be called every time user navigates to a new page. You can achieve the behavior mentioned in the above example using the following code:

window.Tribe = {
    onPageChange: function(pathname) {
        if (pathname === '/topics') {
            // Modify the DOM to add the button here.
        }
    }
}

📘

Tribe.onPageChange runs both when the page is initially loaded and after the user navigates to other pages.

Implementing Both Interfaces

Below, you can see how to implement both interfaces:

window.Tribe = {
    onReady: function(pathname) {
        console.log("This will run once after the page is loaded or refreshed.");
    },
    onPageChange: function(pathname) {
        console.log("This will run everytime user navigates to a different page and the first time page is loaded or refreshed.");
    }
}

Updated 3 months ago


Customizing using JavaScript


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.