A quick guide to customize the look and feel of your support portal:

You can customize your portal to reflect your theme and give your users a memorable customer experience with Freshdesk. You can put up your logo and favicon and paint your self-service portal in your brand colors. If you're on the Pro plan or higher, you can also perform CSS customizations and the Enterprise plan lets you customize every inch of your support portal.


Configuring the branding of your portal: 





Under the Branding tab, you can customize the following for your portal:

  1. Logo: To stay on brand and make your portal recognizable for customers, you can upload your company’s logo. The logo of your support portal appears on the top fold near your portal's name and will be the first thing that is visible to your customers. We recommend a resolution of at least 60X60 and a 1:1 aspect ratio for your logo so that it is displayed correctly. 
  2. Favicon: Favicon is the image that will be displayed on your user’s browser tab. By uploading your desired favicon, you can make it easy for customers to recognize your webpage. We recommend a resolution of at least 60X60 and a 1:1 aspect ratio for your favicon so that it is displayed correctly. 
  3. Home page URL: This is the email address on which customers can reach out to you for any help. The email address provided will be displayed at the bottom of your portal. 
  4. Helpdesk Phone: You can enter the phone number of your company’s support helpline here to make it easy for customers to contact you. This number will be displayed at the bottom of your portal.

You can customize the look and feel of your portals to fit your brand guidelines for different products. 

Hover over the portal you would like to customize and click on the customize button:




Freshdesk provides an out-of-the-box WCAG compliant theme that you can use to improve the accessibility and usability of your portal. You can import up to 10 custom themes and choose from them for each of your portals. 


On the right side, you can preview how your selected theme looks on the Portal in real time. The preview changes dynamically based on your settings.




 

The following actions can be performed on themes:

  • View on portal: On clicking ‘View on portal’, you can preview your chosen theme on a new tab.
  • Download: You have the option of downloading a particular theme. The theme file will be sent in a .zip format to your email address. 
  • Rename: Change the name of a particular theme. 
  • Clone: You can clone a theme and customize it further.
  • Delete theme: Selecting this option will permanently remove the chosen theme.


Importing a theme: You can import a theme of your choice onto Freshdesk. To do so, click on the ‘Import Theme’ button. Please note that only .zip files can be uploaded. 


You can click on the ‘edit theme’ button if you wish to make changes to your themes. You can change your portal’s theme color and font here to ensure that it is in line with your brand’s guidelines:




For complete access to your portal’s theme, Freshdesk provides a source code editor that you can use to make granular-level changes. 


The source code editor is developer-friendly with the following:

  • Pre-defined placeholders for an error-free and quicker coding experience. 
  • Choice of editor themes to suit your personal preferences.


 

Here's a quick guide to the different placeholders you can use on the code editor. 


Placeholder What they mean
Portal Name  Name or title of the portal
Portal Language  Selected Portal language (English, French, etc.)
Portal Logourl Default or custom logo from the portal
Portal Linkback_url  Linkback URL from Freshdesk
Portal Contact info  Phone number specified in Freshdesk
Portal Login URL  Login URL of the support portal (also available to anonymous users)
Portal Logout URL
Portal Can Signup  True or false based on whether signups are allowed or not
Portal Signup URL  Signup URL of the support portal
Portal New ticket URL URL to the new ticket creation page
Portal New topic URL URL to create a new forum topic
Portal My topic URL URL to list the user's preferred topic
Portal Profile URL URL to the profile of a specific user
Portal Recent articles  List of recently added articles across the portal
Language name Returns the name of the current portal language
Language code Returns the code (language ID) of the current portal language
Language list Returns the list of supported languages of the portal
User name  Full name of the user using the support portal
User first name First and last names of the user, respectively portal. user.email
User second name string Returns the first and last names of the user respectively portal. user.email
Email  Email address of the user
Phone  Phone number of the user
Mobile  Mobile number of the user
Job title  Job title of the user
Time zone  Time zone configured in the user’s profile
Twitter ID Twitter account that has been added to the user account
Profile URL URL pointing to the profile of the user
User ID Unique ID of the user
Company name Company name that has been specified in the user’s profile
Is agent True or false based on whether the user is an agent or not
User role
Category name  Name of forum categories
Category description Description of forum categories
Category ID Unique ID of the forum category
Category URL URL pointing to a forum category
Category forums  Forums in the category based on the visibility
Category forums count Forums count in the category based on the visibility
Forum name Name of the forum
Forum description Description of the forum
Forum URL  URL pointing to the forum
Forum ID
 Unique ID of the forum
Type Name Type of the forum (announcement, ideas, problems, questions)
Filter list
Current topic filter Currently selected forum filter. This will work only on the respective filters page.
Allowed filters Filter name (translated label of filter) and a filter URL link to the filter
Category Category in which the forum is present
Topics  List of topics in the forum
Topics count  Count of all topics in the forum
Planned topics Planned topics that are available only for the "ideas" forum
Popular topics List of popular topics
Answered/Unanswered List of answered/unanswered topics
Solved/Unsolved List of solved/unsolved topics
Implemented topics Implemented topics that are available only for the "ideas" forum
Not taken topics  Not taken topics that are available only for the "ideas" forum
In-progress topics In-progress topics that are available only for the "ideas" forum
Deferred topics  Deferred topics that are available only for a "ideas" forum
Topic title  Title of the forum topic
Topic ID  Unique ID of the forum topic
Topic stamp  Stamp of the forum (planned, in progress, deferred, implemented, not taken) comes only for forum type as "ideas"
Topic author  User who created the topic
Created on Timestamp denoting when the topic was created
Topic votes Number of votes on a forum topic 
Topic views Returns the number of views on a forum topic
Merge
Is topic locked True or false based on whether the topic is locked or not
Is topic sticky True or false based on whether the topic is a sticky (that will appear on the top)
Is topic answered True or false based on whether the topic has been answered or not
THas comments True or false used to check if the topic has any comments or not
Posts in topic List of posts inside the topic
Comments count in topic Number of comments that have been created under a topic
First post in topic First post on the topic, created by the original creator
Last post in topic Last reply on the topic, which is the latest on the list
Topic URL URL to a particular topic in the forum
Topic forum Forum in which a topic is contained
Topic attachments Attachments that have been made to a topic
Topic last post URL URL to the last reply made to the forum topic
Voted by current user Forum topics in which users have voted (can be “I like this idea,” “I have this question,” or “I have this problem”)
Topic like URL URL used to like a particular topic. Use a data-method=”put” attribute in the link to work.
Topic unlike URL URL used to unlike a particular topic. Use a data-method=”put” attribute in the link to work.
My topics List of topics that have been created or are currently being followed by the user
My topics count Number of topics that have been created or are currently being followed by the user
Post ID Unique ID of the post
Post body Plain text version of the post
Post body HTML HTML version of the post
Created on Timestamp referring to when the post was created
Post user Information about the user who created the post
Post topic Topic in which the post is contained
Answer True or false based on whether there can be answers on the post or not
Attachments Attachment(s) that are available in the post
Post URL Unique URL of the post
Attachment URL URL to the attachment
Attachment thumbnail Preview image of the attachment file
Attachment type File extension of the attachment (.doc, .jpg etc)
Attachment name File name of the attachment without the extension
Attachment size File size of the attachment
Attachment is image True or false based on whether the attachment is an image or not
Category name Name of the solution category
Category description Description of the solution category
Category ID Unique ID of the solution category
Category URL URL pointing to the solution category
Category folders Folders in the category based on visibility
Category folders count Folders count in the category based on visibility
Folder name Name of the solution folder
Folder description Description of the solution folder
Folder ID
Unique ID of the solution folder
Folder URL URL pointing to the solution folder
Folder category Category in which the solution folder is contained
Folder articles Articles inside the solution folder
Folder articles count Count of articles inside the solution folder
Folder visibility Visibility of the folder 
Article title Title of the solution article
Article thumbs up Number of thumbs-ups for a solution article
Article thumbs down Number of thumbs down for a solution article
Article description Body of the solution article, including any formatting and images
Article plain description Body of the solution article in plain text
Article modified on Timestamp pointing to when the solution article was last modified
Article created on Timestamp pointing to when the solution article was created
Article ID Unique ID of the solution article
Article URL URL pointing to the article
Article tags Search tags that have been added to the solution article
Article attachments Attachment(s) that are present in the solution article
Article cloud files Cloud file attachment(s) that are present in the solution article
Article type Type of the article (Permanent or Workaround)
Article folder Folder in which the article is contained
Article category Category in which the solution article is contained
Article thumbs up URL URL, which will increase the thumbs up of the article by one. Use a data-method=”put” attribute in the link to work.
Article thumbs down URL URL, which will increase the thumbs down of the article by one. Use a data-method=”put” attribute in the link to work.
Recent articles List of recently added articles from across the portal
Related article List of related articles with the same title

 

If you are not done yet, you can save your work and continue later. You can always click on reset to return to the default colors if things become messy.