How to use the Shapediver API in page code

Hello, I have been working through the documentation to upload my ShapeDiver model to a website I am making in Wix. I am currently on the “how to use the ShapeDiver API through an iframe” page. I have gotten the iframe to show the model using the html code, but I am unable to get the SDV Reflector to work in the page code. It comes up as undefined. In the object html code I have uncommented the following script per the instructions As the page code is in javascript, do I need to call the API in the page code as well? If so, what is the best way to use the API in javascript applications? When I’ve tried to do so it hasn’t defined the different functions such as “api.parameters.updateAsync”. I should add that I am using the couch model as I work through the documentation.

Thank you for your help,
Jake
j.elbrecht

It would be very nice if shapediver would provide plugins for different e-commerce systems. But for now you are on your own :slight_smile:

1 Like

I think I’m more interested in better understanding how to use the SDVReflector to get access to an API object without using Window.postMessages. A plugin sounds fantastic but this should be doable regardless.

We are working hard on the platform upgrades at the moment and plugin for Wix in not planned in foreseeable future.

Embedding iFrame to Wix is straight forward and works fine. However, you need direct embedding for access to the ShapeDiver API, see code example below, for more check our CodePen library. We don’t have any experience with the Wix API so I can’t give you any advice but I’m sure a good web developer will be able to help. The documentation with the API reference is good point to start.

Edit
Can you please create a video or some other kind of example of the following.
Just a simple example. Mabe how to get a pricing value and placing that value in a text field :slight_smile:

Activating API access

We provide a script for reflecting the API to the iframe’s parent window. This is done by translating all API calls to and from messages between the browser Window objects. Enable the script by uncommenting the last line of the iframe code:

<!-- ShapeDiver Viewer API reflector, uncomment the following line to use it --> <script src="//viewer.shapediver.com/v2/2.13.0/sdv_reflector.min.js"></script>

Getting the API object

After loading the example example with the reflector script, try to type api=SDVReflector.get('api') in your browser console to see the magic and get access to an API object without the need to think about Window.postMessage.

Okay I can now see the data that I am looking for, when running my iframe with the “reflector Script” enabled.

When I open Consol in the Chrome browser (F12)

I then first run:
api=SDVReflector.get('api')

Then I run:
api.scene.getDataAsync('SDPrice')

SDPrice = DataOutput for the price

My question.
How do i “get” the data property from the DataOutput?
I probably need to to write something that included this --> Data[0].data

It would be HUGLY helpful if someone could make a simple HTML script, where they:
1 - use the iFrame API approach
2 - takes out one of the data from a ShapeDiverDataOutput (eg the data property)
3 - places that data property inside a new text field.

Following calls return a list of all data outputs:

api=SDVReflector.get('api')
api.scene.getDataAsync().then(function(response){console.log(response.data)})

You can then access get value of an output like this:

api.scene.getDataAsync().then(function(response){console.log(response.data[0].data)})

As I mentioned earlier, we are not specialists on Wix websites but I hope this helps and feel free to share your findings in this thread.

Awesome, thank you :raised_hands: Will see if I can make some magic now :slight_smile:

@ Hcthisen, are you in Wix? Would you be willing to walk me through how you got it to work? I am still having issues getting the API to work in the browser console using F12.

Hi, sorry I am working in WordPress, but the procedure should be the same… I will see if I can make a little video of what I did.
ps. I have not been able to integrate the price value with my shopping cart yet, but I have “found” the value :slight_smile:

I would definitely appreciate it if you could make a brief video! That would be incredibly helpful.