Welcome to a step-by-step guide on enhancing your Zendesk Help Center! By the end of this tutorial, you'll have successfully implemented an option for visitors to download or export articles as PDFs in a professional format using the printing function of their browser (Ctrl+P). This feature not only adds value for your customers by allowing them to easily download articles for offline use, sharing, or printing, but also enhances the overall user experience of your help center.
This guide is tailored for those using the Copenhagen Zendesk theme. If you're using a custom theme, you might need to adjust some CSS class names.
💡 Smart tip: Why not try our Articles PDF Export app to create beautiful, branded PDF manuals from your Zendesk articles? Perfect for support teams looking to provide polished, customer-facing documentation with ease. Start your free trial today! |
What Will This Implementation Achieve?
This implementation will transform the way articles are exported from your Zendesk Help Center. When a customer uses the print function, it won't just print the webpage as-is. Instead, they will get a 'prettified' version of the article. This version includes:
A Branded Cover Page: The first page of the PDF will display your company's logo, the article's title, and essential copyright information, creating a professional and branded look.
Clean Content Layout: The body of the article will be devoid of the usual website 'noise' such as navigation bars, side menus, or footers. What remains is the pure content of the article, neatly formatted and ready for PDF export.
Why is this Important?
Offering this option in your help center is not just about adding another feature; it's about understanding and catering to your customers' needs. With this functionality, your customers can easily download articles for offline reading, share them in a standardized format, or print them for reference in a clear and professional layout.
Now, let's dive into the step-by-step process of setting up this feature in your Zendesk Help Center theme.
Step-by-Step Guide
Step 1: Access Theme Code Editor
Firstly, access the Zendesk Guide and open the Help Center theme code editor. You can find detailed instructions on how to do this in Zendesk's guide here.
Step 2: Edit the Article Page Template
In the theme code editor, locate and open the article_page.hbs file. This template controls how articles are displayed in your help center. For more insights into Zendesk page templates, check out this article.
Step 3: Insert Cover Page Code
Within the article_page.hbs file, find the <div class="container"> element.
Here, you'll insert a new div block:
<div class="print-cover-page">
<div class="top-items">
<img src="https://link/to/your/logo.png" alt="Company Logo" id="coverLogo" />
<h1 style="">{{article.title}}</h1>
<div class="copyright-info">
© 2023 YourCompanyName Ltd. All Rights Reserved.
</div>
</div>
</div>This code creates a cover page for the printed PDF, featuring your company logo, the article's title, and copyright information. It remains hidden until print mode is activated.
Step 4 (optional): Printing Articles with Videos
You might also want to consider how videos are handled in the printed version of the article. If your article includes videos, you can provide a clickable link to the video in the printed PDF, rather than trying to print the video itself.
To do so, open each article with videos in the Zendesk Guide Editor, enable the HTML code view, find the video element (it can be either an <iframe> or a <video>) and add the following link under it (make sure to adapt it for each video!):
<a href="link to video" class="video-link">Title of the video</a>This link will be visible only in the printed version.
Step 5: (Optional) Add Download Link/Button
To enhance user experience, consider adding a "Download" link or button that opens the print dialog. In the article_page.hbs file, locate <nav class="sub-nav"> and append this line:
<a href="javascript:window.print();">Download</a>This creates a convenient way for users to initiate the download/print process directly from the article page.
Step 6: Update CSS for Printing
Now, open the style.css file in the theme code editor and add the following code at the end. This code is crucial as it styles the article content for printing, ensuring a clean, professional look.
/* Adjust content for printing articles */
.print-url, .print-cover-page, .video-link {
display: none;
}
@media print {
@page {
size: A4;
}
.article-content {
width: 100%;
}
.article {
margin: 25pt 40pt;
}
img {
max-height: 187.5pt;
width: auto;
}
/* Header adjustments */
header.article-header {
margin-top: 0;
border-top: none;
}
/* Heading adjustments */
h1 {
font-size: 24pt;
margin-top: 0cm;
}
h2 {
font-size: 18pt !important;
font-weight: bold;
border-top: 1.125pt solid darkgray !important;
border-bottom: none;
margin-top: 45pt !important;
padding-top: 37.5pt !important;
margin-bottom: 10pt !important;
}
h3 {
font-size: 14pt;
margin: 22.5pt 0 7.5pt !important;
font-weight: bold;
}
h4 {
font-size: 12pt;
margin: 13.5pt 0 7.5pt !important;
}
h2 + h3, h3 + h4, h4 + h5 {
margin-top: 4.5pt !important;
}
p {
font-size: 12pt;
margin-bottom: 4.5pt !important;
}
/* Specific elements to hide - you can add more here depending on your theme */
.article-author, .article-subscribe, .article-relatives, .article-comments, .powered-by-zendesk, .container-divider, .article-sidebar, #navbar-container, nav, footer, .header, iframe {
display: none !important;
}
/* Video adjustments: hide videos and display a link instead */
div video,
div iframe {
display: none;
}
.video-link {
display: block;
margin: 10pt 0;
padding: 10pt 15pt;
border: 0.5px solid rgba(217, 223, 224, .5);
border-radius: 10px;
}
/* Cover page */
.print-cover-page {
position: relative;
width: 100%;
height: 110vh; /* Height for Letter size paper */
display: flex;
flex-direction: column;
justify-content: space-between;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-sizing: border-box;
}
.top-items, .bottom-items {
margin-left: 1cm;
display: flex;
align-items: flex-start;
}
.bottom-items {
margin-bottom: 4cm;
flex-direction: row;
}
.top-items {
margin-top: 4cm;
flex-direction: column;
}
.top-items .copyright-info {
}
.print-cover-page # coverLogo {
width: 150pt;
margin-top: 3.75cm;
margin-bottom: 0.5cm;
padding-left: 2pt;
}
.print-cover-page h1 {
font-size: 16pt;
margin: 0;
padding: 5pt 10pt 0 0;
}
.print-cover-page .bottom-items {
justify-content: space-between;
align-items: flex-end;
width: 100%;
padding-right: 1cm;
padding-left:0;
}
.print-cover-page .copyright-info {
font-size: 10pt;
margin: 0;
padding-right: 1cm;
}
}
/* END Adjusted content for printing articles */
This CSS code does several things:
It sets up media queries for printing (@media print), which means the styles inside this block will only apply when printing.
Adjusts layout and visibility of elements like headers, paragraphs, images, and more for an optimized print format.
Hides certain elements like navigation bars or footers that are not needed in the print version.
Hides the videos and replaces them with a link in the print version.
Conclusion
By following these steps, you've successfully integrated a feature into your Zendesk Help Center that allows users to download articles as beautifully formatted PDFs. This not only improves user satisfaction but also enhances the professional appearance of your help center. Remember, a well-organized and user-friendly help center is a significant asset to your customer support strategy.
To further elevate your help center, check out the Help Center Manager app for Zendesk. This powerful tool is designed to take your Zendesk Help Center to the next level, offering features like automated checking for broken links, the ability to translate help articles into various languages, and a find-and-replace function for common terms. With the Help Center Manager, managing and optimizing your help center becomes more efficient, ensuring a seamless and high-quality experience for your customers.