Show a DIV image with a javascript trigger.

I appreciate the help!

I'm going to post the code below:

We are looking to use an interactive coding environment (https://docs.sphere-engine.com/) and create kind of a "data camp" feel where on one part of the screen there's the coding environment, and the other half is some text or instructions.

It get's tricky. In the code I need to pass through a persons API key to load their own individual workspace. Right now I have it in there as a local WebObject file, which loads the web object, but its hard coded. Unless there is a way for it to take in some sort of arguments, I don't see this as an end solution...

A remote URL could potentially work. I wanted to avoid that due to the clients that we will have. There's a decent chance our clients will need everything in one place due to security concerns. (I can double check that though).

Which led me to my current idea. Have a trigger that loads the interactive coding environment/web object in javascript, so that we don't need to do any sort of outside calls other than the API call to sphere-engine. Sadly I don't have a ton of Javascript experience so I don't know the best way for it to load. Could I create an object in storyline and then replace it with the web object? Maybe?

I'm really appreciative of any help!

CODE BELOW: NOT SURE IF IT HELPS

<script>

// this part of the function opens the workspace

(function(d, s, id){
SE_BASE = "38071bda.containers.sphere-engine.com";
SE_HTTPS = true;
SE = window.SE || (window.SE = []);
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = (SE_HTTPS ? "https" : "http") + "://" + SE_BASE + "/static/sdk/sdk.min.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "sphere-engine-jssdk"));
SE.ready = function(f){if (document.readyState != "loading" && document.readyState != "interactive") f();else window.addEventListener("load", f);};
</script>

// This part loads it.

<div data-id="example-workspace" data-workspace="workspace"></div>
<script>
SE.ready(function() {
var workspace = SE.workspace("example-workspace");
console.log('test_function')
});

</script>