Have you ever needed to send some information from within Storyline, but

didn't know how to set it up?

Populating an Email with Content fromStoryline

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

that.

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.

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';

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 .

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.

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:

Populating an email with content from Storylinefrom Matthew Bibby

00:32

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, or 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 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.

If you found this tutorial helpful and think that others in your network will

also, please share using the share buttons below. Thanks!

STORYLINE TUTORIALS

JAVASCRIPT

SHARE:

AUTHOR

Matthew Bibby

I'm Matt. I'm an eLearning Consultant. I help people like you develop memorable,

engaging and pro�table training programs. What do you need a hand with?

VIEW COMMENTS