HTML for Certificate or Completion or other Certifcation

Report · Dec 18, 2023

Hi,

I was wondering if anyon had an example of a certification that students can print when they pass a certification. I am told that they need to be created in HTLM. I have seen that all the assets need to be included in the zip file with the html. I haven't seen anything that shows what variables we can use from the LMS to generate things like the student name, certification name, certification date, renewal date, etc.

There was one post that listed the supported html and css information, but it was old an the links no longer work.

Thanks,

Cindy Monroe

Report · Dec 18, 2023

Hi @Cindy Monroe ,

Thank you for letting us know the old links are not working.

I have asked the respective team to restore the links asap.

https://community.adobe.com/t5/adobe-learning-manager-discussions/how-to-create-a-custom-html-certif....

The missing files are attached to this note for your reference.

Please create a HTML design for your certificate and share it with us at learningmanagersupport@adobe.com.

Our team will convert that certificate and upload to your account.

If any variables that you need in the certificate can not be added, the team can let you know.

Regards,
Debiprasad Maharana
Adobe Inc.

Report · Dec 19, 2023

Thanks for the help. Now I just need to figure out what gets passed to the system to set the learner name, course name, issued date, expiration date, etc.

Report · Jan 16, 2024

For anyone interested. Here is the code I created. It works with our background image.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Technical Training Certificate of Completion</title>
<style type="text/css">
.container {
position: relative;
width: 1000px;
height: 753px;
}
.learnername
{
position: absolute;
top: 290px;
width: 100%;
text-align: center;
font-size:36px;
font-weight: bold;
font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.courseinfo
{
position: absolute;
top: 420px;
text-align: center;
font-size:24px;
font-weight: bold;
font-family:"Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.certificateinfo
{
position: absolute;
top: 600px;
left: 50px;
text-align: left;
font-size:14px;
font-family:"Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-style: italic;
}

img {
width: 1000px;
height:753px;
}
</style>
</head>
<body>
<div class="container">
<img src="TechTrainingCert.png" alt="Certificate of Course Completion" width="1000px">
<div class="learnername" style="width: 1000px">
<span width="100%";>Sample User</span> </div>
<div class="courseinfo" style="width: 1000px">
<p>Sample Certification Name</p>
<p class="CourseInfo"><span>Certifying Organization</p></div>
<div class="certificateinfo">
<p> Issued: Date of Issue </br>
Certificate No: certnumber </p></div>
</div>
</body>
</html>

Report · Jan 26, 2024

Cindy,

I realize you already have a solution, but we actually provide what I truly believe is a much more stellar solution. It's a Certificate of Completion Module you add to the end of any Course, Certification or Learning Path. Learners can't view their certificate until they have successfully completed the Course, Certification or LP. It's fully customizable and can include any data/variables that can be pulled from ALM (besides name, date of completion, score, it can also include any badges, images, skills, etc) or even external sources.

See the attached image of an example of what the users would see

You can reach out to us at support@envolvemedia.com for more information

-Andrew