Create Mesmerising themes and impress your customers

Bring your creativeness and design to your customer support portal. Running on the powerful Liquid template engine, you can completely modify any of your customer support portal pages, adding your own CSS, Javascript and HTML codes.

Trakdesk allows you to setup multiple themes for different events or seasons of the year. Each theme consists of its own default pages, custom pages and assets. Themes can also be imported and exported at any time.

Adding a Theme

1. Login to your helpdesk as an administrator.
2. Go to the Admin Page.
3. Select the Themes option.
4. At the Top Right of the page, click on the drop down menu and select Add Theme.

   

5. Once the popup modal has opened, enter a name and a brief description for the new theme and click on the submit button.

   

6. Once the new theme has been successfully added, you can them edit the theme and customize each of its pages with your custom html and css codes.
7. Now, you will need to set the theme as Default for your helpdesk to display your new theme.

   

8. Note: By default, the Trakdesk default theme will be inserted including all of its default pages and assets. You can then customize each page and asset to meet your needs.

Editing a Theme

1. Select the Theme you would like to customize.
2. Then select the Page you woud like to edit.

   

3. Once you have selected the page you would like to modify, the page and code editor will open.

   

4. After you have finished editing the codes, hit on the Save Changes button to apply your change.
5. Note: You will need to modify the pages using the Trakdesk code tags and the Liquid template engine. We will attempt to validate your codes when saving. However, you should always make a copy of the codes and take extra precautions when modifying. Any error will prevent the page from displaying in your customer support portal.

Standard Liquid Filters

• append - append a string e.g. {{ 'foo' | append:'bar' }} #=> 'foobar'
• capitalize - capitalize words in the input sentence
• ceil - rounds a number up to the nearest integer, e.g. {{ 4.6 | ceil }} #=> 5
• date - reformat a date (syntax reference)
• default - returns the given variable unless it is null or the empty string, when it will return the given value, e.g. {{ undefined_variable | default: "Default value" }} #=> "Default value"
• divided_by - integer division e.g. {{ 10 | divided_by:3 }} #=> 3
• downcase - convert an input string to lowercase
• escape_once - returns an escaped version of html without affecting existing escaped entities
• escape - html escape a string
• first - get the first element of the passed in array
• floor - rounds a number down to the nearest integer, e.g. {{ 4.6 | floor }} #=> 4
• join - join elements of the array with certain character between them
• last - get the last element of the passed in array
• lstrip - strips all whitespace from the beginning of a string
• map - map/collect an array on a given property
• minus - subtraction e.g. {{ 4 | minus:2 }} #=> 2
• modulo - remainder, e.g. {{ 3 | modulo:2 }} #=> 1
• newline_to_br - replace each newline (\n) with html break
• plus - addition e.g. {{ '1' | plus:'1' }} #=> 2, {{ 1 | plus:1 }} #=> 2
• prepend - prepend a string e.g. {{ 'bar' | prepend:'foo' }} #=> 'foobar'
• remove_first - remove the first occurrence e.g. {{ 'barbar' | remove_first:'bar' }} #=> 'bar'
• remove - remove each occurrence e.g. {{ 'foobarfoobar' | remove:'foo' }} #=> 'barbar'
• replace_first - replace the first occurrence e.g. {{ 'barbar' | replace_first:'bar','foo' }} #=> 'foobar'
• replace - replace each occurrence e.g. {{ 'foofoo' | replace:'foo','bar' }} #=> 'barbar'
• reverse - reverses the passed in array
• round - rounds input to the nearest integer or specified number of decimals e.g. {{ 4.5612 | round: 2 }} #=> 4.56
• rstrip - strips all whitespace from the end of a string
• size - return the size of an array or string
• slice - slice a string. Takes an offset and length, e.g. {{ "hello" | slice: -3, 3 }} #=> llo
• sort - sort elements of the array
• split - split a string on a matching pattern e.g. {{ "a~b" | split:"~" }} #=> ['a','b']
• strip_html - strip html from string
• strip_newlines - strip all newlines (\n) from string
• strip - strips all whitespace from both ends of the string
• times - multiplication e.g {{ 5 | times:4 }} #=> 20
• truncate - truncate a string down to x characters. It also accepts a second parameter that will append to the string e.g. {{ 'foobarfoobar' | truncate: 5, '.' }} #=> 'foob.'
• truncatewords - truncate a string down to x words
• uniq - removed duplicate elements from an array, optionally using a given property to test for uniqueness
• upcase - convert an input string to uppercase
• urlencode - url encode a string
• urldecode - url decode a string

Tags

Tags are used for the logic in your template. New tags are very easy to code, so I hope to get many contributions to the standard tag library after releasing this code.

Here is a list of currently supported tags:

• assign - Assigns some value to a variable
• capture - Block tag that captures text into a variable
• case - Block tag, its the standard case...when block
• comment - Block tag, comments out the text in the block
• cycle - Cycle is usually used within a loop to alternate between values, like colors or DOM classes.
• for - For loop
• break - Exits a for loop
• continue - Skips the remaining code in the current for loop and continues with the next loop
• if - Standard if/else block
• include - Includes another template; useful for partials
• raw - temporarily disable tag processing to avoid syntax conflicts.
• unless - Mirror of if statement

Adding a custom page

1. Select the Theme that you would like to add the custom page to.
2. Then click on the Add Page button, the popup modal will appear.

   

3. Enter a name and URL for your custom page. You can also set the page status and enable anonymous access.
   Note: Enabling anonymous access will remove all restrictions so anyone can access the page regardless if they are signed into the customer portal or not.
4. Click on the Submit button to save
5. Once the page has been added, you can then modify it with your custom HTML, JS and CSS.

Editing a custom page

Trakdesk allows you to completely customize and develop your custom customer portal pages to your liking . You can add your own content, HTML, Javascript and CSS code. You can also use trakdesk liquid template tags for dynamic content.

In addition, you can also protect parts of your custom pages so only signed in users are able to view the content. For example; Lets say you setup a page with anonymous access and add content that can be accessed by anyone, but you would also like to protect parts of the content to be visible only to signed in users.

Example: "[ protected ] Content [ /protected ]" with no spaces between [^protected^]

Using the protected content tag will hide the content and instruct your users to sign in to view the content.