The VNTANA 3D Viewer can be integrated into your website by utilizing an iFrame or shared with others by simply utilizing an Asset or Variant Group’s embed link. This guide will show you how to retrieve your iFrame or embed link manually on the Platform as well as via the VNTANA Admin API.
Steps to Obtain iFrame Embed Code
- Login to your account on the VNTANA Platform
- Navigate to the correct Workspace
- Click on Asset Library in the left-hand navigation menu
- Select the Asset you want to view
- In the Share tab from the Asset View Page, click on the Copy button to copy the entire Embed Code (circled in red below). The iFrame is now copied to your clipboard and can be used anywhere on your site. Just paste it in the HTML of the page you would like to include the 3D Web Viewer.
Important Notes
- Make sure your Asset is Live Public, so it can be viewed publicly. Click the “Change State” button from the Asset Details Page to publish your product and set its review state to Live Public.
- The <iframe> src is the URL to the 3D asset in a Standalone Viewer Page. This shareable link can be copied by clicking the Share button, which is above the iFrame copy section.
- The asset can easily be swapped out for another asset in your Asset Library by changing the productUuid value. The productUuid can be found on the Asset’s Details tab labeled Asset UUID.
- The Client Slug and Organization Slug are static values for all of your Assets under the same Workspace and Organization.
Embed Options / Styling Recommendations
- The width and height of the <iframe> can be changed to better fit your site.
- This can be accomplished from the provided Embed Options, or the <iframe> style can be updated with custom CSS if needed.
- Use the transparent background option to place the viewer over your own custom background design or color.
- The buttons within the viewer can also be hidden by selecting the options found in the Embed Options section (pictured below).
- A domain can be added to an iFrame to allow for domain specific filtering of Analytics.
- Only one domain can be added per Embed Code, but a single Asset can have its’ viewer embedded on multiple sites each with different domains.
Creating an iframe / Getting an Embed Link via API
When an Asset is created and a 3D model optimized, an iframe is generated which allows for easy embedding of the VNTANA Viewer and that Asset. The iframe component itself is rather generic and aside from any customization you wish to do to it on your end, it only has one property that is unique.
<iframe loading="lazy" class="lazyload" frameBorder="0" src="..." width="400" height="250" allow="fullscreen"></iframe>
The properties in the iframe can be customized to change the size of the viewer, add a border, block fullscreen, as well as add a class to it for even more customizability. The src property is the embed link for the viewer with a specific Product loaded.
Important: In order to leverage the Admin API to generate and use the iFrame or embed link, your Asset must be in the Live Public status. If it is in Draft it won’t be accessible via search endpoints, and if it is in Live Internal it won’t be shareable externally. See the ‘Publish Status’ section of this guide for more info.
Creating the Embed Link
To create the embed link and subsequently be able to create the <iframe> you will need certain information which can either be obtained via the Admin API or stored locally at the time of creating an Asset. The embed link requires the Asset UUID, Workspace Slug (clientSlug), and Organization Slug. To obtain the Workspace or Organization Slug via the API, you need to make calls to retrieve data pertaining to the Organization and Workspace. Check below for a couple endpoints to accomplish this.
The Request is structured as follows:
The Response is structured as follows:
The Request is structured as follows:
The Response is structured as follows:
As for the Asset UUID, this can either be obtained by searching via the API for the Asset in question or by setting up a Webhook that notifies you when an Asset has completed converting (this works great if you want to automatically generate the <iframe> or embed link once a Asset has finished converting). To learn more about searching for Assets to retrieve the UUID, view this guide.
Once you know each of these, the URL can be constructed by replacing their query values within the embed link. A detailed example is shown below.
Base URL: https://embed.vntana.com
- productUuid : [Required] The UUID of the Asset to load in the viewer.
- clientSlug : [Required] The slug of the Workspace the Asset is found within.
- organizationUuid : [Required] The slug of the Organization the Workspace and Asset are in.
- fullScreen : [Optional] Indicates whether the fullscreen button should be hidden. Default is to show button, set fullScreen=0 to hide the button.
- mobileARView : [Optional] Indicates whether to hide the AR button in the viewer when on a Mobile device. Default is to show button, set mobileARView=0 to hide the button.
- qrCode : [Optional] Indicates whether to hide the AR button in the viewer when viewing in a Desktop browser. Default is to show button, set qrCode=0 to hide the button.
- domain : [Optional] Set the domain where the iframe will be embedded. This allows you to filter Analytics data by the Domain Source from the Analytics Dashboard.
With an Embed link created, it can be set as the src property of the iframe and now the iframe is ready to be embedded on your site.
Note: The iframe / embed link will not be able to load the model if it is not first published on the VNTANA Platform. To do this, simply go to the Assets’ page and in the top right corner click the ‘Change State’ button and select ‘Live Public’. Or, to publish multiple Assets at once, from the Asset Library list view, check the one’s you wish to publish and select the ‘Change State’ button in the top right and select Live Public.
