Preview: View the interactive demo of the Print Certificate template in action!
*Updated 8/16/22 – a new Storyline 360 version has been added to the download links below. The short video in this version was created with CreateStudioPro.
A couple of years ago a client requested a printable certificate option for a Storyline assessment module I was designing. Since Storyline does not have that option, I had to scramble to create the feature. Of course, I did a google search first, and found many different tutorials on the subject.
Two free downloads: The zipped folders each contain the .story file, the printCertificate.html file, and the Storyline output folder.
Customize: To customize the look of the Certificate, edit the printCertificate.html file with any html editor, such as Dreamweaver or Notepad.
Remember: Be sure to insert the printCertificate.html into the Storyline output folder after you publish your Storyline module. Otherwise, the print certificate function will not work! (See the example Storyline output folder in the zip file you downloaded).
Tip: Be sure to pay attention to your browser and/or printer settings before printing or saving the certificate as a PDF. You can control the margins, the header and footer information, and the orientation of the certificate page by adjusting your browser and/or printer settings.
For example, in the Chrome browser (image below), you can uncheck the “Headers & Footers” option to print your certificate without that extraneous information at the top and bottom of the page.
I’m french (so excuse for my english)and we use many characters with accents.
when I type the text in the field “Type your full name” characters with accents are poorly printed in the pop up page (for exmple “é” become “Ã ©”).
Is there a line of code specified in the file “PrintCertificate.html”?
Thank you for your question! The problem seems to be associated with particular fonts. I would change the font in the Storyline presentation to a font that you know works well with French accent marks, and see if that solves the problem.
I found a discussion of this problem with printed certificates generated with the Moodle print certificate add-on at the following site: https://moodle.org/mod/forum/discuss.php?d=230356
The discussion recommends using the “freeserif” font. I’m not sure if that helps or not, but I would love it if you let me know your results!
Thank you for your comment!
I’m not sure what the issue is from your comment:
“I am copying the html print certificate file to the output (but its not copying)”
Are you saying you cannot copy the printCertificate.html file? You should be able to right-click on the printCertificate.html file and copy it, then paste it into the output folder.
If not, then you could open the file with Notepad, or any html editor, then select the contents and copy them to another text document.
I hope this helps.
Sounds like you haven’t unzipped the Freebie_Print_Cert.zip folder first. You’ll need to unzip the folder, then open the extracted folder. Then you will be able to copy, paste, and/or edit the print certificate html file.
Ok thanks. Let me try that and the republish the file.
From all the solutions for the certificate I ended up with yours.
I didn’t want to include the date or give the user the option to change his name, so I made the appropriate changes to my story file.
I wanted to have Greek characters so I modified your code a bit.
var player = GetPlayer();
var theName =(
var enName = encodeURIComponent(theName);
var theDate =(
var urlstring = (“printCertificate.html?print=” + enName + “&” + theDate);
And your code in the printCertificate.html is like this (I am including only the line I changed):
document.write(” + decodeURIComponent(learner_name) + ”);
Now I can print the certificate on Firefox, IE, Opera and Chrome.
I used decodeURIComponent cause at first I couldn’t print if I used Greek letters.
Then the problem that came up was that despite printing on Firefox and IE, Chrome and Opera encoded the letters as %20%21 etc.
So all I had to do is to create a variable that would encode the user name before putting it to the url as a parameter. (var enName = encodeURIComponent(theName);)
Hope this will help others too!
Thank you for your comment, Aris! I’m glad you were able to modify the code to suit your needs.
First, thank you for creating this; it’s a wonderful resource and certificates really provide a sense of accomplishment for students; an “end goal” sort of speak.
The question I have is this: is there any way to place a .png file as the “background” and then have the text fields print “over” it? I have a great looking certificate in AI that I would like to use, but I’m not sure how to do that.
You’re welcome! I’m glad you like the Storyline template.
Yes, it’s possible to To customize the look of the Certificate, by editing the printCertificate.html file with any html editor, such as Dreamweaver or Notepad. You could also create a PDF template with an image to use as a background. There is a learning curve to customizing the certificate to look the way you want it; if you are not comfortable with editing html, here is an article with some helpful resources: https://support.edubrite.com/oltpublish/site/cms.do?view=custom_certificate
On the Articulate website, this discussion on the topic of editing a certificate also has some downloadable resources: https://community.articulate.com/discussions/building-better-courses/create-a-course-certificate-in-storyline-with-java-and-html
I hope this has been helpful!
Thanks so much for the input and links! Time to play!
Hi Tracy, sorry to trouble you but I wonder if it would be possible to insert a background image on the certificate and also would like the certificate to show the score of the result slide. I have been trying all day long making alterations and they are working fine. I’m just stuck with these to items and I really would appreciate some help. Thanks in advance for your reply!
Here are a couple of links I’ve given out before, concerning editing course completion certificates: https://support.edubrite.com/oltpublish/site/cms.do?view=custom_certificate & https://community.articulate.com/discussions/building-better-courses/create-a-course-certificate-in-storyline-with-java-and-html
Hopefully they will be useful to you!
Hi Tracy, thanks for reaching out and spending time trying. Appreciated! I’ll try to set some things up today and may post a request on E-Learning Heroes! We’ll get there in the end and I will share it as soon as I have managed to get it right. Best regards, John
Thanks, John, I’d appreciate it if you shared the info! I’ll update my post to include your findings. 🙂
I can’t get the print function to work on mine, and I don’t understand why. Here’s my published link of your file.
Unfortunately, I’m not a programmer, so I don’t really know what is going wrong with your published presentation. I did notice you have plus signs in your url: https://s3-us-west-2.amazonaws.com/samplefilesonly/Freebie_Print_Cert+-+Storyline+output/story.html. I think that can cause a problem–I would remove all plus signs from the web address.
The error I received when trying to print the certificate from your presentation was: “This XML file does not appear to have any style information associated with it. The document tree is shown below…” I googled the error, and saw that it can sometimes occur with Amazon Web Services, which you are using to publish your presentation: https://forums.aws.amazon.com/thread.jspa?messageID=753323&tstart=0
Sorry that I cannot solve the issue for you definitively!
Thanks Tracy, I’ll check in with Amazon, too.
Thank you so much for this easy to use certificate! I just have one problem. When the certificate pops up to print, the date displaying is June 12, 2017. I imported the certificate slide into my existing project and see the java script for the date variable. Do I need to make some sort of adjustment in the printCertifcate.html file to pull the current date? Thanks again.
var newName = day + “/” + month + “/” +year
var newName = month + “/” + day + “/” +year
Then publish as usual, and be sure to include the printCertificate.html file in the published output folder.
Thank you! That never even occurred to me.
No problem! I’m in the process of changing the demo & download file right now, because I think the month/day/year format is probably more popular in the USA. It is with me, anyhow. 🙂
Do you know if there is a six/solution for this in SL3?
As far as I know, this method would work in SL3. If you have SL3 or SL360, you can open the .story file and agree to the upgrade. Then follow the instructions as usual.
I want to do math operations on the date. Is it possible to get the month, date and year as numeric variables instead of text variables? If so is a format required?
(I sent this question previously with a bad email address, please reply to this one. Sorry for the confusion.)
I’m sorry, I don’t know the answer to your question. You might try asking it on the Articulate forum: https://community.articulate.com/forums/building-better-courses
Thanks for sharing instruction and tips about how to print a certificate in Storyline!
One of my clients would like to have this option but with an offline version of the module (.exe).
Do you know if it is possible to make it work with the .exe version of the module?
I don’t know–I’ve never had a client request an offline version of a Storyline module. The best way to find out would be to follow the directions as usual, and published for offline viewing. Be sure to insert the printCertificate.html into the Storyline output folder after you publish your Storyline module. Then test the module by viewing it as a learner would.
Thank for your reposne. I have done that and it is working fine.
This brings me to notice that the .exe is not a stand alone file as I thought but part of a package. This is part of another topic…
We have been using this trick with Storyline 2. However we recently switched to Storyline 360 and now if we take the same steps, the certificate shows up blank. Did you experience this? Did you need to change the printCertificate.html file to work with the newer version of Storyline?
The post was updated on 6/17/18 to include a new Storyline 3/360 version. I recommend downloading that version from the download link provided in the post.
Thanks for the response. I noted the new version. We have made our own html file in the past, and I was wondering what changes had to be made from the old file to the new one, but I can just compare your two html files to see what differs 🙂
I see! I haven’t run into the issue you described, but I hope the new version solves the problem!
This is a fantastic demo! Only one question: how would you set this up for the name to just appear WITHOUT the user entering in their name? Essentially, to pull the username from the LMS to display on the cert.
Then, I tested the various solutions with the client’s LMS. I hope this helps!
You are tremendous, thank you for the clarifcation!
You’re welcome, Craig!
It works well. Thanks a lot.
You’re welcome, Mandy!
This is amazing! I had a Flash one that crapped out when the browsers stopped supporting it. This seems to work well in Canvas, too. Thank you so much!
I added a background file to mine to make it fancy. Here’s the code if anyone can use it: https://docs.google.com/document/d/1ysLD5Jk0wbVYXiUWpNZicnYsC26LqkBkYyaYnSz-ZFw/edit?usp=sharing
Thanks a lot for this… it was very helpful.
You are welcome!