Share
Explore

icon picker
Modelry Embed Integration

What an embed is and how to integrate one to your website
There are 2 types of embeds CGTrader provides:
Real-time rendered 3D viewer with AR capabilities
360HD rotator

We have multiple implementation options for real-time 3D viewer and AR, but let’s start with creating an embed.

Creating Embeds

Embeds are created automatically if 3D files are delivered by CGTrader. After Modeling Request is finished, a product with the same Title and SKU can be found in the Assets section.
Embeds can also be created manually by clicking on the + New Embed button:
Screenshot 2021-10-28 at 18.06.07.png
Once the button is clicked embed creation guide will open. Please read carefully the instructions in the opened modal. There will be 4 steps:

Step 1

Please give a descriptive name of the embed. This name is only important for SEO reasons.
image.png

Step 2

Select embed type. You can select multiple if needed. Multiple types are necessary if you want to have different options on the same page.
image.png

Step 3

Select or upload required files. Generally, for the 3D viewer, you’ll need a glb (or glTF read more about the difference here) file, a usdz, and a preview image. For a 360HD rotator, you’ll need a sequence of images that each have a naming suffix like 0001, 0002, ..., etc.

image.png

Step 4

The final step is to preview if the 3D viewer or 360HD rotator is behaving as intended, adjust any settings if needed and save and publish the embed. Publishing the embed generates a link to CDN. It is needed for fast and reliable delivery of your embed.
image.png

Now you should see your new Embed created in the right sidebar:
Screenshot 2021-10-29 at 08.18.33.png


Copying Embed Codes in Modelry

So you have your embed created now how do you integrate it into your website? There are two ways, but one is significantly better than the other. Let's start with the recommended.

Adding script tag

We recommend going with the script tag as it has some benefits:
We automatically include metadata so you don't need to do that manually.
It allows us to deliver new features without any need for you to update the implementation.
A more complicated implementations like wrapping content on your page or having View in my Room button are only available using script tag

To get the script click on the three vertical dots right next to the embed and click on the Copy Embed Code option or Embed options to open the following modal:
Screenshot 2021-10-29 at 08.18.40.png
You should see modal like the one below:
image.png
And the embed code should look like the following. Note that in this case we will be embedding inline 3D viewer and also a View in my Room button:
<script>
(function(ar,s,e,n,a,l){
ar.arsenal=[{
uid: '1044358096',
user: 'fatboy',
target: '.embed-viewer',
viewer: '3D',
gltf: '104435.gltf',
usdz: '104435.usdz',
preview: 'preview.png',
name: 'Paletti Composition01 AR PLP',
token: 'DtfzFsCTnPzijFRNW89A4SEA'
}, {
uid: '1044358096',
user: 'fatboy',
target: '#embed-button',
viewer: 'Button',
gltf: '104435.gltf',
usdz: '104435.usdz',
preview: 'preview.png',
name: 'Paletti Composition01 AR PLP',
token: 'DtfzFsCTnPzijFRNW89A4SEA'
}];
a=s.querySelector('body');
l=s.createElement('script');
l.async=1;
l.src=e+'@1';
a.appendChild(l);
})(window,document,'https://unpkg.com/cgloader');
</script>
<div class="embed-viewer"></div>
<div id="embed-button"></div>
Target elements for the content to appear can be edited by clicking on Show Advanced Settings:
image.png
Take a look at this example of the above code in action:
Note: CSS may need to be adjusted to achieve the desirable look

Alternative way by direct link via iframe

This embed implementation method is limited to Inline 3D viewer only!
To get the direct link to the viewer click on the three vertical dots right next to the embed and select Copy Direct Link.
Screenshot 2021-10-29 at 10.27.22.png
Then place that link as a source for the iframe on your website. The final result should look like this:
<iframe src=”https://viewer.cgtarsenal.com/fatboy/1044358095/viewer” />
Note: You will need to provide width and height for the iframe element

Getting Embeds via API

The API documentation is available
.

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.