If you signed up before Aug 9, 2021, please click Previous plans to view your applicable plans.
In addition to letting you use your own HTML, CSS, and Javascript to customize your theme, Freshdesk uses the Liquid Templating Engine to extend the range of design ideas you can implement with your support portal. If you have heard about it before, or if you have used it with Shopify, you will know why this is good news. However, if you are new to this idea, read on.
Getting started with Liquid
For first-time users, Liquid can be described as a way to extend the capabilities of HTML and CSS beyond just static pages. It uses dynamic templates to represent different types of pages and is robust enough to let you do what you want without manually creating specific HTML files for separate pages in your support portal.
For example, thanks to Liquid, there is a single template called Solution Article View in Freshdesk, and making changes to it will affect the layout of all the solution articles throughout your support portal. You won't have to hard code the name of the solution article, its contents, or any of the details and repeat the whole process with every page. Instead, you will use placeholders inside your template which will dynamically change with each instance of your article.
<h2 class="heading">{{ article.title }}</h2>
<p>{% translate portal.article.modified_on %} {{ article.modified_on | short_day_with_time }}</p>
<article class="article-body" id="article-body">
{{ article.body }}
</article>
In the above example, {{ article.title }} and {{ article.body }} are placeholders. Thanks to Liquid, every time you open a solution article, it will automatically get replaced by relevant information or content. So when you (or your customers) look at the actual article in the portal, it wouldn't include any of the placeholders. Instead, it would be rendered just like a normal static HTML page.
In addition to dynamic placeholders, Liquid also lets you use control structures and advanced programming capabilities that aren't usually available in HTML. For example, you could use concepts like conditional statements, looping structures, custom variables, and more that are normally a part of backend languages like Ruby, Java or C. But please note that you will be using Liquid along with your HTML. It is not a separate language and works in conjunction with the portal’s code.
{% for category in portal.forum_categories %}
{% if category.forums_count > 0 %}
<div class="cs-s">
<h3 class="heading">
{{ category.name | link_to: category.url }}
</h3>
<div class="cs-g-c">
{% for forum in category.forums %}
<section class="cs-g topic-list">
<div class="list-lead badge-{{ forum.type_name }}">
{{ forum | link_to_forum_with_count }}
</div>
{{ forum | topic_list:5 }}
</section>
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
How does Liquid work in Freshdesk?
Freshdesk's Liquid integration is set up to work with the code editors you see in the portal customization section. It makes sure that the Liquid tags you use get converted automatically. Almost all of the pages in the support portal have a template that can be edited and it supports enough placeholders to help you change things extensively.
This structure helps you get a lot of design changes done in your support portal without doing a lot of work. Everything is editable online through the editors, and you don't have to worry about creating separate HTML, putting them into the right folder structure, or linking them together manually.
