Forum Discussion

ChrisHodgson's avatar
ChrisHodgson
Community Member
12 months ago

How To Embed An ElevenLabs Conversational AI Widget Into SL360 Using JS!

A screenshot of an eLearning activity showing facts about the American Bald Eagle. An AI assistant widget is shown in the bottom-right corner.

Hi Heroes,

It feels like something new and exciting is always around the corner in the world of generative AI technology, and this week ElevenLabs put themselves firmly in the driving seat of the agentic AI revolution with their new Conversational AI toolkit.

If you haven't heard of this yet, check out this video which explains it all: https://www.youtube.com/watch?v=v-EYzZCLF48&ab_channel=ElevenLabs

The interactive, animated widget that this toolkit provided is easy to embed anywhere, including directly within an Articulate Storyline 360 project slide!

If you're interested in how to get started, I've written a blog post that includes all the steps, including an Execute JavaScript snippet you can use to effortlessly get your agent loaded into your activity: https://discoverelearninguk.com/how-to-set-up-elevenlabs-conversational-ai-widget-in-articulate-storyline-360/

I'm also currently experimenting with the API for the new Conversational toolkit to understand how I can implement it into my eLearning Magic Toolkit plugin for Storyline + WordPress, potentially opening the door for developing real-time voice activated automation all within a Storyline-built eLearning activity!

Much more to come very soon. 🚀

---

My name's Chris Hodgson, an eLearning developer and software trainer based in the UK. I enjoy creating fun, unique, and engaging online experiences using Articulate software! Connect with me on LinkedIn - https://www.linkedin.com/in/chrishodgson44/

AI
JavaScript
storyline
storyline 360

7 Replies

  • MarcyChandler-2's avatar
    MarcyChandler-2
    Community Member
    9 months ago

    Thanks for the tutorial, but it didn't work for me; I've tried everything I could to get it to work. NO LUCK. Do you have any advice?

    • Nathan_Hilliard's avatar
      Nathan_Hilliard
      Community Member
      2 months ago

      I just ran through the setup in the blog post and it worked perfectly. I only embedded the bare minimum chat agent into an empty project, but it listened and responded as expected.

      Can you describe what is not working, if you see any errors in the developer panel console window (F12), and run through the steps of what you did? Or, perhaps post your sample project that is not working. Maybe you can make a free tier agent as the test case. 

      I don't use ElevenLabs, so I just made a free agent. It worked both when I uploaded it to my server and when I ran it locally from the published web folder. It does not work from Review since the microphone is blocked.

      • KarineMorris669's avatar
        KarineMorris669
        Community Member
        2 months ago

        Thank you for your response. Actually the widget just doesn't appear when I publish. How do you create a free tier agent?

    • ChrisHodgson's avatar
      ChrisHodgson
      Community Member
      2 months ago

      Thanks KarineMorris669​ and Nathan_Hilliard​ 

      It's been some time since I originally wrote this post, and a year is of course a very long time in the world of generative AI! 

      I haven't done much more with directly embedding agents into Storyline myself, so thanks to Nathan for investigating.

      I've instead been focusing my attention into the eLearning Magic Toolkit plugin, which enables not only the live conversational aspect of users engaging with conversational AI agents through Storyline-built activities, but also the ability for the agent to perform actions and activate triggers within Storyline via client tool calls!

      It's quite amazing what can be achieved these days by integrating these systems together...