Content variables in Hubspot - How to have your content always up-to-date

Feb 19, 2019, updated Apr 4, 2019 | 6 minute read

Let’s say you want to include number of company employees in your blogpost, landing page or custom module. You just write a simple number, right? Fast forward few months, company is growing and you need to update this number. Are you 100% sure you know where you can find all of its occurences?

At Netguru we weren’t. Landing pages created in various points in time had number of employees ranging from 200 to 600. Updating all of it separately was not very feasible, so I prepared a simple solution using HubDB and HubL macros.

Instead of writing “We have 600 employees”, we can now use “We have {{ variables(“number_of_employees”) }} employees”, which will still display as “600 employees” for users. But I can change this number in one place, and it will be updated everywhere on our website.

This place is HubDB database:

HubDB

How to do it

You need to define two columns in your HubDB: variable_name and variable_value.

Now place this macro at the top of your templates:

{% macro variables(variable_name) %}
  {% for row in hubdb_table_rows(675328) %}
    {% if row.variable_name == variable_name %}
      {{ row.variable_value }}
    {% endif %}
  {% endfor %}
{% endmacro %}

Remember to replace 675328 with your own HubDB id

You will propably have to remove all spaces, tabs and new lines inside macro definition, because they are rendered together with row.variable_value. If you use Javascript to render content (ex. React) those new lines will break your code.

This is macro definition above as safe one liner:

{% macro variables(variable_name) %}{% for row in hubdb_table_rows(675328) %}{% if row.variable_name == variable_name %}{{ row.variable_value }}{% endif %}{% endfor %}{% endmacro %}

Usage

Once you have your variable defined in database, just paste this piece of code inside your content:

{{ variables("NAME") }}

Replace NAME with variable name from database (ex. employees)

Final snippet for employees will look like this:

{{ variables("employees") }}

Limitations

  • If you duplicate the same variable name in HubDB, both of them will be displayed together. This is the limitation of HubL itself and I wasn’t able to find any workaround.
  • If you change variable name, all snippets in content will stop working for old variable name

Variables in Hubspot custom modules

If you put {{ variables("employees") }} into text fields in custom modules, it won’t be parsed and instead it will display {{ variables("employees") }}. This is because custom module is completely separate from templates and has no access to its macro definition. You need to put macro code in every custom module separately.

Then you can use the macro for custom module fields:

{{ variables(module.text_field|trim) }}

I’m using |trim filter to make sure accidental space at the end of text field won’t break the variable (“employees “), which is hard to debug.

We’re not done yet. You propably want custom modules to be actually usable by users. We don’t always want to reference variable, but put a normal text into the field. You can use checkbox for that:

{% if item.is_variable %}
  {{ variables(item.value|trim) }}
{% else %}
  {{ item.value }}
{% endif %}

At Netguru we’re using React and this is the full code for one of our custom modules:

params = {
  items: [
    {% for item in module.statistics %}
      {
        icon: "{{ item.icon.src }}",
        {% if item.is_variable %}
          number: '{{ variables(item.value|safe|escapejs|trim) }}',
        {% else %}
          number: "{{ item.value|escapejs }}",
        {% endif %}
        text: "{{ item.description|escapejs }}"
      }
      {% unless loop.last %}
        ,
      {% endunless %}
    {% endfor %}
    
  ]
};
renderComponent('Statistics', params);

Hubspot Marketing Automation Netguru