Forum Discussion

ChrisHodgson's avatar
ChrisHodgson
Community Member
12 months ago

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

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 ...
A screenshot of an eLearning activity showing facts about the American Bald Eagle. An AI assistant widget is shown in the bottom-right corner.
AI
JavaScript
storyline
storyline 360
  • 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?

      • Nathan_Hilliard's avatar
        Nathan_Hilliard
        Community Member
        2 months ago

        I just signed up for a free account from elevenlabs.io, and then created a new agent. You may need another email to create a new free account if yours is paid.

        Login | Home tab | Agent Workflow button (top) | '+' next to Agents tab under Build in side menu | Blank Agent | Add First Message and System Prompt data, set LLM to Gemini 2.0 (leave the rest as default)

        Copy key and paste into the sample code in SL project.

  • 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...