Storyline 360 - Generating a PDF Certificate using JavaScript

Jan 31, 2018

This example demonstrates how to use the pdfmake JavaScript library to generate PDF certificates in the browser using Storyline 360.

This is a followup to my original post found here. The only changes from the original are that this is now a Storyline 360 project and pdfmake has been updated to the latest version (v0.2.4 at time of posting).

The linked example provides a brief overview of how this works. I've tested this successfully in Internet Explorer, Chrome, Firefox, Chrome on Android and Safari on iOS.

The attached source files contains a basic .story file as well as a folder (certificate) that includes the required HTML and JavaScript that needs to be included within a web object within the project.

The generated PDF certificate is very basic at the moment, you'll need to refer to the pdfmake documentation to update the design.

Feel free to have a look and re-use if it's useful.

(21/03/2022 - pdfmake updated to v0.2.4 and example link replaced)

90 Replies
Ryan Lowry

Hi Doug, it looks like you replaced the background image certificate.jpg with certificate.png. In the browsers console we can see this is causing an error as the image file cannot be found.

You either need to convert your image to a .jpg called certificate.jpg or update line 53 of certifciate.js in the web object source files to reflect the filename of the image you wish to use for the certificates background.

You also need to update line 35 of certificate.js to reflect the name of the variable you are using for the learners name ("uName").

Remember you will need to first delete and then re-add the web object when you make any changes to it.

Doug Dewan

Hi Ryan, thank you so much for your assistance and patience in walking me through this. I've been able to make it generate the PDF certificate! The formatting is off for the text placement and paper size but think we can fix that. I assume we would update the "certificate.js file for this correct and not the js in the Storyline trigger? 

I think this is where I get confused, there are two places for the js content, one in the Storyline course success layer that executes the js file that is in the web object folder. The one in Storyline is just used to trigger the js in the folder, any modifications to the certificate and content on the certificate would be then done to the file in the folder, would this be an accurate assumption?

Ryan Lowry

Hey Doug, can't say it's something I've looked into. I don't think it will be possible to attach a PDF certificate generated on the client side to an email and send it. Others on the thread might have some bright ideas.

It might be better to let an LMS handle the certificate side of things if you have that option? Moodle for example with an appropriate plugin provides the option to issue certificates based on completion of an activity such as a Storyline SCORM. These is an option to email certificates and you get the benefit of centralised recording of learner progress.

Doug Dewan

Thanks Ryan, yes ideally we would have hoped the LMS would do that however ours does not. We use Workday Learning. WDL says the authoring software should do the certificate functionality and Articulate Storyline says the LMS should be performing the certificate functionality, so neither seems to want to own this with seems very odd to me as so many people require this functionality. Once again, thank you for all your help and insight in finding this solution to address the gap!



I'm building a course that will have an auto-generated PDF certificate.

Thanks to this discussion I finally get some results, but I want to understand how it works and why?

I wonder how toryline knows to include data, files etc from an external folder when publishing, in this case a folder called "certificate"?

Why does torylineline not include my files, placed in the "certificate" folder when publishing so they are not includ automaticly in to the final project (in contrast to the files placed by the author of the project wchich are automaticly include)?

I thought it was somehow defined in the webobject (since after publishing all the data is in the story_content\WebObjects folder), but in the project there is only one web object which only contains a reference to the drive location of probably the creator of the project.

Can someone smarter can explaind me how dose it work?

Jordan M

I cannot figure out how to resize the pdf properly. Does anyone know how?  I have an image that is 2500 pixels wide, but it only shows the top left corner of it. I changed the code in the certificate javascript file to the below, but again it only shows the top left corner. Is there something else that needs to change? Thanks for any help! (I also don't know what the ".89" is for after the width, but when I remove it, no pdf is created)

background: [
image: 'certBackground',
width: 2500.89,
height: 1768.28

Doug Dewan

Hi Hero's, hoping someone could steer me in the right direction. Ryan was so helpful a few years back in assisting us in developing a PDF certificate for a course we designed. The test file worked for us at the time. As it's been a long time I can't seem to reproduce the function in a new course. I have everything exactly as the previous but when I publish to review it doesn't produce the certificate. I know there was some steps required prior to publishing to enable the java script to pull the certificate detail - but my notes are unclear on how this works when publishing to review and was hoping someone would be able to provide some clarity on this. Fingers crossed. 

John Cooper

Using the pdfmake JavaScript library involves including code that generates the pdf certificate from a base image and then carefully overlaying and positioning the text you want to appear on the page. This is a great approach but...

...there is an alternative approach which involves creating the certificate outside of Storyline just as a pdf form and then using the pdf-lib Javascript library inside Storyline to fill in the fields in the form.

This has a number of advantages:

  1. The JavaScript code is easier.
  2. You can change the certificate layout and edit the pdf without having to modify your JavaScript code.
  3. The same JavaScript code can be used for multiple certificate layouts so long as the field names are the same.
  4. The pdf-lib JavaScript library is built so you can load the rotines you need (and only those you need) at run-time. This means you don't need to modify the HTML after publishing.

I don't have a certificate example but I am running a FREE on-line workshop/ discussion next week (Tuesday) that will walk through and demonstrate the steps to create a downloadable course handout including learner's own notes using pdf-lib. The principle is the same as creating a certificate.

If anyone is interesting in joining this workshop please send me a message and I will provide a link.


Doug Dewan

Thanks John, I would be interested in attending that workshop, ideally I would like to get the existing solution working so we can close off this project and perhaps look at the alternative approach in follow up as everything is built currently. I think I'm just not recalling the step you need to perform prior to publishing that pulls the cert data into the publish file. (Should have made better notes 2 years ago) :)