Getting Started

Apps can inject custom scripts to the <head> or <body> tag of the community that they're installed on.

Many integrations such as Google Analytics, Google Tag Manager, Hotjar, Mixpanel, Intercom, etc. require injecting <script> tag into the <head> or <body>. Custom scripts unlock the ability to create such integrations.

Liquid support#

In many cases, you may need to conditionally add custom code. Tribe uses Liquid template engine to give developers more flexibility and freedom when it comes to injecting code.

note

Liquid support is not available in the Custom Code Snippet app.

Injected variables#

The following Liquid variables are available to be used by default:

member: logged in member object
network: the current network object
anonymize: boolean flag based on the fact that the member has accepted cookie consent or not. If they accept, it will be false, and if they don’t it’ll be true. Tribe hashes member ID when this flag is true.

Here are some examples on how you can use Liquid and injected variables together:

<script>
  console.log('Welcome, {{member.name}}!');
</script>

In the above example, Liquid will replace {{member.name}} with the name of the logged in member.

Variable filters#

You can use Liquid filters to change the output of a Liquid object or variable. As an example the following code will log the whole member JSON variable as string:

<script>
  console.log('{{member | json}}');
</script>

Conditions#

Applying conditions are very simple using Liquid. As an example, you may want to inject a script only when the member is logged in. Here is how it will look like:

<script>
  {% if member.username == "Guest" %}
    console.log('You are not logged in.');
  {% else %}
    console.log('Welcome, {{member.name}}');
  {% endif %}
</script>

Frontend Listeners and Actions#

All Tribe communities have access to a predefined object called window.Tribe.

Using window.Tribe (or in short Tribe) you can listen on certain frontend events and perform frontend actions such as opening a modal, confirmation, alert, or toast.

As an example, you can listen on page views using the following script:

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

Or you can show a toast like this:

<script>
  window.Tribe.on('ready', function() {
    window.Tribe.toast({
      title: 'Yayyy!',
      description: 'You are awesome!',
      status: 'success'
    })
  })
</script>

You can learn more about the Tribe frontend listeners and actions in the following sections.

note

Please note that you have access to window.Tribe 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.

info

Tribe frontend actions are currently in Beta and not available to all customers.