Creating a Custom Theme for Freshdesk
Creating a custom theme for Freshdesk allows businesses to align their customer support portal with their brand identity, enhancing customer experience and making support feel like an integrated part of the brand. Freshdesk offers some default themes, but custom themes offer flexibility and control over every aspect of the design. Here’s a step-by-step guide on how to create a custom Freshdesk theme.
1. Understand the Components of a Freshdesk Theme
Freshdesk themes are primarily built using HTML, CSS, and JavaScript. Freshdesk also uses Liquid as its templating language, which allows for dynamic content rendering based on the portal’s data. Before you start customizing, familiarize yourself with the following files:
- Layout Files: These define the structure and layout of your support portal pages. Freshdesk uses Liquid markup within HTML files for templating.
- CSS Files: These files define the styling of your portal, controlling fonts, colors, spacing, and responsiveness.
- JavaScript Files: You can include custom JavaScript to add interactivity and additional functionality.
- Assets: These include images, fonts, and other resources your theme might need.
- Locale Files: These are JSON files for managing language-specific content if you have a multilingual support portal.
2. Set Up the Developer Environment
To create a custom Freshdesk theme, you need access to Freshdesk’s Developer Portal. Follow these steps to get started:
- Sign up for Freshdesk: Log in to your Freshdesk account. Only Freshdesk Admins can make theme modifications.
- Access the Themes Section: Navigate to Admin > Portals > Customize Portal > Themes. Here, you can see default themes and create a new custom theme.
- Download a Base Theme: Start by downloading a default Freshdesk theme. This provides a structured template with files for layout, CSS, JavaScript, and other assets.
- Set Up a Local Development Environment: While you can edit themes directly on Freshdesk, it’s better to develop locally for efficiency. You can use any text editor, like VS Code or Sublime Text.
3. Planning the Theme Customization
Before diving into code, plan your customization based on branding requirements, functionality, and customer experience. Here are some questions to guide your planning:
- What branding guidelines do you need to follow? This includes logos, brand colors, typography, and design standards.
- What functionality do you need? Consider elements like search, FAQs, customer forums, or additional widgets.
- How will you structure the portal? Define the navigation, home page layout, and structure of solution articles.
- What is the user experience (UX) priority? Ensure the portal is easy to navigate and accessible.
4. Customize the Layout Files
Layout files control the structure of your Freshdesk portal. Freshdesk supports the following layout files:
- header.html: Contains the code for the header, including navigation, logos, and user profile access.
- footer.html: Contains the footer code, including links to other sections of the website, contact information, and social media links.
- home_page.html: Controls the layout of the portal’s homepage.
- category_page.html, article_page.html: Control the layout of categories and articles in the solutions section.
Key Tips for Layout Customization
- Edit header.html: This is where you’ll add your company’s logo, navigation links, and any custom elements like a “Contact Support” button. Use Liquid syntax to dynamically display elements based on the user’s status (e.g., logged in or guest).
- Design the home_page.html: Design the homepage to showcase essential support resources. You may want to include a prominent search bar, popular articles, top categories, and quick links to common support sections.
- Use Liquid for Dynamic Content: Freshdesk supports Liquid, a powerful templating language that allows for conditional statements, loops, and filters. For example:
{% if user %}
<p>Welcome, {{ user.name }}!</p>
{% else %}
<a href="/login">Log in</a>
{% endif %}
5. Customize the CSS Files
CSS files control the design aspects of your Freshdesk portal. You can customize colors, fonts, layouts, and responsiveness here.
Key Styling Tips
- Import Custom Fonts: Use Google Fonts or import fonts from your brand’s typography. Place the
@import
link at the top of your CSS file:
@import url('https://fonts.googleapis.com/css?family=Roboto');
- Use Consistent Brand Colors: Define a color palette using CSS variables, which makes it easy to maintain consistency across the theme:
:root {
--primary-color: #0056b3;
--secondary-color: #ffcc00;
--background-color: #f5f5f5;
}
body {
background-color: var(--background-color);
color: var(--primary-color);
}
- Make it Responsive: Use media queries to adjust your theme for different screen sizes. Freshdesk themes should be mobile-friendly:
@media (max-width: 768px) {
.header, .footer {
flex-direction: column;
}
}
- Add Custom Animations and Effects: To make your portal visually engaging, add hover effects, transitions, or animations:
.button:hover {
background-color: var(--secondary-color);
transition: background-color 0.3s ease;
}
6. Add Custom JavaScript
Custom JavaScript can enhance the user experience with additional interactivity. Place your JavaScript code in scripts.js
or any other JavaScript file you link to in the layout files.
Key JavaScript Enhancements
- Add Event Listeners for User Interactions: For example, show a modal or alert when a user submits a form or clicks a button.
document.querySelector('.contact-btn').addEventListener('click', function() {
alert('Thank you for reaching out!');
});
- Enhance Search Functionality: Use JavaScript to create a more interactive search experience, perhaps by showing suggestions or loading search results dynamically.
- Track Analytics: If you want to track user behavior, you can add analytics scripts to log clicks, searches, and other activities.
- Add Interactive Elements: Implement dynamic features, like collapsible FAQs or tooltips, to enhance user experience.
7. Work with Assets
Assets include images, fonts, and icons that you might need for your theme. Upload your assets in Freshdesk under Admin > Portals > Customize Portal > Assets.
Tips for Managing Assets
- Optimize Images: Compress images before uploading to ensure the portal loads quickly. Use formats like WebP or SVG where possible.
- Use Consistent Iconography: If your brand has custom icons, include them here and reference them in your CSS or HTML.
- Organize Your Assets: Group assets in folders for easy management. For instance, create separate folders for icons, images, and fonts.
8. Multilingual Support with Locale Files
If your Freshdesk portal supports multiple languages, use locale files to manage translations. These files are in JSON format and store key-value pairs for text displayed in the portal. Here’s how to work with locale files:
- Edit the JSON Locale Files: You’ll find a default
en.json
file (for English) with key-value pairs like:
{
"welcome_message": "Welcome to our support portal",
"search_placeholder": "Search for answers..."
}
- Add Other Languages: To add another language, create a new JSON file (e.g.,
fr.json
for French) and translate the values. - Access Text Dynamically in Layout Files: Use the
t
filter to access locale values in your HTML files. For example:
<h1>{{ 'welcome_message' | t }}</h1>
9. Test and Debug
Testing is crucial to ensure your custom theme works across different devices and browsers. Here’s a checklist for testing:
- Cross-Browser Testing: Test in multiple browsers (Chrome, Firefox, Safari, Edge) to ensure compatibility.
- Device Responsiveness: Test on different screen sizes, from mobile to desktop, to ensure the design is responsive.
- Check for Broken Links: Ensure all links, including internal navigation and external resources, are functional.
- Test Interactive Elements: Verify that all JavaScript features and interactive elements work as expected.
10. Deploy the Theme
Once you’re satisfied with the customizations and testing, you can upload the theme to Freshdesk.
- Upload the Theme: In Freshdesk, go to Admin > Portals > Customize Portal > Themes, and upload your modified theme.
- Set the Theme to Live: Once uploaded, select the theme and click Apply Theme to make it live on your support portal.
11. Continuous Improvement
After deploying the theme, monitor user feedback and analytics. Use this information to make iterative improvements:
- Track User Feedback: Listen to users’ suggestions about design, usability, or functionality.
- Analyze Usage Metrics: Look at metrics such as search usage, most-visited articles, and common exit points to find areas for improvement.
- Regularly Update Content: Keep content fresh and relevant by updating articles, FAQs, and other resources on your portal.
Conclusion
Creating a custom Freshdesk theme requires planning, coding, and testing, but the benefits of a branded, user-friendly portal are significant. By aligning the portal with your brand identity and optimizing the user experience, you create a seamless support journey for your customers. The steps above provide a roadmap to help you build and launch a custom Freshdesk theme that stands out and adds value to your customer service experience.