Skip to main content

Free Print Certificate Template

By August 15, 2022November 16th, 2022All, Articulate Challenges, Blog Posts, Free Templates, Tutorial

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.

It turns out there are various ways to create a printable certificate, using JavaScript with Storyline! This example is just one way to go about it.

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.

42 Comments

  • Carine says:

    Hello,

    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”?

    Carine

    • tcar2000 says:

      Hi Carine,

      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!

      Tracy

  • tcar2000 says:

    Hi Helena,

    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.

    Tracy

    • tcar2000 says:

      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.

  • Aris Skouroliakos says:

    Hello Tracy,

    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.

    In the javascript trigger the code is like this:

    var player = GetPlayer();

    var theName =(
    player.GetVar(“username”)
    )

    var enName = encodeURIComponent(theName);

    var theDate =(
    player.GetVar(“DateValue”)
    )

    var urlstring = (“printCertificate.html?print=” + enName + “&” + theDate);

    window.open(urlstring,”_blank”,”width=800px,height=600px,menubar=no”);

    /*—————————————-*/

    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!

  • Laura Hathaway says:

    Hi Tracy,

    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.

  • Laura says:

    Thanks so much for the input and links! Time to play!

  • John Pieterse says:

    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!

    • tcar2000 says:

      Hi John,

      Yes, I think both things are possible, but unfortunately I’m note a coder or programmer myself. I tried to figure it out today, but I just don’t know the javascript required! You would need to put the learner’s score variables [%Results.ScorePercent%% (%Results.ScorePoints% points)] from the results slide on to the certificate slide, which is easy enough, but then you would need to add a javascript trigger to the print.html file to get the score results variables to print out. For the background image, of course you would need to upload the image to the output folder, and then you would need to put another javascript trigger in the print.html file to tell Storyline to use that image as background for the certificate. I would go to the Articulate E-Learning Heroes community and ask how to do this–I’m pretty sure they will come up with an answer quicker than it would take me to try to figure it out!

      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!

      Best regards,
      Tracy

  • John Pieterse says:

    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

    • tcar2000 says:

      Thanks, John, I’d appreciate it if you shared the info! I’ll update my post to include your findings. 🙂

      Tracy

  • Teri Slater says:

    I’m not editing your template at all (other than I did make the javascript date mm/dd/yyyy).

    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.

    https://s3-us-west-2.amazonaws.com/samplefilesonly/Freebie_Print_Cert+-+Storyline+output/story.html

  • Teri Slater says:

    Thanks Tracy, I’ll check in with Amazon, too.

  • Michele says:

    Terri,

    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.

    • tcar2000 says:

      Hi Michele,

      Actually, the date displayed is 6/12/17 (meaning the 6th of December, 2017). Some people like the day/month/year format, while others prefer the month/day/year format. You can change this in Storyline by opening the first slide trigger on the Certificate slide (the Execute Javascript trigger), and changing the order of the month and the day. Change the line in the existing Javascript from:

      var newName = day + “/” + month + “/” +year

      to:

      var newName = month + “/” + day + “/” +year

      Then publish as usual, and be sure to include the printCertificate.html file in the published output folder.

      Best regards,

      Tracy

      • Michele says:

        Thank you! That never even occurred to me.

        • tcar2000 says:

          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. 🙂

  • Joel says:

    Hi!

    Do you know if there is a six/solution for this in SL3?

    • tcar2000 says:

      Hi Joel,

      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.

  • Dan says:

    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.)

  • Claire says:

    Hi Tracy,
    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?

    Thanks

    • tcar2000 says:

      Hi Claire,

      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.

      Best regards,

      Tracy

      • Claire says:

        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…
        Regards,
        Claire

  • Sarah says:

    Hi Tracy,

    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?

    Best,
    Sarah

    • tcar2000 says:

      Hi Sarah,

      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.

      Best regards,

      Tracy

      • Sarah says:

        Hi Tracy,

        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 🙂

        Best,
        Sarah

        Best,
        Sarah

  • Craig says:

    Hi Tracy,
    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.

  • Mandy says:

    It works well. Thanks a lot.

  • Tamara says:

    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

  • swarnaa says:

    Thanks a lot for this… it was very helpful.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.