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:
- Content
- Toggle Button (used in beacon templates)
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).
Modal
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.