Matthew Bibby
Matthew Bibby

Populating an Email with Content from Storyline

Want to send an email from Storyline that includes the contents of a Storyline variable? This tutorial will show you how to write a 'lil bit of JavaScript that'll do just that.

Matthew BibbyMatthew Bibby

Have you ever needed to send some information from within Storyline, but didn't know how to set it up?

You've seen the mailto: link generators, but you need more power than that. This isn't just about prefiling the subject, but actually populating the body of the email with variables from Storyline.

But you just need a little help with the coding...

To set up this email, you'll need to write some JavaScript. But even if you aren't a coder, you'll be able to do this by following along with this simple example. Promise.

Then, in a follow-up series of articles, we'll look at different ways to use this technique with the aim of creating courses that are more interactive and reflective for the learner.

Let's look at this code in detail

Okay, so, let's look at some JavaScript code in detail and learn what it does.

If you take the time to learn what this code does, then you'll be able to adapt it yourself. But if you'd prefer to skip all this theory stuff, click here to jump to the end of this tutorial where you can copy and paste the code you need to make this work and also access a number of other examples of this same technique.

Anyway. Let's dig into this:

var player = GetPlayer();
var email = '[email protected]'
var fbk = player.GetVar('Feedback');
var subject = 'Course Feedback';
var emailBody = 'Here is some feedback:' + '\n' + fbk;
var mailto_link = 'mailto:' + email + '?subject=' + subject + '&body=' + encodeURIComponent(emailBody);
win = window.open(mailto_link, 'emailWin');

Fascinating stuff hey?

Do you know what it does?

You can try it out below:

The first step is to establish communication with Storyline:

var player = GetPlayer();

Then we are going to create a new JavaScript variable called email and pop an email address in there:

var email = '[email protected]'
Now, let's create another JavaScript variable, we'll call this one fbk. And we'll say "Hey Storyline! What's in your 'Feedback' variable at the moment? Can we have it?":
var fbk = player.GetVar('Feedback');

Storyline is pretty friendly, so if that variable exists, it's contents will be passed to the JavaScript fbk variable. This is good, as it means that we can include the feedback in our email later.

Why fbk?

Because that's how all the cool kids abbreviate the word feedback!

Next up, we'll specify what subject should be used for this email:

var subject = 'Course Feedback';

Then we are going to specify what the body of the email should say. Let's go with:

Here is some feedback:

[The feedback from Storyline will be added here]

How do we do this?

Let's start by creating a new JavaScript variable called emailBody.

var emailBody

Then we can add the text 'Here is some feedback:'

var emailBody = 'Here is some feedback:'

And let's follow that with a line break:

var emailBody = 'Here is some feedback:' + '\n'

And finally, add in the feedback that we grabbed from Storyline earlier:

var emailBody = 'Here is some feedback:' + '\n' + fbk;

Then we just need to put all of these pieces together, which we can do using the following code:

var mailto_link = 'mailto:' + email + '?subject=' + subject + '&body=' + encodeURIComponent(emailBody);

Here we are grabbing all the different parts of the email and put them together in a way that makes sense to most email clients. Essentially, we are saying:

"Hey! Default email client! Here's a list of stuff to do. Can you please create a new email to [email protected]? Set the subject to Course Feedback. Then in the body of the email say Here is some feedback: and include the information that Storyline gave us before... Oh, and while doing that, please make sure you respect all special characters including stuff like line breaks. Thanks!"

Finally, we need to open a new browser window and execute the mailto_link we just set up. We can do that by including:

win = window.open(mailto_link, 'emailWin');

Once again, here is the complete code:

var player = GetPlayer();
var email = '[email protected]'
var fbk = player.GetVar('Feedback');
var subject = 'Course Feedback';
var emailBody = 'Here is some feedback:' + '\n' + fbk;
var mailto_link = 'mailto:' + email + '?subject=' + subject + '&body=' + encodeURIComponent(emailBody);
win = window.open(mailto_link, 'emailWin');

In Storyline, you'll need to set up a text entry field to capture the learners feedback. You'll also need a Submit button, which we will use to execute the JavaScript.

So, create a text entry field and rename the variable it's using to Feedback (not feedback or feed back). Then add an execute JavaScript trigger to the submit button as shown in the video below:

That's it! All done. You now know how to populate an email with content from Storyline.

Frequently asked questions:

Q. When I published this project and played it on my computer, it didn't work. Why is that?
A. It's because security restrictions are stopping the JavaScript from working. This happens when you view the Flash output on your local hard drive. To get around this, view the HTML5 output instead (by opening story_html5.html). Or, upload your published output to the environment for which it was published.

Q. Can the learner edit the email before it is sent?
A. Yes, this code doesn't automatically send the email, it just prepopulates a new email ready for the learner to send. So don't use it to send quiz scores or other information you don't want learners to change!

Q. Will this work in Articulate Mobile Player?
A. No, no it won't. That's because the Articulate Mobile Player is allergic to JavaScript.

Q. Does this work in HTML5? (i.e. will it work on my phone and tablet?)
A. Yes, this will work in the HTML5 output.

Q. Will this work with all email clients and in all environments?
A. No. There are some email clients that do not support this method and some other things that could interfere, see here for details.

Q. Are there limits on the amount of text that can be sent via this method?
A. Yes, there are. But unfortunately, as the standard doesn't define a maximum length, it is left to the different browsers and email clients to implement as they see fit.

Q. My question isn't listed here, what should I do?
A. Feel special because you thought of an infrequent question! Then ask in the comments below and I'll get back to you as soon as I can.

Files you might need:

Here is the .story file that was used in this example.

Examples:

In a follow-up series of tutorials, we'll look at different ways to use this technique to create courses that are more interactive and reflective.

To receive these examples, please sign up below:

If you found this tutorial helpful and think that others in your network will also, please share using the share buttons below. Thanks!

Matthew Bibby
Author

Matthew Bibby

I'm Matt. I'm an eLearning Consultant. I help people like you develop memorable, engaging and profitable training programs. What do you need a hand with?

Comments