Liquid templating

Helptail supports Liquid templating for Outbound streams and, partially, for Inbound streams. This allows you really customise how your banners, modals and other outbound streams look like. You can do really powerful things with. For a primer on what Liquid is, head over to the Liquid docs.

Many templates in Helptail come with (at least a bit of) Liquid templating added. Usually you don’t need to change it, but if you want, you can do so.

Where can I use Liquid templating?

You can use Liquid templating in two places for both inbound- and outbound streams:

If you created any streams, you might have seen Liquid already being used.

Custom liquid filters

Helptail adds a few custom filters. They add some nice extra’s to your streams. From customising the look to extra functionality.

Iconify

For use in the Toggle Button. This will turn a specific string into an icon.

{{ 'iconName' | iconify: size }}

Valid 'iconName' value is: annotation, bell, chat, gift, speakerphone, support, question-mark. Valid 'size' value is 0..60.

UnreadBadge

This can be used in the Content in Outbound Streams. It will show the number of unread entries for the current user.

{{ 'DefaultNumber'  | unread_badge: 'className' }}

Valid 'DefaultNumber' is any number (0..9). 'className' can be any Css class available on your site (Note: that this doesn’t show up in the preview of your Helptail dashboard).

Can be used for inbound streams with the modal type. Puts the form (and any other content you add) in a modal layered on top of your page.

{{ form | modal: 'Position' }}

Valid 'Position' is top left, top center, top right, center left, center center, center right, bottom left, bottom center and bottom right.

Backdrop

The backdrop filter is to be used together with the modal filter and adds a (partially) opaque layer over your page.

{{ form | modal: 'Position' | backdrop: 'Colour' }}

Valid 'Colour' is any valid Css backgroundColor, eg. rgba(0, 0, 0, 0.5).

TextColour

You can use the textColour within any Liquid tag. It changes the text colour for the element.

{{ 'Text' | textColour: 'hexColour' }}

Where 'Text' is the text you want to show and 'hexColour' is any hex code, eg. #1D4ED8.

BgColour

You can use the bgColour within any Liquid tag. It changes the background colour for the element.

{{ 'Text' | bgColour: 'hexColour' }}

Where 'Text' is the text you want to show and 'hexColour' is any hex code, eg. #EFF6FF.

Usage of multiple filters

You can use multiple filters with Liquid too. They are applied from left to right. Take the following example:

{{ 'bell' | iconify:20 | textColour: '#1D4ED8' | bgColour: '#EFF6FF' }}

This will show a bell icon with the size of 20 and a text colour of nice, ocean blue and a light blue background colour.