postMessage with direct embedded model

Hello, can someone help me better understand how to use postMessages to update parameters in a directly embedded model? My goal is to have a dropdown on a website that corresponds to a dropdown that I have on the ShapeDiver website. Clicking a button would then send a message updating that parameter in the API (api.paramters.updateAsync({name:“Platform Selection”,value:x})). I added an additional to receive the postMessage from the javascript. I previously tested the added script in an html element built to receive and display text after a button was pressed. I am not sure why I can not apply the same idea to updating model parameters. Below I have attached a JS Bin link with the embedded html and pasted the brief javascript in this text box. Thank you for any help you can provide, I really appreciate it!

export function GoButton_click(event) {

let PlatformSelection = $w('#PlatformSelectionDropdown').value;   
let PlatformSelectionAPI = "api.parameters.updateAsync({name:'Platform Selection',value:PlatformSelection})";
$w("#SDVcontainer").postMessage({PlatformSelectionAPI},"*");

}

Have a look at code examples below, they cover what you are trying to achieve.

Code sample for generating custom UI from model parameters:

and for exports:

There is more in our CodePen library but let us know if there is anything unclear.

Hey Pavol, thanks for the quick response. I’ve still digging into the CodePen examples, but it looks like they both primarily work by embedding all of the information into the html component. I’m trying to update the parameters by sending a post message to the viewer. Do you think that will work? I’m not sure if it is as easy as just sending a message such as api.parameters.updateAsync or if I need to do something to the message once it gets to the viewer to activate it. Again, thank you for your help.

I’m not sure if I understand your use case so feel free to tell me more about what you aim to develop. Any advanced 3D application our customers built so far has used the ShapeDiver direct embedding which gives you access to the API and changing parameter values is as easy as this call:

api.parameters.updateAsync()

I am in Wix trying to build a website that would allow architects to iterate through different mass timber assemblies quickly. I initially chose Wix because I am new to web development and thought it would be easier to place and design sliders and drop downs rather than code them. I think my issue then is when I am trying to send a parameter update such as the floor to floor height, I need to send a postMessage to communicate between my page code and the HTML container. I am using JS Bin to test what I am trying to do, which I believe is exactly what you are recommending, and that is using calls such as “api.parameters.updateAsync().” I believe my issue now is getting that script to the HTML. Am I thinking about this correctly?

Hey Pavol, thanks for discussing this with me last week. I went ahead this weekend and changed my approach to developing a website through JS and HTML rather than relying on Wix elements. I followed your direct embedded example in the CodePen link you sent and was able to get everything set up! I know I caught you last minute on a Friday afternoon but I really appreciated the quick responses!