Customizing your customer support portal

Trakdesk allows you to completely customize and rebrand the look and feel of your customer support portal to reflect your brand with your own custom domain, logo, favicon, colors and buttons. Additionally, you can completely modify any of your customer support portal pages, adding your own CSS, Javascript and HTML codes.  

Uploading your logo and favicon

1. Login to your helpdesk as an administrator.
2. Go to the Admin Page.
3. Select the Rebranding option.
4. Under the Logo & favicon section. Select your logo and favicon file.
5. Once you have selected your logo or favicon, it will automatically be uploaded and applied.
   Logo: We recommend a size of ( 180px Width * 40px Height )
   Favicon: Standard ( 16px Width * 16px Height )

Customizing your helpdesk appearance

1. Select the Designer tab.
2. Once you are finished editing, hit on the Save changes button to apply your changes.
3. In the event you have made a mistake or would like to revert back to the Trakdesk default settings, you can simply do so by selecting the Restore Defaults button.

Note: If you would like to perform more advanced customizations to your helpdesk customer support portal, you can do so in the Themes section in the Admin page. This feature allows you to completely modify the underlying HTML, CSS, and Liquid for your helpdesk customer support portal.

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 select menu and select Add Theme.
5. Once the popup modal has opened, enter a name and a brief description for the new theme.
6. After you have finished adding the theme name and description, select the Submit button and that's all.
7. You can now edit the theme and customize each page with your custom html and css codes.
8. Once completed, you will need to set the theme as Default for your helpdesk to display your new theme.

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 your liking.

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.
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
• url_encode - url encode 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.

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, then hit on Submit.
4. Once the page has been added, you can modify it with your custom HTML and CSS codes.

Note: You will need to follow the Trakdesk Tags and Liquid template engine guidelines as mentioned above.