Matthew Bibby
Matthew Bibby

Extend Your eLearning Beyond the Initial Course

Matthew BibbyMatthew Bibby

Have you ever wanted to extend your eLearning beyond the boundaries of a typical course?

Perhaps you've wanted to help your learners deepen their understanding of the core material over time? Or maybe you want to provide additional information on any areas that they've struggled with?

In this tutorial, we are going to integrate email automation software into our eLearning courses so that we can send highly customised information to our learners via email.

Perhaps you want to track how the learner engages with your course and then send messages to them supporting the choices that they've made?

In this tutorial, we are going to look at integrating email automation software into our eLearning courses so that we can deliver additional information directly to the learner's inbox.

You can think of it like breaking your eLearning course out of its shell. And once this happens, there is a whole new world of automation that you can use to help get your message across.

How Does This Work?

We are going to integrate the email automation tool Drip with our Storyline courses so that we can pass data from Storyline to Drip. Then we can use Drip (which is both incredibly powerful and simple to use) to send automated email sequences that are customised according to the workflows that we create.

How Do We Get Started?

The first thing you'll need to do is sign up for a free Drip account.

The free account is suitable for up to 100 subscribers.

If you are likely to have more than 100 people completing your courses, then you'll want to move up to Drip's Basic package, which will cost you a few $$$. But I'd suggest using the free account in the beginning while you get everything set up and make sure that the tool meets your needs.

I know that's what I did it.

So, if you haven't already, sign up for a free Drip account, as none of this will work without one!

What Data Do We Need to Capture?

Next, we need to determine what data we want to pass from Storyline to Drip. There is a lot that we can do here, but for this tutorial, let's just pass the learners name and email address to Drip along with one other piece of information so that we can start sending personalised automated messages to our learners.

In future tutorials, we will look at passing other bits of information to Drip that will allow us to further personalise these messages... but for today? Let's start small.

So let's create a basic form in Storyline.

We need to have two text entry fields, one to capture the name the one to capture the email.

We want to change the triggers attached to these fields so that they store the value in text variables called Name and Email, for example:

Once our form has been built, we then need to attach some JavaScript to the Submit button that will help pass the information to Drip.

We will be using Drip's JavaScript API to do this.

What's an API? It is essentially an agreement that says "If you give me this instruction, I will do this thing."

And that's good.

Because we want Drip to do this thing.

So, let's create a Submit button and add an Execute JavaScript trigger.

Then in the Script window we will add our JavaScript.

We need to establish communication between Storyline and the JavaScript, which we can do by:

var player = GetPlayer();

Then we need to pass the values of the Name and Email variables to the JavaScript so it can share them with Drip.

We can do this by creating a new JavaScript variable called learnerName which will be used to temporarily store the value of Name that it gets from Storyline. This line of code will take care of that for us:

var learnerName = player.GetVar("Name");

Then we can do the same for the email:

var learnerEmail = player.GetVar("Email");

Next, we need to push this data to Drip. We are going to use the identify method to do this.

Essentially, we are saying:

Hey Drip! Have you met Grace before? Yes! Excellent, can you please remember that she wants to learn more about camels? Thanks.

Or perhaps we are saying:

Hey Drip! Have you met Fred before? No! Okay, can you please jot down his email address and remember that he wants to learn more about donkeys?

(By the way, Fred is a bit of a donkey... but let's not tell Drip that!)

To tell Drip that we are making an identify request, we just say:

_dcq.push(["identify", {

Then we can tell Drip what email to use:

email: learnerEmail,

And what name:

first_name: learnerName,

Finally, we want to record a piece of data about what that person has done.

In this case, we will just ask Drip to remember that they have completed the Drip demo:

tags: ["Completed Drip Demo"]

We are using a Drip tag to store this information. That means that Drip will attach the tag Completed Drip Demo to the person's record if it doesn't already exist.

If we needed more detail, such as the date and time that this action occurred or wanted to track each time it happens, then we would use Drip Events instead... but let's just keep things simple for now.

So, that is everything we need in that Execute JavaScript trigger. So it should look a little something like this:

Now, we can publish our course. But it won't actually work yet, as we still need to add some more code that will tell Storyline which Drip account to share this information with.

Site Setup

Now, we need to grab some information from the Drip account that you opened earlier. If you didn't open one, then you better do so now.

Then we can go to the Drip Site Setup page and grab the code that we need to tell Storyline how to talk with Drip.

We are going to copy this code into our story.html and story_html5.html files. Note, if you are using Storyline 360, please see the FAQ's at the bottom of this page as the process is a little different for you.

Now, as we are doing coding stuff, you'll need a text editor. If you don't already have a preferred text editor, grab yourself a copy of Sublime Text.

Then you need to navigate to your published course files, which you can do by clicking Open:

You should see something that looks a little like this:

Then open story.html in Sublime Text as shown above.

We will need to scroll to the very bottom of the page and add our code just before the </body> tag.

So what initially looks like this:

Should look like this after we paste our code:

Then we can save and close that file.

Next, open the story_html5.html file and scroll down until you find the </body> tag and add in the Drip snippet.

So what initially looks like this:

Should look like this after we paste our code:

We can now save and close that file.

That is all of the changes that we need to make to our Storyline course.

Once this is uploaded and someone submits the form, their name and email will be passed to Drip, along with a tag that says that they Completed Drip Demo.

Would you like to see how it works?

Here's a Demo

Here is a demo of the final project so you can see how it works:

Now, of course, that's is only part of the puzzle!

We also need to set up some automation rules in Drip so that it knows what to do with this information.

I won't go into too much detail on this now as we are going to look at this in a future tutorial, but here is the workflow that I've set up for this demo:

What does this mean?

Well, when the tag Completed Drip Demo is first applied to a subscribers account then this workflow will be triggered.

As you'll recall, this tag is applied when someone submits their details in the demo above thanks to the code:

tags: ["Completed Drip Demo"]

Drip is then going to look at the day that the individual subscribed. If is it before the day this tutorial was written (i.e. the individual was already a subscriber), then they will receive one particular email.

If the individual was not subscribed before that date (i.e. they have only just signed up for updates from this site) then they will receive a different email.

Drip will also send me a notification email letting me know that someone new has subscribed, so I can make a new friend.

Because I like meeting interesting people like you.

It took maybe 5 minutes to build that workflow, including writing the emails.

Drip is seriously easy to use.

So, now you now how to integrate Drip into your Storyline course. Over the next few weeks, we are going to expand on the ideas presented here and look at a number of amazing things we can do with this integration, including:

Sound good? Stay tuned.

Files you might need:

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

Frequently Asked Questions:

Q. I'm using Articulate 360, what do I have to do differently?
A. Instead of adding the Drip snippet to the story.html and story_html5.html files, you'll need to add it to the story_flash.html and story_html5.html files. Just pop it before the closing </body> tag. If you get stuck, let me know.

Q. Do I need to copy the Drip snippet into those files each time I publish my course?
A. Yes, you do. When you get to the point that you want to use this integration with every course you publish, you could consider altering the templates that those files are created from so that you don't need to do it manually. If you need a hand doing that, let me know.

Q. Where can I learn more about Drip?
A. Here is a free 11-part video course that looks at how Drip works. Not all of this will be relevant to what are discussing here, but it will give you a good understanding of the basics of using Drip.

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

Q. Will this work in Articulate Mobile Player?
A. No, it won't. Because the Articulate Mobile Player doesn't like JavaScript.

Q. Will this work in an LMS?
A. Yes, it will.

Q. Do Articulate support this method?
A. No, they are not able to offer assistance with JavaScript stuff. So if you run into issues when using this approach, their support team won't be able to assist. However, I may be able to help, so reach out if you're stuck.

Q. My question isn't listed here, what should I do?
A. Leave a comment below or reach out to me, then go and watch some episodes of the show Larvae on Netflix. It has nothing to do with what we have talked about here, but it is really funny.

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

Matthew Bibby

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?