Example files: Generating a certificate from Storyline

May 09, 2012

Steve Flowers
By Steve Flowers

This example demonstrates how you can take user input and generate a certificate for printing. Any Storyline variable or score can be used to generate the output. The file and file add-ins are both simple and straight forward. This will only work in the Flash based output. This will not work in the iOS output or HTML5. 

To replicate this on your end:

1) Modify the story file to your liking.

2) Extract the add-in zip file above (certificate.html and certificateBG.gif)

3) Copy these two files into your published output directory. You'll need to do this each time you publish.

This is a really basic example. You really can do quite a bit with this including adding a print button, extra fields, collecting values from the LMS like the user's first and last name. 

** I noticed a bug when playing with this file setup. I initially thought I would be able to include the certificate files as resources to avoid copy / paste surgery after publish. Unfortunately, Storyline mangled the HTML file on publish. Will be submitting this as a bug.

236 Replies
Sarah Newman
7 years ago04/17/17 at 2:06 pm (UTC)

Hi Steve,

I realize it's been over 3 years since you posted this and you may not be following this thread anymore, so I'll also send you an inbox message. I just thought it might be useful for other people to see your answer here.

I figured out how to add the javascript to the PDF I built, but I'm not sure it's all set up correctly. The site you referenced doesn't really have instructions on how to use the javascript, other than to explain how to insert it in the Document Javascripts window. What would you do if you have more than one dynamic field that you want to pull data into? How do you get those fields to pull information from the published Storyline course? Do you just have to name the text entry fields using the same naming conventions as the text fields in the PDF? 

If you're able to give me some assistance with this, I would really appreciate it!

Steve Flowers
7 years ago04/17/17 at 4:06 pm (UTC)

Hi, Sarah - 

What method did you use to generate the PDF? I've moved to a different method since the original article as that method didn't work well across different devices.

I use the PDFMake library to provide a way of generating the PDF at runtime. This way I don't need to worry about which PDF viewer is being used. Differences in the viewer were the most common cause of failure in my experience.

Curtis Kynerd
over 6 years ago12/21/17 at 7:01 pm (UTC)

Is there a specific folder were you should copy/paste the Certificate.html and Certificate.png files in the Storyline Output folder?  I once could make this work, but I can't seem to get it to work in Storyline 3.  I think in previous versions, you maybe placed the 2 files in the data folder(?), but not sure where to put them in Storyline 3.  It's been a while since I have done this, but have a need to do it again.  I am not having any success getting this to work this time with Storyline 3. 

Ashley Terwilliger-Pollard
over 6 years ago01/02/18 at 6:05 pm (UTC)

Hi Heather,

Is there a specific link that isn't working for you? This discussion is a bit older, so if the links are pointing outside of community.articulate.com I'd suggest trying to connect with the ELH user who shared it. Check their individual user profile for a Contact Me button to reach them directly! 

Ashley Terwilliger-Pollard
over 6 years ago01/12/18 at 3:56 pm (UTC)

Hi Curtis,

With Storyline 3 and Storyline 360, the publishing engine got a full rewrite and some of these older workarounds and methods may not work as expected. It also looks like Steve moved to a different method entirely - so perhaps he can share more specifics on that? 

We still recommend the steps here to generate a certificate. 

Ashley Terwilliger-Pollard
6 years ago04/05/18 at 1:18 pm (UTC)

Hi Mary,

That post by Jeffrey is a bit older, so I'm not sure he's still subscribed or active here in the ELH community.

This discussion is long though with lots of folks who may be able to help you. You're also welcome to reach out to anyone directly if they have the Contact me enabled on their profile. 

Good luck with your course! 

Hilde Zwamborn
almost 6 years ago05/02/18 at 12:07 pm (UTC)

Hi,

Thanks for sharing! I have used it and add another background image and lettertype. 
Can somebody help me with the following questions?

How can I put today's date at the certificate?
How can I make the size of the name ( = var learnername) bigger?

Thanks in advance. 

Andrew Sellon
over 5 years ago11/05/18 at 11:39 pm (UTC)

After reading through this lengthy thread, I just submitted a feature request.  Here's what I said:

Hi there! I have a new client who needs me to provide a traditional certificate (filigreed border and all) at the end of a course, pulling data for name, date, course title, and test score. In a foreign language. And it needs to be printable. I looked in Storyline, and then in the forum, and was amazed to find you folks still don't provide a ready-to-use Results slide in the form of a customizable, printable certificate template within the Articulate 360 suite. As you know, this is a feature Adobe Captivate has offered for a few years now. I watched your old video about revising the Report.html file. That's too much work for many of your customers, who may not have the basic code-tweaking skills needed. And having to manually place the file in the appropriate folder after publish? A recipe for mistakes to be made. I read that your reasoning is you consider proof of completion to be the province of a company's LMS. But as you've acknowledged, there are companies who don't use an LMS, or still want a traditional certificate the learner can print out at the end of the course, within the course, even if the company does use an LMS. As you know from the attached forum thread, people have been asking you for this feature for at least six years, and continue to ask for it currently. Isn't this something that would be a really huge WIN for you folks to produce? Couldn't you create a good-looking template with editable certificate title (for foreign language clients), and learner name, date, score, and course title variable fields, include the coding to make it easily printable, and make that available to all your users as a Results slide option? All the course creator should need to do is conform their variable titles to those you use (or, you make them editable). I do hope you will at last revisit and reconsider your position on this ongoing basic need. It would be hugely appreciated by many of your customers. Thanks!

Leslie McKerchie
over 5 years ago11/06/18 at 2:10 pm (UTC)

Thank you for the detailed thoughts and use-case Andrew. I've attached this thread and your submitted feature request to our internal report as we track user requests and so that we can pop in and update you here when we can.

I wanted to share some information about how we manage these feature requests as that may be helpful. 

Andrew Sellon
over 5 years ago11/07/18 at 1:29 am (UTC)

Thanks, Leslie--I spent some time this afternoon trying to work with the old download files Brian Batt provided on this site, and despite watching the video, I have been completely unable to make them work in my test course published in Storyline 360.  At this point, I would be happy to put all the content except the learner's name onto the .png image file, if I could only sort out how to pull the learner's name into showing on top of that image file, in the right place, so they can print it out.  So far, I have been completely unable to  get a name to appear at all when experimenting with a test file published for Web.  Since the process requires manually tweaking the report.html file, and adding a graphic file, I can't publish to Articulate 360 to test, so I'm working locally.  Would you suggest I post on the forum, or would Support be willing to help?  One way or another, I need to make this work to satisfy the client's Latin American compliance team requirements.  They really want that printable certificate. Thanks for any thoughts you may have.

Ashley Terwilliger-Pollard
over 5 years ago11/07/18 at 3:40 pm (UTC)

Hi Andrew,

The older files shared by Brian sound like they are pre-360 and therefore may not have the same file setup and structure to work with the Storyline 360 output. Lots of pieces changed behind the scenes in the published output to accommodate the changes put in place for HTML5 only output. 

If you're able to share the work you've done so far here in the E-Learning Heroes community such as your .story file, any Javascript or code changes, I bet one of our community members could take a look and offer other ideas! It's a bit beyond our area of expertise, and not something that our Support team is able to help with either. 

I'd suggest starting a new discussion (this one is quite lengthy!) so that it doesn't get lost in the noise here. 

Erica Flynn
almost 3 years ago07/09/21 at 6:48 pm (UTC)

Hi Leslie, 

I see that this request from Andrew is a few years old, but am I correct to conclude that this feature remains unavailable in Storyline 360? I need a very similar certificate feature to be incorporated in to our courses. I've been neck-deep in these articles all morning and still haven't found a solution to pulling the learner's name on to a certificate. Thanks!  

Becca Levan
almost 3 years ago07/12/21 at 2:54 pm (UTC)

Hello Erica, and thanks for following up!

You're correct that this isn't a feature in Storyline; however, many folks in the community have chimed in with ways to achieve this. Happy to share what I've found!

  • I see Darren responded to you here with a tutorial on adding text variables.
  • Here's an article that might help. It shows an example of two JavaScript triggers to get the current date, capture the learner's name, and print a certificate.
  • I also found another solution from a community member here that will pull the user's name.

I hope you find one of these useful! And I'm looking forward to seeing what other community members chime in with!

Sign In to Reply