Content variables in Hubspot - How to have your content always up-to-date
Feb 19, 2019, updated Apr 4, 2019 | 6 minute read
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:
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 %}
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") }}
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);