Share
Explore

ARsenal 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
My Products
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 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
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.

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.

Screenshot 2021-10-29 at 07.51.11.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 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:
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:
'.arsenal-viewer
',
viewer:
'3D
',
gltf:
'104435.gltf
',
usdz:
'104435.usdz
',
preview:
'preview.png
',
name:
'Paletti
Composition01 AR PLP',
token:
'DtfzFsCTnPzijFRNW89A4SEA
'
}, {
uid:
'1044358096
',
user:
'fatboy
',
target: '#arsenal-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=
"arsenal-viewer"
></div>

Target elements for the content to appear can be edited by clicking on
Show Advanced Settings
:
Screenshot 2021-10-29 at 10.00.03.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.