Storyline Populating an Email with Content from
Transcript of Storyline Populating an Email with Content from
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 = '[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]';
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 [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.
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 = '[email protected]';
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