When creating transactional/automated email templates in Hubspot, you are mainly limited to displaying information via personalization tokens. However, the “Programmable Email Beta” introduced additional capabilities to add your custom code and enrich your email content with further data.
Using custom code – like you are used to it within modules – within emails opens up a wide range of new possibilities. You can use HubL functions and HubL filters to fetch, manipulate and render various data.
Since many knowledge articles and community questions for creating programmable email templates exist, we will skip this step in our article. Instead, this article focuses on a small and quick hands-on example of rendering a custom deal line items table in your email.
First, you must create your HTML email template in your Design Manager. Use a self-describing name for your file and add some meta information. The meta information will help you to select your “custom email template” later on.
<!--
templateType: email
isAvailableForNewContent: true
label: Custom Deal Mail with Line Items
screenshotPath: ../images/deal-email.png
isEnabledForEmailV3Rendering: true
-->
Next, add all your custom HTML and CSS inline code to style your email. Use the content_attribute function to add content blocks with some default content you can easily change in the email designer. After that, we are ready to add some magic and render line item information for a given deal.
Since we want to use this email within a deal-based workflow, we can access deal information via the deal
variable in our template. We can fetch all relevant line items using the crm_associations function for the given deal. This function allows us to
- filter line items by condition,
- limit the number of line items to fetch,
- specify properties to return and
- sort the line items by an attribute.
The code block below shows the fetching of line items of the current deal. You need to provide the association category (HUBSPOT_DEFINED
) and the association type id (19
for Deal to Line Item) to receive the associated objects. The query
parameter enables us to filter objects using standard operators on the attributes (e.g., price__gte=100
for all line items with a price greater than or equal to 100). Furthermore, the query allows sorting objects by one or more attributes. With the properties
parameter, you can select the attributes to fetch from the line item objects. It is a simple, comma-separated list of strings.
set items = crm_associations(
deal.hs_object_id,
"HUBSPOT_DEFINED",
19,
"limit=10&orderBy=hs_position_on_quote",
"name,description,price,quantity",
true
)
Bonus: The attribute hs_position_on_quote
is undocumented by Hubspot, but it is responsible for ordering line items within a deal. So if you want to get the exact ordering as you see it in the Hubspot UI, you can add this sorting criterion to receive the same result within your email.
Putting it all together, below you can see the complete code of an HTML table rendering deal line items.
At last, add a new email by selecting the “automated” email type and selecting your custom email template. Now you can fill up your content blocks with custom content and add more personalization tokens if needed.
There you go, finish and save your email and use it within a deal-based workflow. Your customers will receive a nicely formatted line items table with all details you want to provide them.