Category Website

Are you building your portfolio? Articulate Storyline is a rapid development tool for eLearning, and WordPress is an open-source content management system that many of us use to organize and display our websites. A common question I get is, “How do you get your Articulate Storyline modules up on your WordPress site.” In this blog, I will publish an Articulate Storyline module to the web and show you two ways to get it into WordPress. There are probably other ways, but this way does not require any plugins.

Publish Storyline Module

Publish your Storyline module to the web. Next save your file as a zip file.

Uploading to File Repository

There are two options for uploading your file to the file repository for your website. The first is to use the file manager for your web host, and the second is to use Articulate Storyline’s FTP transfer. I use HostGator for my web host. I have logged into their customer site and navigated to my file manager. There are plugins for WordPress that make it possible to log into File Manager from your website dashboard. I tried one of these, and it crashed my site. So I prefer to go directly to the file manager.

Double click on your file manager and you will see the file structure for your website. Open the public.html folder.

Creating a Folder for your module

Your Articulate Storyline module will have multiple subfolders. You will want to upload it as a zip file to make sure all of the subfolders stay together. Eventually, you will unzip it. To keep your file structure organized, create a separate folder for each Articulate Storyline module. To create a folder in File Manager, select the + folder option.

Choose a name for your folder. Make it simple, but unique, so your file structure is easy to follow.

There is now a folder named “Sample” in my public_html folder.

Use FTP to Transfer the Articulate Storyline file from your computer to your Web Server

The first way to transfer your file is via FTP from Articulate Storyline. Your server is your website address. Use port 21. Your username is the username for your web server, such as Hostgator. The password is your web server account password. Your directory is the file path you just set up. Mine is /public_html/Sample/ Test the connection next. Send the file to the Web Server.

Upload Articulate Storyline Folder Directly into the File Manager

The other option is to go directly into the file manager of your web server and upload a zip file to that folder. I created a second folder called “sample.”  I find this option is more manageable because sometimes the FTP transfer drops a file.

Select upload a file.

Drag and drop the zip file or select the file and upload it.

The file is now uploaded. Select go back to return to the root file “sample.”

Next, select your zip file in its folder and choose extract.

The default is to extract it into the same folder, which is what I do. Then I delete the zip file.

Use an Application

Another option is to use a WordPress application to upload and embed your Storyline content such as this one by Brian Batt.

Embed your Storyline file.

The next step is to embed your Storyline file on the page of your choice. If you right-click on your story_html5.html file, you will get the file path for your Storyline file.

You could use the word press page builder or the Elementor page builder- whichever you choose, select add an HTML code, and then add your code as below. Notice my file path is my website followed by the file path that does not include /public_html

<iframe src=”https://ltpcreativedesignllc.com/sample/story_html5.html” width=”780″ height=”558″></iframe>

Select preview to view your HTML and make sure that it appears as you expect.

Now that you have a portfolio and your website, you may start thinking about adding a chatbot to collect email addresses and answer basic questions. Follow along as I try the Snatchbot.

The Dashboard

After logging into the platform, you are taken to a dashboard. Where your current chatbots are kept as well as data on messages exchanged and messages by channel, to create a new bot, select the create a bot in the upper left-hand corner of the screen.

Your First Chatbot

After selecting a new bot, you are presented with several options for templated bots. Select a blank bot if you want to design everything yourself or use a template if you’re going to modify a pre-existing chatbot. You can add an image as well as give your bot a name and a description. Then select create.

Adding Interactions

In the next image, notice that there are two sections; add a new interaction or plugin and chatbot scheme. The chatbot scheme is a preview of your interaction after you build them. It is also an area where you can test your interactions. To add an interaction, select add new interaction just below your bot’s name. There are several YouTube videos uploaded by SnatchBot, as well as a robust set of instructions.

After you select to add a new interaction, you will have multiple options. A chatbot statement is the most common. Here you can make a statement or ask a question and anticipate some response. You will then add connections that are commonly if-then statements to lead to the next action. You can also choose to extract emails from the user response, extract a URL, a phone number, a date, a number, address, a duration, a JSON API, a search interaction, await a response from the user for a human or a translation. To build this simple chatbot, we will only be using the chatbot statement and email extraction interactions.

After selecting a chatbot statement, name your interaction to make it easier to keep track of your network diagram. You will add the chatbot’s message. This message is the statement the bot will make when the user reaches this part of the communication. Since this is the first statement in the network, I would like to introduce the chatbot and ask the user if they would like to chat.

Add A Connection

After you add the chatbot’s message, you will need to connect the message to another action. I have added two additional interactions to my bot to prepare for this step. In my first chatbot message, I asked, “Would you like to chat?” There are two possible responses, yes and no. If the user says no, then I would like the bot to say, “Thank you for visiting my website. Please let me know if I can help you in any way.” If the user says yes, then I would like the bot to say, “May I have your email address in case we get disconnected?” So the next steps are to set up two simple connections depending on whether the user inputs yes or no—select “connections” at the top of the screen. Then select “simple connection” near the bottom of the page.

If the user’s response to the interaction is no or any form of no, we would like the bot to respond with the goodbye response. To do this in the first box under the simple connection, select “response to this interaction.”

The user response could either “contain or not contain” a word depending on how you want to set up the connection, so the greatest number of user inputs are included. If you select “contain,” it will look for that word or any synonyms for that word you add. If you choose “does not contain,” it will move to that action as long as the selected word is not contained in the message. Using the “does not contain” option covers many more possibilities.

Next, you will enter the keywords that the user response either does or does not contain. Make sure you add the keyword in both capitalized and lower case forms. Type the word and then enter. After you enter a keyword, you have the option of searching and then selecting synonyms for each keyword.

The last step in building the connection is choosing which interaction the response will lead to.

Test You Chatbot

After adding several interactions, you may want to go to the bot scheme area to test your bot and look at a diagram of the connections. Select the conversation bubble in the greeting interaction to bring up the test chatbot window.

Sample Chatbot

You can make your interaction as complicated or as simple as you desire. In this case, I used simple if-then variables, ultimately trying to get the user’s email address so I could contact them to determine their needs and answer any questions. If I were selling a product, I could answer questions on the price, payment, and return policy just using the chatbot. Those with more advanced coding skills can use artificial intelligence and coding to build a chatbot that mimics conversing with a person.

Deploy The Chatbot

The next step is to deploy the chatbot to the channel from which you would like to collect data. Select “Channels” in the left-hand column and then “about.” In the about section, you can provide a name for the bot, a custom signature, your contact information, including your website and your email.

In the next tab, “customize,” you can choose the styles and color scheme for your chatbot so that it matches your website design. Finally, under the “get embed code’ tab, you will get the necessary code to embed the bot on your website. You will need to follow the instructions on how to embed the code found on the Snatchbot website.

The easiest way to deploy it is to add the Snatchbot plugin. Navigate to your Word Press website, and select add a new plugin. Search for Snatch Bot. Activate the plugin.

Snatchbot Plugin

After activating the Snatchbot plugin. Sign in to your Snatchbot account and select your bot to automatically deploy it to your website.