Direct Embedding private models

Hi,
We just signed on as a PRO user blueprint.
Here is one of our private models to be embedded to our web page.

https://app.shapediver.com/m/mid-XXXXX

Can I just use localhost:8080 as a domain to embed our viewer ?
For now, localhost:8080 is http, not https.

I used localhost:8080 as Global Domains in the Domains tab.
Also used localhost:8080 in “Allowed domains for embedding” in Edit Model page.

But I got this error:
POST https://mid-XXXXX/ticket/5fb9cf
net::ERR_NAME_NOT_RESOLVED

Thanks

Can you send a minimal code example that produces this error? How are you instantiating the viewer and loading the model ticket?

index-shapeDiver.html (536 Bytes)

AppJSX.txt (3.6 KB) indexJS.txt (1.7 KB)

Hi Mathieu,

I uploaded 3 files. AppJSX.txt is actually App.jsx. And indexJS.txt is index.js.
I no longer have earlier problem on localhost as long as I used the ‘eu-central-1’ as modelViewUrl.

Are we always using ‘eu-central-1’ as modelViewUrl ?

Our web app will display private model, but each time the screen mixed with the previous canvas.
screen1.png shows the Couch model
When I clicked the button to show Shelf model, noticed there are two canvas created.
The Couch and Shelf both show but Shelf is on the small right side area.

How to clean up the first canvas before the second canvas display ?

@mathieu1

I created a sandbox.

Steps to reproduce the issue:

  1. launch sandbox - The Couch model is display
  2. click button ‘Click to show Shelf’ - The Shelf model is displayed on the side. It mixed with the Couch model. The browser inspect shows two canvas instead of one. I expect to see Shelf model alone.

Yes, unless you have an Enterprise account with dedicated servers.

For the rest, I am not very familiar with React, but it looks to me like you create another dom container every time the buttons are clicked. In general, this version of the viewer does not have a very straightforward way to switch between different tickets. What you can do is load several tickets in the same container and just hide or show the contents of each comm plugin that is registered in the scene. Make sure to give different runtimeIds to each plugin! There is a full code example to do just that:

Let me know if this approach would work for you.

@mathieu1

Your codePen example solved my problem. Thanks a lot.
One issue is the ShapeDiver logo shows when the viewer is loading.
Is there any way to hide that in direct embedding?
I heard that iframe embedding can avoid that. Do you have an example ?

I see the ShapeDiver logo neither in my code example above nor in yours. But maybe that’s just me because indeed the branded mode (showing the logo) should be activated by default. You can get rid of it by adding this setting when you register the comm plugins:

brandedMode: 'false'

I updated my code pen above to include this option for both comm plugins. Let me know if that solves your issue.

@mathieu1

When I load my app in my project(not the one in codesandbox) to browser, I don’t see the logo.
FYI. My app also loads a default contents/plugin in the viewer when launches.
I only see the ShapeDiver logo show when I resize the window.

Adding the brandedMode setting (brandedMode: ‘false’) seems not affecting the result.

  // initialize a session for the model, don't load geometry yet
  await api.plugins.registerCommPluginAsync(graphicsData[0])
  geometryLoaded[graphicsData[0].runtimeId] = false;

  await api.plugins.registerCommPluginAsync(graphicsData[1])
  geometryLoaded[graphicsData[1].runtimeId] = false;

  await api.plugins.refreshPluginAsync(defaultPluginId)
  geometryLoaded[defaultPluginId] = true

Thanks!

Why is the viewer reloaded when you resize the window? Could you share a minimal code example and steps I can use to reproduce the issue?

@mathieu1
Thanks. I’ll see if I can come out a code example for the resize question.

I got another question on the codePen example you sent.

  1. When we switch to a different runtimeid/pluginid, can we also ‘attach’ some parameters name/value with it so the desired parameters’s value are displayed.

If we can’t do 1),
2. Every time after we switch to a different runtimeId/pluginid, can we send an update parameter request to the new runtime plugin (i.e. await api.parameters.updateAsync{[…]}) ? When do we send the update parameter request?

The switch in my example just shows and hide the contents of each plugin. They are both always loaded in the viewer, and there is no problem sending new parameter update requests to each of them at any time (even when they are hidden).

@mathieu1

I have listed 6 names in Global Domains and these names showed in each
private model’s domain setting.
Only one domain got CORS error. What could be wrong ?

Access to XMLHttpRequest at ‘https://sdeuc1.eu-central-1.shapediver.com/ticket/2d58aad8a896da38e553de....ea212c91fd39a’ from origin ‘http://dxxxxqas01’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

We are aware of a CORS issue that sometimes happens and we are investigating it. Emptying your browser cache might temporarily fix the solution but it might happen again. I will let you know when we are able to identify the problem.

If it is caching issue, we should see the issue happened in the other domain names.
But it showed for only one domain name.

Also this url ‘http://dxxxxqas01.yyyy.com’ works, and this one ‘http://dxxxxqas01’ doesn’t.
But the other server i.e both http://zzzz.yyyy.com’ and ‘http://zzzz’ work.