Issue with iFrame integration - parameters not loading

Grasshopper ShapeDiver
1

ShapeDiver username: lionanator (profile)

Currently on a designer plan and have run into what appears to be a bug/issue with integrating the iFrame of my model into the website. The issue being that sometime some of the variables don’t load in when opening the parameter tabs, particularly if you have all the tabs open and then try scroll down to see the variables. See below screenshots. Note, this issue occurs across multiple computers and also in fullscreen mode.

LoadedButMissingText
LoadedButMissingText452×671 18.2 KB

MissingVariables
MissingVariables488×648 7.68 KB

In the one screenshot the variables have loaded but the text for the ‘Angle’ variable hasn’t loaded. In the other only the ‘Chord’ variable has loaded. We’ve tried adjusting the various settings in the iFrame embed and on the website (i.e. theme)

Current webpage: https://glasshape.co.nz/bend-calculator/
Shapediver Model: https://www.shapediver.com/app/m/nJtMgtnJ1Z5p35ttXNljSYxdqymlj4

Lastly, it would be nice if the iFrame settings could be stored, currently have to re-apply all the settings - colour, logo and various checkboxes.

iFrameSettings
iFrameSettings1095×263 18.3 KB

First time posting on a forum so if there’s any more information I need to provide let me know.
Any help on what could be causing this is appreciated.

2

Regarding the iframe embedding issue: I can reproduce the issue in your website and reported it to our development team. However, since it only happens in this context (not in the platform or with the model embedded in other websites), it might be an issue related to your website itself. I will get back to you after we investigate more.

Regarding copying the iframe settings: we will add this functionality in the future, for embedded iframes and Apps. For now, you can just directly copy and paste your model’s slug in the iframe code you generated instead of re-applying settings on the platform directly. The styling settings are part of the iframe code.

I copied and pasted the iframe settings you have on your website below:

<iframe id="sdv-iframe" width="1900" height="100%" src="https://www.shapediver.com/app/iframe/MODEL_SLUG?primaryColor=%238CC63E&amp;secondaryColor=%23000000&amp;surfaceColor=%23F5F8F8&amp;backgroundColor=%23083E52&amp;showControls=1&amp;showZoomButton=1&amp;showFullscreenButton=1&amp;showToggleControlsButton=1&amp;logo=https://glasshape.co.nz/wp-content/uploads/2024/11/Glasshape-Logo-Mono-White.svg&amp;hideDataOutputsIframe=1&amp;hideAttributeVisualizationIframe=1&amp;parametersValidation=0" referrerpolicy="origin" allowfullscreen="" style="overflow-x: hidden; overflow-y: auto; border-width: 0;">
    <p>Your browser does not support iframes.</p>
</iframe>

You can just replace MODEL_SLUG with the new slug you get after uploading new models.

1 Like
3

Thanks for your reply. I understand what you’re talking about regarding replacing the model slug which is why I consider what I suggested as a nice to have rather than a need.

In terms of the main issue, I have just been informed that the iFrame has been placed inside an ‘Elementor HTML Widget’ . Could that have something to do with it? I hope that provides some more information as seeing where the problem lies.

4

Do you have another option to embed iframes in your website? Or at least a way to disable the loading animation of this widget? The issue seems to be caused by it. At the moment, we could not identify why or how to prevent it from the iframe’s side.

5

We’ve tried both the suggestions you’ve mentioned; disabling the loading animation and directly embedding in a WordPress HTML component but it doesn’t seem to fix the issue. For now we have ungrouped the inputs to eliminate this issue.