5 tips on using web objects in Articulate Storyline

Web objects in Storyline can be tricky. I had a few people at the Articulate Roadshow ask me about using web objects. I didn't get a chance to break down any of my projects but I figured I would start here!

You can use web objects to insert websites or snippets of interactive objects people have built with code like html, css, and js.

Here's how to do it so that your web object looks seamless in your course (apologies for my voice, I'm getting over a cold.)

Why use web objects?

It may take longer to build something like a calculator in Storyline (although there are a few built) and a web object is a perfect fast and interactive solution.

Why add your web object's folder into your published course?

1. You save space by not hosting your web objects on internal drives. You also don't have to worry about anyone accidentally deleting your files.
2. Your web objects will be internal if you have complications with using outside hosting because of security reasons.
3. You don't have to worry about anyone taking down your source files from outside sources.

Here are some important tips when using web objects in general and for those that link out to your published file:

1. Play around with dimensions of your Story size and web object's dimensions.
2. Make sure your web object is prepared/finalized prior to adding it (it seems like it is cached once you have it embedded in Storyline, but hey I could be wrong.)
3. Ensure that your folder contains an index.htm or index.html file.
4. Make sure your object has no background if you plan on creating a seamless experience. You can add a background in later.

I used the following CSS to add in my background:

background: url(filenamegoeshere.png) no-repeat center center fixed;
background-size: cover;

or you can change the background using Javascript in Storyline.

5. Don't give up! It takes some time to get your project looking perfect but it's totally doable.

View the completed Storyline files in their formats: Flash | HTML5

The game was created by Anish Sana, you can check out his game here.

- Mel