Timeline Templates and Rendering

Events are rendered to the timeline based on the headerTemplate and detailTemplate set for the event type. The headerTemplate is used to show the event in the timeline, and the detailTemplate is used when someone views the details of the event.  Tempaltes are built using handlebards and markdown.  The properties for the event are inserted using handlebars, and the result is then processed as markdown, generating the HTML that will be shown in the timeline. Raw HTML is not allowed, and will be stripped by the handlebars and markdown processors.

Aside from HTML, everything else in Markdown is valid, including generating links like [This will be a link to hubspot](hubspot.com), that would be rendered to <a href="hubspot.com">This will be a link to hubspot</a>.

When rendering an event, all its properties will be available through handlebars, so you could do something like: # String property value is: {{StringProperty}}, which would render to <h1>String property value is: WhateverStringPropertyIs</h1>

The detail template supports a limited number of icons (the full list is in this file). Icons can be rendered through markdown by providing the icon name between colons. For example: You ordered a :hamburger:! would render the hamburger icon.

All the extra data in the event is also available through an extraData object. If extraData is an array, you can access it like an array: {{extraData[1]}}. If it's an object, you can access its attributes like an object: {{extraData.somethingExtra}}.

The event timestamp is stored as a number, counting the milliseconds since epoch. If you want to render it as part of your template, you can use the available date formatter helper, like: {{#formatDate timestamp }}{{/formatDate}}. This helper also supports different date formatting like:
{{#formatDate timestamp}}{{/formatDate}} -> Nov 18, 2014 3:47:11 PM
{{#formatDate timestamp format="short"}}{{/formatDate}} -> 11/18/14 3:47 PM
{{#formatDate timestamp format="long" time="false"}}{{/formatDate}} -> November 18, 2014
{{#formatDate timestamp format="full" time="false"}}{{/formatDate}} -> Tuesday, November 18, 2014

To see the HTML that will be generated by a template, you could use the same endpoint as the one to get an event:

GET /integrations/v1/{application-id}/timeline/event/{event-type-id}/{event-id}

Just add the header Accept: text/html. This would render the event using the headerTemplate. If you want to see the HTML generated by the detailTemplate, you can add the boolean parameter detail=true.