Iframe API Issue

Happy new year to everyone!

I was using Squarespace to host a website + some customizers through an iframe.

At a certain point, I needed to get some info from the GH definition, so I started playing around with the API and a simple definition on codepen.io. I managed to get the data I needed to punch it through an onclick button as a part of an URL and everything worked as expected (of course this is a proof of concept GH and i’ll have to work with the final definition)

https://codepen.io/ignasi90/pen/RwGydOb?editors=1001

However, when I tried moving it to Squarespace, there seems to be some sort of conflict, because it ends up looking just like as tiny as this:

Can this be related to some sort of css conflict in between the libraries loaded by Shapediver vs. Squarespace?

However, since I didn’t manage to make everything look as I wanted (im not a web developer, the solution might be a couple of clicks away-or maybe not…) I decided to move back to the iframe embedding, which worked just fine with squarespace since the very begging.

However, as soon as i started reading and testing there is no way to get access tot he GH Data.
Could you please tell me if there is something i’m doing wrong?

This is the codepen test:
https://codepen.io/ignasi90/pen/VwKdmOQ?editors=1111

I even tried to copy/paste the source code from this example on the usage doc:


It gathers info when I type api=SDVReflector.get(‘api’) through the console, however, as soon as i move to codepen, and change the ticket to the sample definition i’m working with for testing purposes, everything breaks.

It would be really nice to have some support from your side!
Thanks in advance :slight_smile:

In general, I would recommend using direct embedding if possible. It will save you a lot of trouble. You are probably right that it is a css issue but I think there is a way to solve it within squarespace, however it is difficult for me to help without seeing the setup.

Regarding the iframe, there is missing code in your example. You need to include the reflector in the header and create the reflector object. You can check this example (see the header in Settings > HTML). It works with your model (you can call the api from the console on your model).

Hi Mathieu,

Thanks for your fast reply!

I’ve just checked the example you provided and still can’t call the " api=SDVReflector.get(‘api’)" through the console, I get this “invalid or unexpected token” error.

About the direct embedding option, what would you need from my side/Squarespace to be able to check what is going on?

Thanks again Mathieu! :slight_smile:

You can’t use the codepen console, it doesn’t provide access to the iframe. You need to use your browser console and locate it inside the iframe.

Also you don’t need to call api=SDVReflector.get('api'), this is already done in the javascript code. Just call any API function directly (for example api.parameters.get()).

Regarding Squarespace, since this is not a ShapeDiver-related issue, I think this is beyond the scope of our support. You could contact our sales and request a support contract for our developers to help you further with this.

Thanks a lot Mathieu!

No worries, I perfectly understand the Squarespace support concern.
Could you please send me the support contact? We will probably need further Shapediver web dev. in the future, and having a trusted support would be really helpful!

However, for this first stage of the project, since what i need is something “simple” i’d like to handle everything on my own, not only as a selflearning, but also to be able to properly communicate to your team our needs for the future request.

I’ve managed to connect to the api thanks to your tips:

I get the info I wanted through the console, but for some reason it is not being read by the js function.
It worked just fine with the direct embedding! Should call/name the data in a different way or use a different nomenclature while using the iframe?

Maybe something before the “barcode_value.data[0].data.barcode_value” that reffers to the iframe?

I just need to read a couple of values from the GH def and include them at the end of the url.
When clicking on the proceed button, it will open a new bar with the dummy web + the value i’m trying to read.

Attached code:

My apologies for such simple questions, i’ve just been playing around with JV & Shapediver Api for a couple of days!

Thanks a lot.

Update:

I tried moving back to the Direct embedding and managed to make it work as i wanted in Squarespace, it was a css/div stupid issue. yay! :slight_smile:

However, there is just one last thing that is stopping me from calling this a success.
I managed to achieve everything I wanted in codepen (no errors & everything works as expected)

However, when I move to Squarespace, it seems that the same script is not gathering the data from the GH definition. There is one error on load which i guess is the reason why it is not properly working.
However, i’m able to manually get the info I want through the console using the command:

api.scene.getData({name: “resulting”});

Got any ideas on why i’m getting this error? Is this issue the reason why the code is not working?

Question 2: Is there an easy way to change the message of the export popup message?

image

Question 3: I managed to trigger 2-3 exports on a single “proceed button” click.
However, eventhough they are launched automatically, the first export starts, the window pops, and the second one doesn’t start until I click the “ok” button from the first export. Is there a way to avoid that? Having a single/unique popup message for the 2-3 exports?

Question 4: lets say my export1 is a 3dm, my export 2 is a jpeg and my export 3 is a pdf, thus I’m recieving one e-mail per each export. Is there a way to have a single order e-mail with the 3 download links included in it? Or a single order e-mail and single download link including the 3dm jpeg and pdf files?

Thanks a lot in advance Mathieu!

Hi @mathieu1 !

I’ve finally managed to make it work, thank you so much for your tips!
Could you please send me the contact details of your trusted developers for future project request?

It would also be awesome if you could answer my Questions 2 - 3 - 4 from my last post.

Thanks in advance! :slight_smile:

Support for Squarespace integration is out of scope of this forum since our developers are busy working on platform upgrades coming soon. Stay tuned and feel free to vote or suggest new features below.

Our sales team can recommend you developers experienced with our API who will be able to take your project further. Please ask for the details via the contact form at www.shapediver.com .

Hi @pavol ,

I’ve managed to solve the Squarespace issues on my own. No longuer need support on that.

The questions i’d like you to answer are the 2- 3 - 4 on my last post.
I’ve pasted them down below:

Question 2: Is there an easy way to change the message of the export popup message? Or is it something we cannot change as users?

image

Question 3: I managed to trigger 2-3 exports on a single “proceed button” click.
However, eventhough they are launched automatically, the first export starts, the window pops, and the second one doesn’t start until I click the “ok” button from the first export. Is there a way to avoid that? Having a single/unique popup message for the 2-3 exports?

Question 4 : lets say my export1 is a 3dm, my export 2 is a jpeg and my export 3 is a pdf, thus I’m recieving one e-mail per each export. Is there a way to have a single order e-mail with the 3 download links included in it? Or a single order e-mail and single download link including the 3dm jpeg and pdf files?

Thanks in advance!