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:
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.
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.