Skip to main content

Custom Scripts

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.

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>