All of the widgets (i.e. 3D viewer, 360 HD and native AR) can be integrated into any web page supporting java scripts in 3 simple steps:
- Create a widget on Modelry
- Provide a class name of the area on your web page where you want it to go
- Copy the generated script to your web page
Our native AR viewer can be viewed from the 3D viewer when loaded on mobile, integrated as a “view-in-room” button, or used as QR code linking to this experience.
There are 2 types of embeds CGTrader provides: Real-time rendered 3D viewer with AR capabilities and 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 My Products section.
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:
Step 1
Please give a descriptive name of the embed. This name is important for SEO reasons.
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.
Step 3
Select or upload required files. Generally, for the 3D viewer, you’ll need a glTF (or glb 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.
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.
Now you should see your new Embed created in the right sidebar:
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:
You should see modal like the one below:
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:
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.
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 here.