Help - Calling all Javascript experts!

I hope you can help me with this problem. I need to know the Javascript to insert an action in a PDF form field.

I have a client who wants learners to be able to print a PDF certificate with the user’s name automatically filled in from a Storyline variable.

I know how to create a PDF certificate with a form that the user can type their name into, but this is not what the client wants.

The module will be published for the web, Flash with HTML5 fallback, no LMS.

Attached is the Storyline 360 file, and the output folder with the PDF cert. 

18 Replies
Matthew Bibby

Try using this JavaScript instead Tracy:

var player = GetPlayer();
function findLMSAPI(win) {
if (win.hasOwnProperty("GetStudentID")) return win;
else if (win.parent == win) return null;
else return findLMSAPI(win.parent);
var lmsAPI = findLMSAPI(this);
var lmsName = lmsAPI.GetStudentName();
var array = lmsName.split(',');
var name = array[1] + ' ' + array[0];
player.SetVar("UserName", name);

You'll need a variable in Storyline called UserName for this to work.

Godwin Vinny Carole

Hi Tracy,

I made a few changes to the JavaScript in your story file and added few files in "pdf_cert" folder.

JavaScript in the story file checks for LMS availability.

If accessed from an LMS, It pulls out the student name from LMS, else the name given by the user in the course will be printed out.

All you need to do is, add "pdf_cert" folder in the publish output.

Here is the demo:

This must work for both Flash and HTML5. 

Download Source, Publish and below

Tracy Carroll

Hi Matthew! Thanks for responding. My Storyline variable is called UserName, but when I added your JavaScript into the PDF, the variable doesn't show up in the UserName field.

The module is published for the web, Flash with HTML5 fallback--the client does not have an LMS. Is that the issue? Or did I put the JavaScript in the wrong place?

Tracy Carroll

Thank you so much for your help, Godwin!

The client doesn't have an LMS, so I published the Storyline file for the web, and included the "pdf_cert" folder in the published output (attached).

It printed out the Certificate without the background (Certificate.pdf), although the image in the browser (screenshot certificate.png) showed the background perfectly. Is there anyway to get the pdf to show the certificate background, when not using an LMS?

Godwin Vinny Carole

Hi Tracy,

I see that you have tested the publish output from your local drive using chrome browser. As chrome blocks access to local files when a html page does not have a domain, pdf is printed out without the background. 

The course must be hosted on a server, doesn't have to be an LMS to get the expected output.

If you need to test the output locally, you can view the course on Firefox.

Here is a demo link hosted on my server without LMS:

Laura Brunning


Appreciate this post is quite old, but hope someone is looking and can help!!

I have used this method to create a PDF certificate, however, on the certificate, the name is the wrong way round.  The actual Storyline variable is the correct way around - just not on the PDF.

On the slide:

On the PDF:


Code on Slide Master:  

$(".top-ui-bg").css("background-color", "#54565B");
$(".area-primary").css("background-color", "#54565B");
$(".cs-slide-container").css("background-color", "#54565B")
$(".sidebar-contents").css("background-color", "#54565B")
$(".cs-glossary").css("background-color", "#54565B")
$(".panel-content-menu").css("background-color", "#54565B")

var player = GetPlayer();

function findLMSAPI(win) {
if (win.hasOwnProperty("GetStudentID")) return win;
else if (win.parent == win) return null;

else return findLMSAPI(win.parent);

var lmsAPI = findLMSAPI(this);
var myName = lmsAPI.GetStudentName();
var array = myName.split(',');
var newName = array[1] + ' ' + array[0];
player.SetVar("newName", newName);

Code on the actual slide:

var player = GetPlayer();
if (typeof GetStudentName == "function") {
var myName = GetStudentName();
localStorage.setItem("g_certificate", player.GetVar("newName"));

Code on Click here for PDF button:

var g ="./pdf_cert/index.html");

I haven't changed anything else to do with the certificate or the pdf_cert folder that you copy into the output file.

Please help!!

Also - As long as it displays firstname lastname (no comma) on the certificate, we don't have to have it on the slide (if it makes it easier).

Cheers, Laura

PS - using 360 and publishing in HTML only


Nancy Woinoski

Hi Laura, If I understand correctly you are pulling the user's name from the LMS and the name is displaying correctly in the Storyline variable on your screen but it is not displaying correctly in the PDF.  If this is the case then the issue might be in the code on the index.html file. Can you share the file so that people can take a look at how it is coded?

Laura Brunning

Good plan, please see attached!

Apart from the name of the course on the certificate, I haven't changed anything else inside it, just how it was when I downloaded it from this thread.  

It appears to reference a 'username' that I haven't set anywhere, I'm very confused

Thanks, Laura

Laura Brunning

Hi, thanks for the reply - doing it that way round just makes it backwards on the slide AND backwards on the certificate. 

It doesn't seem to matter what I do with the code on the slide, it doesn't change the certificate :(  Also the certificate has the comma, but it doesn't on the slide. 

using var newName = array[0] + ' ' + array[1]; = 



Anne Kalinic


even if this post is quite old, I hope someone can help!

I'm creating a PDF certificate, however, on the certificate, I don't know how to add the date in the right place after the text "In Rennes, the ..." in the ultimate line of the document (see the document attached).

I'm having issues setting the right coordinates for the date, which should be more on the right :

var img = new Image;
img.onload = function() {
  doc.addImage(this, 0, 0, 297, 210);
  doc.setTextColor(0, 0, 0); 
  doc.setFont('Times-Bold', 'bold');
  doc.text(certName, (doc.internal.pageSize.width / 2), 96, null, null, 'center');  
   doc.setFont('Times-Roman', 'normal');
   doc.text(date, (doc.internal.pageSize.width /2), 135, null, null, 'center');"CertificatRGPD.pdf"); 


Any help is appreciated !!

Thank you