Skip to main content

Print Certificate Template

By June 17, 2018September 25th, 2021All, Articulate Challenges, Blog Posts, Free Templates

*Updated 6/17/18 – a new Storyline 3/360 version has been added to the download links below.

This demo was one of my submissions to E-Learning Heroes Challenge #132: Ways to Use JavaScript & Articulate Storyline.

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.

Preview: Click the image below to view the demo of the Print Certificate template in action!

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.



  • Eli Collins says:

    How do you stop some one from entering different names and printing off multiple certificates

    • tcar2000 says:

      Hi Eli,

      Thank you for your question! Unfortunately, I can’t give you a very short answer! If you are concerned about someone printing multiple certificates with different names, you would probably want to host your module in an LMS (Learning Management System), in order to keep a record of student results. Setting up your module in an LMS to prevent learners from re-taking the quiz, while allowing them to review their results, is addressed in this online PDF, on pages 46-53:

    • Julie Sullivan says:

      Hi Eli…I had this concern with college students, what I have done is created a text entry box (%textentry%) on the first page of the course and asked the learner to enter their name and student #. Then on the certificate page their name and student # populate and they can’t edit. Hope this helps if you were still looking for a solutions. Julie

      • tcar2000 says:

        Hi Julie,

        Unfortunately, if the person taking the course wants to enter incorrect information on the certificate, they probably know that from the beginning of the course. Therefore, they could enter the incorrect information on the first Storyline slide, which would then populate the certificate.

        For more security, I think it would be necessary to use an LMS with appropriate security measures.

        Of course, it is also relatively easy to alter pdf documents, using Adobe Acrobat Pro or other software. If a pdf document is going to be presented as official proof of passing a class, it would still be necessary to verify the academic record of the student with a school transcript.


  • Carine says:


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


    • 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:

      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!


  • Helena M Smith says:

    I am copying the html print certificate file to the output (but its not copying)

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


      • Helena M Smith says:

        when i copy the print certificate html file the paste function isn’t enabled. Where exactly in the output folder is the information suppose to be copied?

        Do I have to republish the file?

        • tcar2000 says:

          Sounds like you haven’t unzipped the 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.

  • Helena M Smith says:

    Good morning,
    Is there a video on how to make this work? I am still not getting this work. I have copied the print html file into the published output folder and no success.

    I think I need a visual, so that I can see exactly what I am doing wrong.

    Or is this an issue with the CHROME browser?

  • Robert says:

    Hi Helena,

    I uploaded this storyline project to Articulate online and was not able to print certificate. You say to insert printCertificate.html into the storyline output folder after you publish the storyline module.

    My question…Where is the storyline output folder?

    Thanks a lot.

    • tcar2000 says:

      Hi Robert,

      Thank you for your question! I’m assuming the question is for me (Tracy), rather than for Helena, who has asked several questions about this Storyline template.

      The Storyline output folder is the folder that is produced when you publish a Storyline project. The folder will be wherever you have placed it on your computer when you published the project (My Articulate Projects, My Documents, Desktop, etc.). Right after publishing the project, you should insert the printCertificate.html document into the Storyline output folder on your computer. Then you upload the output folder to Articulate Online, or whatever service you are using to host the files online.

      If you want to insert the printCertificate.html document into your output folder after you have already uploaded it to Articulate Online, you will need to contact Articulate Online Support to determine how to do that. (I don’t use the Articulate Online service, so I don’t have instructions for how to access the output files on Articulate Online.)


  • 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 =(

    var enName = encodeURIComponent(theName);

    var theDate =(

    var urlstring = (“printCertificate.html?print=” + enName + “&” + theDate);,”_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: &

      Hopefully they will be useful to you!

      Best regards,

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


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

  • Teri Slater says:

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

  • Michele says:


    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


      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,


      • 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:


    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.

  • Adetunji Adebiyi says:

    I’m trying to replicate Free Print Certificate Template: Using JavaScript & Storyline Challenge but mine doesn’t work properly. will it possible for me to send you my storyline file for you to look at and see what i’m doing wrong and where i could do better.



    • tcar2000 says:

      Hi Adetunji,

      Thank you for your comment. Unfortunately, due to time constraints and security issues, I’m not able to download and review Storyline files to check for errors.

      Best regards,

      Tracy Carroll

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


    • 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,


      • 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…

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


    • 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,


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



  • 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:

  • ruba says:

    hi, i’m an LMS administrator not programmer
    and I could not understand the concept
    I’ve downloaded the zip file then what?? how can I customize it to be able to issue a certificate of completion for a large amount of learners ?
    how to let it work automatically
    I need it coz my LMS does not provide certificate

    thank you

    • tcar2000 says:

      Hi Ruba,

      This is not an LMS add-in to create certificates. This is a Storyline file, meant for instructional designers who use the Storyline application as the authoring tool to create their courses, but have no way of issuing a certificate to learners. Usually, this means that no LMS is involved, because usually the LMS would create the certificate.

      You would have to have Storyline installed, and knowledge of how to use the Storyline software to author a course, in order to be able to use the files in the zipped folder.


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