Iframe Viewer loading issues (height, full screen, params etc)

Hi,

I am trying to use ShapeDiver iframe for the first time, and I am facing some simple issues that you might be able to help me with:

(1) Height of the Viewer

Regardless of the value I use, the height of the viewer remains extremely small. See below:

This happens on Safari and Chrome, Desktop (Mac) and Mobile (iPhone). I have a Shopify website and I am using HTML block to load the iframe code. I tried different values for the height, and I also expanded the width of the HTML block on the Shopify interface.

(2) Full Screen Feature Not Working

When I click on the full screen feature, it only works on Chrome on Dekstop. It does not work on Safari Desktop and Mobile. See below:

On Chrome Mobile, the full screen button doesn’t even appear. Also, on Chrome Mobile, I cannot view the parameters. See below:

(3) Saved States

Not an issue, just the question of a novice. It is perfectly possible to load saved states, but I don’t see how we can generate a new saved state from the viewer loaded with iframe on my website. In other words, my question is: is it possible to save an iframe on my website, or is this feature only available on ShapeDiver’s website?

Thanks for your help.

Regarding your points 1) and 2): it would help if you could share a link of the embedded model, on a test page for example. I am afraid the issues you are seeing are linked to your website itself (this HTML block in Shopify). This can explain why the fullscreen button does not work, this is typically a setting of the website where the iframe is embedded.

Regarding point 3): When a model is embedded as an iframe, anonymous users are interacting with it, and therefore saving a state is not possible as they need to be saved in a specific ShapeDiver account. What would you expect to happen if a user of your website was to save a state from the iframe? Should this state be available in your ShapeDiver account afterward? Or should the user be able to access it and load it in the future? That would mean this user has an account on your website and the state is saved on your website’s database.

If you explain further what your goal is regarding this point, I might be able to point to an appropriate solution.

Hi Mathieu,

Very clear.

Regarding points (1) and (2), indeed it must be related to the HTML block on Shopify and the theme I am using. I only have a limited understanding of how it works. Here is a test page on my website: test page | Custom Furniture & Home Renovations Since 1972

Regarding point (3), the basic goal is to monetize the advanced features of the configurator, including saving the model, exporting 3D drawings and downloading high definition rendered pictures. Best case scenario: clients make a payment, which unlocks these features, and all exports and saved states by this client are documented on his/her customer account on our website. They can then meet with our team to improve their design, get a quotation, or go to another vendor to manufacture. I am in touch with Product Lab to see how he can help build this, but I am also looking for a simpler, faster work around with saved states and embedding.

If you ignore the payment for now (this can be settled with a different product), the easiest solution would be to use saved states on the ShapeDiver platform, but we would still need to recreate the state instead of using the parameters selected by the client the first time. Hence my question on how to save a state from an iframe: the client would find our website, use the configurator for free, save their model, and then contact us to discuss / refine / quote. Maybe the solution is to use a JSON export instead of saved states, and then uploading the params on shapediver to create the saved state or to create a dedicated model. But then, would the client still be able to play with it and save it again without a shapediver account?

I am happy to discuss this during your community catch up if that makes sense to you. Thanks.

Regarding the iframe height: there seems to be a theme override that sets the height of iframes to auto:

If you cannot override this setting, I suggest you send a support request to the theme author.

Regarding saved states: unless you implement a user management system, I don’t see a built-in way to make use of saved states for your purpose at the moment. But you could use the simple import/export JSON parameters feature indeed, which can be included in the iframe. Users could export their parameters state as a json file and send it to you, or later come back to the configurator and load the file to continue iterating. You can read more about this feature here.