Completion certificates provide a professional way to acknowledge and celebrate learner achievements in your courses. These digital certificates serve as formal recognition of course completion and can significantly boost learner motivation and engagement.
When learners complete your courses, they receive a personalized certificate that includes their name, course title, completion date, and a unique certificate ID for verification purposes. These certificates can be downloaded as PDF files, shared on social media platforms like LinkedIn, or printed for physical display.
You can enable certificates for:
- Recorded courses: issue when a student reaches a completion threshold (for example 100% or 80%).
- Cohort-based courses: issue after a specific date/time (for example cohort end date) regardless of perβitem completion tracking.
- Live sessions: issue after the live session ends.
Enable certificates
- Open any course and go to Settings > Completion certificate.
- Toggle Enable certificate for this course.
- You can upload a custom HTML template or generate one using AI.
- Save changes.
Certificate template (HTML)
Use the following HTML template as a starting point. The system will replace variables in double curly braces at issuance time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Certificate of Completion</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f7f7f7;
font-family: 'Arial', sans-serif;
}
.certificate-container {
width: 800px;
margin: 50px auto;
padding: 40px;
background: #fff;
border: 8px solid #e0e0e0;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}
.header {
margin-bottom: 30px;
}
.title {
font-size: 2.8em;
color: #333;
display: inline-block;
vertical-align: middle;
}
.icon {
font-size: 2.5em;
margin: 0 15px;
vertical-align: middle;
}
.subtitle {
font-size: 1.1em;
color: #666;
margin-top: 20px;
}
.username {
font-size: 2em;
color: #222;
margin: 10px 0;
}
.text {
font-size: 1.1em;
color: #555;
margin: 20px 0;
}
.coursename {
font-size: 1.8em;
color: #333;
margin: 10px 0 30px 0;
}
.date {
font-size: 0.9em;
color: #777;
margin-bottom: 40px;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9em;
color: #555;
}
.success {
font-size: 1em;
color: #2a7f62;
}
.success .icon {
font-size: 1.2em;
vertical-align: middle;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="certificate-container">
<div class="header">
<span class="icon">ποΈ</span>
<span class="title">Certificate of Completion</span>
<span class="icon">ποΈ</span>
</div>
<p class="subtitle">This is to certify that</p>
<h1 class="username">{{userFullName}}</h1>
<p class="text">has successfully completed</p>
<h2 class="coursename">{{forCompletingWhatEntityName}}</h2>
<p class="date">Issued on {{issuedAtFormattedDate}}</p>
</div>
</body>
</html>
Supported variables
{{forCompletingWhatEntityName}}
β course or product title
{{userFullName}}
β certificate recipient name
{{issuedAtFormattedDate}}
β issuance date (formatted)
{{certificateId}}
β unique certificate ID (hash)
Keep your template mobile-friendly. Use web-safe fonts and avoid remote CSS for reliable rendering.