There are 2 types of embeds CGTrader provides:
We have multiple implementation options for real-time
, but let’s start with creating an embed.
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
Embeds can also be created manually by clicking on the + New Embed button:
Once the button is clicked embed creation guide will open. Please read carefully the instructions in the opened modal. There will be 4 steps:
Please give a descriptive name of the embed. This name is important for SEO reasons.
Select embed type. You can select multiple if needed. Multiple types are necessary if you want to have different options on the same page.
Select or upload required files. Generally, for the 3D viewer, you’ll need a
read more about the difference
) file, a
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.
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.
Now you should see your new Embed created in the right sidebar:
Copying Embed Codes in ARsenal
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:
You should see modal like the one below:
And the embed code should look like the following. Note that in this case we will be embedding inline
and also a
View in my Room
Composition01 AR PLP',
Composition01 AR PLP',
Target elements for the content to appear can be edited by clicking on
Show Advanced Settings
Take a look at this example of the above code in action:
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.
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” />
You will need to provide width and height for the iframe element
Getting Embeds via API
The API documentation is available