Example
Neon Renegades: An AI-Powered Band Experience
Ever wished you could go backstage and ask a rock band anything?
For this week's challenge, I built an interactive microlearning experience around a fictional rock band called the Neon Renegades.
The highlight of this entry is a live AI-powered chatbot embedded directly in Storyline. The band takes your questions in real time and answers in full character.
This one pushed me to dial my skills up to eleven, quite literally. Building a live AI chatbot inside a Storyline course was new territory, and I am glad I went there.
Would love to connect with fellow L&D pros who are exploring AI in their e-learning builds.
Thank you Jodi, that means a lot coming from you! Your entries always raise the bar for all of us.
Happy to share how I built it! Here is the quick version:
1. I used Claude to generate the chatbot as a complete HTML file. I just described the look and feel I wanted and it wrote the code.
2. Next, I set up a free Cloudflare Worker account which acts as a secure middleman between the HTML and the AI API.
3. I got an API key from an AI provider (you can try OpenAI, Claude or any AI provider) to power the live responses.
4. Then plugged the API key into the Cloudflare Worker and deployed it to get a free live URL.
5. Then updated the HTML file with that Worker URL so the chatbot knows where to send requests.
6. Finally dropped the HTML file into Storyline as a Web Object, sized it to fit my slide and published.
The part that made the biggest difference was the system prompt inside the HTML. That is what gives the AI its personality and keeps it in character no matter what the learner asks.
If you want to try it over your week off I am happy to answer any questions along the way. It is more doable than it looks!
3 Replies
I'd like to learn more about how you made the chat interaction. Can you direct me to any resources you used on that. I have next week off and that would be a good use of my time.
Thank you Jodi, that means a lot coming from you! Your entries always raise the bar for all of us.
Happy to share how I built it! Here is the quick version:
1. I used Claude to generate the chatbot as a complete HTML file. I just described the look and feel I wanted and it wrote the code.
2. Next, I set up a free Cloudflare Worker account which acts as a secure middleman between the HTML and the AI API.
3. I got an API key from an AI provider (you can try OpenAI, Claude or any AI provider) to power the live responses.
4. Then plugged the API key into the Cloudflare Worker and deployed it to get a free live URL.
5. Then updated the HTML file with that Worker URL so the chatbot knows where to send requests.
6. Finally dropped the HTML file into Storyline as a Web Object, sized it to fit my slide and published.
The part that made the biggest difference was the system prompt inside the HTML. That is what gives the AI its personality and keeps it in character no matter what the learner asks.
If you want to try it over your week off I am happy to answer any questions along the way. It is more doable than it looks!
Thank you for the detailed description. I think I'll need more than a week now. :) But at times like this, I think about one of my favorite colleagues, Kevin KE, who used to say "How do you eat an elephant? One bite at a time."
I'll take it slow and report back! Thank you!
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.