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 = 'your_email@address.com';
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 = 'your_email@address.com';
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 your_email@address.com? 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 = 'your_email@address.com';
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.

Update

Beth asked a very good question in the comments below:

Hi Matt. Thank you for your great articles about Storyline. I am attempting to use the javascript above to send an email showing text that the learner types into a text entry field. Keep in mind, I've never written javascript before. The code works great except when clicking Submit, the email window opens (awesome), but so does an empty browser tab that I need to close or click back on the tab I was in on my LMS. Is there any way around that – not have the empty browser window open? Thanks for your help!

The empty browser tab that opens can be annoying, especially when working in an LMS as it steals the focus from the course window.

There is another way to code this that stops that tab from opening, however, this solution isn't perfect either! I know right... silly computers can't even do simple stuff without a bunch of caveats.

First, a demo:

This should open the email without opening a new browser tab. If you have a desktop email client (outlook, mail etc.) installed on your computer, are using this on mobile, this probably worked perfectly.

However, if you have a webmail service (such as Gmail) set as your default email client, you may have run into issues. It'll still work, but your email may load in the same browser tab as your course. This means that users will need to hit the Back button in their browser to return to the course.

Annoying. But not as annoying as having to shave...

From my experience, this issue only occured in Chrome when Gmail was set as my default email client. But it may happen in other cases as well... I haven't tested every possible combination of browser and email client.

The good news is that, from my experience, very few people configure things to have Gmail work as their default mail client, so it's unlikely to be a major issue. But it's good to know what's up.

Here is the code used in the above demo:

var player = GetPlayer();
var email = 'your_email@address.com';
var fbk = player.GetVar('Feedback');
var subject = 'Course Feedback';
var emailBody = 'Here is some feedback:' + '\n' + fbk;
window.location.href='mailto:'+email+'?subject='+subject+'&body='+encodeURIComponent(emailBody);

I hope that helps!

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