devlin.aiDocs
Browse the docs

Publish and embed

Embedding a simulation in Articulate Storyline

Articulate Storyline embeds a simulation through a Web Object that takes a URL, not an iframe tag.

Plans: All plansView as Markdown
On this page

Articulate Storyline embeds a simulation through a Web Object, which takes a URL (not an iframe tag). This is different from Rise 360, which takes the iframe embed code.

Before you start

  • The simulation must be published. An unpublished simulation does not load from its embed URL.
  • You need the simulation's embedded URL (the ?mode=embedded link). Open the simulation, go to the Publish stage, and expand Storyline 360. The URL is under Step 1: Add a Web Object, with a Copy URL button.

Steps

  1. Copy the simulation's embedded URL.
  2. In Storyline: Insert → Web Object, then paste the embedded URL.
  3. Set the Web Object to display in the slide, then size and position it to fill the area where the simulation should appear.
  4. On the same slide, add an Execute JavaScript trigger that runs when the timeline starts, and paste the code from Step 3: Add a JavaScript Trigger in the Storyline 360 section. This lets the simulation write to your Storyline variables.
  5. Preview in a browser (Web Objects may not render reliably in Storyline's built-in preview).

Result

The simulation runs inside the slide, and learners interact with it there.

Voice simulations

When voice is turned on for a simulation, the Storyline 360 section shows a second, voice URL (the ?mode=voice-embedded link). Use that URL in the Web Object for a voice simulation.

A voice simulation's embedded page needs microphone permission. The JavaScript trigger from step 4 grants the microphone to the Web Object and reloads it once so the permission takes effect. If the frame still blocks the microphone, the voice flow falls back to a small popup window, where the learner clicks a start button and grants the microphone. If the browser blocks the popup, the learner is asked to allow popups for the site and try again.

Serving a simulation in another language

Open the simulation and, in the Design stage under Language, choose Add a language. devlin.ai translates the opening line, the start screen, and the input placeholder (this uses a few credits), and you can edit the translated opening line and start screen. If the simulation shows learners a criteria breakdown, the criteria are translated too. Then add lang= and the language code to your embed URL, for example https://devlin.ai/embed/YOUR_KEY?mode=embedded&lang=es. The character speaks that language, the widget text is translated, and the feedback report is written in it, in text and voice. A language you have not added is ignored and the simulation runs in its primary language. For LMS packages, pick the language under Package language in the LMS Standalone section of the Publish stage, which appears once you have added a language; each package runs in one language.