Embedding a Chatbot in your Articulate Storyline and Articulate Rise courses

Chatbots have become one of the most thriving innovations. Chatbots allow our users to interact in a human-like manner, whereby a human can ask questions or make a request and receive responses. Websites everywhere are using chatbots to help their users find information, ask questions, take orders, and more.


Within eLearning, they present many opportunities such as boosting accessibility as instructors or teachers aren't always available when our users are learning, they're always available and on-demand, boost interactivity, and can reduce learning time by allowing our users to find information in a 'just-in-time' approach.


In this tutorial, I'll show you how you can embed a chatbot into your Articulate Storyline and Articulate courses.



The Tutorial:



Tools and codes you'll need:


Tools

In this tutorial, I used Brackets.io, a free open source code editor with live preview options. I highly recommend Brackets.io if you're looking to do coding.


To achieve the build of the chatbot, I used Landbot.io. Landbot is a great, easy-to-learn tool to create chatbots - and with their subscriptions, you can customise the design even further, link your chatbot to a Google Sheet and more.


Code

Once you've created your chatbot in Landbot.io, all you need to do is navigate to the "Share" page, adjust the settings of your chatbot and copy the script. You'll want to paste this script in your body tags of the Story.html or Index.html files.


The body tags are illustrated as per below:


<body>
</body>


Accessing the code and preparing it:

If you're not familiar with accessing the Storyline or Rise codes - take a moment to read the below.


Articulate Storyline

If you're using Storyline, simply export your course into whatever format you need it in - but don't zip it. Once you've saved it, locate the folder and open the story.html file. If you're using a tool like Brackets.io, simply right-click the file and select "Open with Brackets".

Once you've made your changes to the story.html file, save the file and close it. From here, if you publish your course to an LMS, all you need to do is zip the entire course folder so that you can upload it.

Articulate Rise

If you're using Rise, simply export your course into whatever format you need it in. Rise will automatically zip the file. Once you've received the download, unzip the file. Open the folder and locate the index.html file. If you're using a tool like Brackets.io, simply right-click the file and select "Open with Brackets".


Once you've made your changes to the index.html file, save the file and close it. From here, if you publish your course to an LMS, all you need to do is zip the entire course folder so that you can upload it.

A word of warning about code

If you re-export your course, you'll lose these custom codes. So, I highly recommend saving the codes somewhere handy so that you can easily copy it back in. If you make a mistake, just click undo or re-export the course.

Wrap-up

If you have any questions about getting this to work, then please feel free to get in touch. If you found this tutorial helpful, then don't forget to subscribe to keep in the know.

Until next time - keep learning.

414 views

Subscribe today and enjoy latest news fresh in your inbox.

Learning Experience Designer

Troy Ashman

  • LinkedIn Icon
  • Facebook Icon
  • Twitter Icon
  • Instagram Icon

Contact

+61 0434 043 405
troyashman@gmail.com

Wentworth Point, NSW
Australia 2127

ABN:  18 248 306 216

© 2020  Troy Ashman

Let's keep in touch