In this video, I’ll show you step by step how you can add a printable certificate of completion to your Articulate Storyline course, with variables on the certificate for a username, a course name, and a user score.
cta under video
A Printable Certificate
If you want to add a printable certificate to your Storyline course with the current data on the certificate and also the user name, there are different ways to accomplish this. Now in this video, I’ll show you how to add a HTML certificate to your Storyline course and how you can post Storyline variables to HTML. At the end of this video, I’ll show you the link where you can download my solution that you can use in your next Storyline course.
The HTML Certificate
This is the HTML certificate that I have created. You see here we will fill in the user name, the name of the course where the certificate is for, and there is also a place for the score. That our three variables.
Now let’s go back to Articulate Storyline and let’s see how I’ve done this with these variables. What I’ve done in Articulate Storyline here, you have my first variable. A user fill in in his name and the contents will be saved in the variable Student Name.
Variables in Querystring
Here you see my certificate. What you see here is that in the query string, here are the variables. You see You name with the content, See name with the content, with the name of the course, and at the end there’s also Score which is 80. On my certificate HTML, I will retrieve these values and set it in HTML. That’s the next step I want to show you.
HTML certificate structure
What I do here, for instance, with the username is that I’ll paste the contents of the variable here. I’ll do it here for the Course Name, and I’ll do it here for the Course Score. Here, I’ll do it for the dates, and here for the User Name so he can sign his own certificate if you want to. Here what I’ll do is I’ll add my logo to it.
Preview the course
Now, what happens if a user clicks on the button? Let’s preview now the Articulate Storyline course and let’s see what happens. So, I publish my course. I click on Open here. Now, I’ll go to the folder where my course is open. Let’s see why … No, it’s on my other screen right now so all I have to drag it here. What I’ll do now is I click the story dot HTML and it will open in a browser. Also, in my other windows. Let’s drag it to this window. One moment. There it is. So what you see here is my course. I can fill in my name here. I have to do it right. That’s my name. Click on Continue.
Now, normally what you have to do is the certificate dot HTML is not a standard Storyline HTML file so you have to put it manually in the published folder every time you publish a course. But I have a solution for you that you have to only do it once and then you cannot forget it.
Let’s go back to Storyline for a moment. What I’ve done here in Storyline, you see, there is a page that’s not in my flow, let’s say. If you go to the page, there is nothing on it but I has changed the properties. The player features here I have set it on custom for selected slides and here I’ll check the resources for this one. Only on this slide, the resources will be shown, but a user will not see this slide in his course. On all the other slides, the resources are not shown but because Storyline sees that the resources are here, it will load the resources. What you can do is you can go to your player.
Here on the resources, I have here uploaded my certificate dot HTML file. I’ve done this once and now I can publish my course and Articulate Storyline automatically adds the certificate dot HTML file to my published project. This way, I cannot forget to add it because otherwise a user cannot see his certificate. In this way you can add HTML certificate to your Articulate Storyline course where the other user can print.
Now, did you find these slides really attractive and will you also use these slides? I’ll use team by Faster Course. They have a bunch of Articulate Storyline templates that I think are really nice and you can purchase them now with 10% discount. If you go to FasterCourse.com and purchase the Storyline templates, if you fill in the coupon code upwardonline, you’ll get a 10% discount for now. I’ll hope you can use this HTML certificate in your next e-learning project.