How to Link Buttons Inside Storyline 360 Web Objects for Slide Navigation

Default Storyline player controls may not always align with custom UI designs or complex web integrations embedded inside a Web Object. Connecting HTML elements inside an iframe to Storyline allows you to:

• Trigger native Storyline slide jumps from custom HTML/CSS/JS buttons.
• Maintain fully custom, responsive interactive Web Object interfaces.
• Pass data or user interaction states back into Storyline variables.

1. 01

   Identify Target Slide and Create a Control Variable

   • Identify the destination slide in your Storyline project.
   • Open the Variables manager (x icon in the Triggers panel).
   • Create a new variable:
     • Name: home (or isHomeClicked)
     • Type: True/False
     • Default Value: False

   
2. 02

   Add Navigation and Reset Triggers in Storyline

   On the slide containing your Web Object, create two triggers:

   Trigger 1 (Navigation Trigger):

   • Action: Jump to slide (Select your target destination slide)
   • When: Variable changes (home)
   • Condition: If home == True

   Trigger 2 (Reset Variable Trigger):

   • Action: Set home to False
   • When: Timeline starts on this slide

   Note: Resetting the variable ensures smooth navigation when learners return to this slide.

   
3. 03

   Add the JavaScript Event Listener to Your Web Object Button

   In your Web Object's HTML/JavaScript source code, attach an event listener to your button element. The script uses the GetPlayer() API via parent context to update the Storyline variable upon clicking.

   // Locate the HTML button inside your Web Object const navButton = document.getElementById("yourButtonId"); navButton.addEventListener("click", function() { // Access the Storyline player interface from the iframe window var player = parent.GetPlayer(); // Set the Storyline variable 'home' to true player.SetVar("home", true); });

   Note: Replace "yourButtonId" with the actual ID attribute assigned to your button in the HTML code.

When testing your project locally, browser security policies may block communication between the iframe Web Object and the Storyline player due to CORS (Cross-Origin Resource Sharing) restrictions.

Recommended Verification Methods:

• Articulate Review 360: Publish directly to Review 360 to test communication on an active HTTPS server.
• LMS / SCORM: Upload to your LMS environment or testing platform (e.g., SCORM Cloud).
• Local Web Server: Run the published output through a local web server (such as Node.js http-server or VS Code Live Server) rather than launching story.html directly from a local file directory (file://).